{ "title": "Intro Gradient", "label": "Intro Gradient", "description": "Use the intro-plugin to attach a solid color or gradient as introduction to the page.", "image": "2.galleries\/1.landscapes\/antarctica.jpg", "content": "## Page Intro Gradient\n\nThe page *intro plugin* allows you to add an image, color or gradient as an introduction at the top of the page. The intro can display behind- or below the menu, at any height, and you can include page context items. In this example, we have set a **gradient** to display at 300px height, below the menu.\n\nSimply add gradients directly to the **source** field in your **page › plugins › page intro** plugin. Read more about CSS3 gradients [here](developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Images\/Using_CSS_gradients) and [here](www.w3schools.com\/css\/css3_gradients.asp). * *Add CSS gradients without browser prefixes!*\n\n## Options\n\n**Source**\nSet the source of the intro as either an image, gradient or solid color.\n\n**Show in Intro**\nChoose to show title, description and content within the intro area.\n \n**Height**\nSet the height of the intro area in px or %. If disabled, height will automatically adjust to size of image. You should always use a height for gradients, colors and repeating background patterns.\n \n**Fixed**\nCreates a cool effect where the background image remains fixed when scrolling.\n \n**Overlay Menu**\nWhen enabled, menu will overlay the intro, which is attached to top of page. When disabled, the intro is attached below the menu.\n\n---\n\n## A few gradient examples\n\n
<\/div>\n
radial-gradient(ellipse farthest-corner at 50% 100%, #78a642, #273716 100%)<\/code><\/pre>\n\n
<\/div>\n
radial-gradient(circle, gold, darkorange)<\/code><\/pre>\n\n
<\/div>\n
radial-gradient(ellipse closest-side, gold, darkorange)<\/code><\/pre>\n\n
<\/div>\n
radial-gradient(circle,salmon,brown)<\/code><\/pre>\n\n
<\/div>\n
repeating-linear-gradient(gold 0px, darkorange 1px)<\/code><\/pre>\n\n
<\/div>\n
repeating-linear-gradient(#AAA 0px, transparent 1px)<\/code><\/pre>\n\n
<\/div>\n
radial-gradient(closest-side, rgba(255,215,0,1), transparent), repeating-linear-gradient(gold 0px, darkorange 1px)<\/code><\/pre>\n\n
<\/div>\n
linear-gradient(45deg, red, orange, yellow)<\/code><\/pre>\n\n
<\/div>\n
radial-gradient(circle farthest-side, gold, gold 50px, transparent), repeating-linear-gradient(-45deg, gold, gold 5px, darkorange 5px, darkorange 10px)<\/code><\/pre>\n\n
<\/div>\n
background-image:repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px)<\/code><\/pre>\n\n
<\/div>\n
linear-gradient(to right,#FB2B69 ,#FF5B37 100%)<\/code><\/pre>\n\n
<\/div>\n
linear-gradient(45deg, hsla(280, 96%, 48%, 1) 0%, hsla(280, 96%, 48%, 0) 70%), linear-gradient(135deg, hsla(319, 91%, 42%, 1) 10%, hsla(319, 91%, 42%, 0) 80%), linear-gradient(225deg, hsla(17, 100%, 50%, 1) 10%, hsla(17, 100%, 50%, 0) 80%), linear-gradient(315deg, hsla(64, 96%, 41%, 1) 100%, hsla(64, 96%, 41%, 0) 70%)<\/code><\/pre>\n\n
<\/div>\n
linear-gradient(45deg, #555351 0%, #555351 5%, #8d7b6c 40%, #cc9d7a 70%, #fff9aa 100%)<\/code><\/pre>\n\n
<\/div>\n
linear-gradient(135deg, #325571 0%, #8e9fa4 38%, #decab2 66%, #f2d580 78%, #ffa642 100%)<\/code><\/pre>\n\n
<\/div>\n
linear-gradient(to left, #C02425 , #F0CB35)<\/code><\/pre>\n\n***Tip!** Gradients can also be used in the [background-plugin](..\/background-image\/)!*\n\n---\n\n## CSS Gradient Resources\n  \n  \n  \n  \n  \n",
    "plugins": {
        "image_background": {
            "enabled": true,
            "src": "radial-gradient(ellipse farthest-corner at 50% 100%, #78a642, #273716 100%)",
            "height": "300px",
            "size": "100%",
            "below_menu": false
        }
    }
}