Intro Gradient

Utiliser le plugin-intro pour fixer une couleur unie ou dégradé comme introduction à la page. Use the intro-plugin to attach a solid color or gradient as introduction to the page.

Page Intro Gradient

Ajoutez simplement les dégradés directement vers le champ de la source de votre page › plugins › page intro plugin. En savoir plus sur CSS3 gradients ici et ici. Ajouter dégradés CSS sans préfixes de navigateur !

La page intro plugin vous permet d’ajouter une image, la couleur ou le dégradé en guise d’introduction en haut de la page. L’intro peut afficher derrière - ou en dessous du menu, à n’importe quelle hauteur, et vous pouvez inclure des éléments de contexte de page. Dans cet exemple, nous avons mis un dégradé pour afficher à hauteur de 300px, sous le menu.

Options

Source

Définir la source de l’intro comme soit une image, la couleur dégradé ou solide.

Afficher en Intro

Choisir d’afficher le titre, description et contenu dans la zone de l’intro.

hauteur

Définir la hauteur de la zone de l’intro en px ou %. Si désactivé, hauteur s’adapte automatiquement à la taille de l’image. Vous devez toujours utiliser une hauteur pour les dégradés, les couleurs et les motifs de fond extensible.

Fixed

Crée un effet cool où l’image d’arrière-plan reste fixe lors du défilement.

Menu de superposition

Lorsqu’activé, le menu se superposeront l’intro, qui est attaché au haut de la page. Lorsque désactivé, l’intro est fixé sous le menu.
---

Quelques exemples

radial-gradient(ellipse farthest-corner at 50% 100%, #78a642, #273716 100%)
radial-gradient(circle, gold, darkorange)
radial-gradient(ellipse closest-side, gold, darkorange)
radial-gradient(circle,salmon,brown)
repeating-linear-gradient(gold 0px, darkorange 1px)
repeating-linear-gradient(#AAA 0px, transparent 1px)
radial-gradient(closest-side, rgba(255,215,0,1), transparent), repeating-linear-gradient(gold 0px, darkorange 1px)
linear-gradient(45deg, red, orange, yellow)
radial-gradient(circle farthest-side, gold, gold 50px, transparent), repeating-linear-gradient(-45deg, gold, gold 5px, darkorange 5px, darkorange 10px)
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)
linear-gradient(to right,#FB2B69 ,#FF5B37 100%)
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%)
linear-gradient(45deg, #555351 0%, #555351 5%, #8d7b6c 40%, #cc9d7a 70%, #fff9aa 100%)
linear-gradient(135deg, #325571 0%, #8e9fa4 38%, #decab2 66%, #f2d580 78%, #ffa642 100%)
linear-gradient(to left, #C02425 , #F0CB35)

Tip! Gradients can also be used in the background-plugin!


CSS Gradient Resources