Background-clip Appliquer un dégradé sur vos titres

Dynamisez vos titres avec l’effet Background-clip.

La propriétés « color » en css nous permet d’attribuer facilement une teinte à n’importe quelle balise, classe ou ID.

Mais il n’est pas possible d’appliquer directement un dégradé sur la police de caractères. Par contre il est très facile de mettre en place un fondu en arrière plan.

l’astuce consiste à combiner ces deux propriétés pour atteindre l’effet souhaité.

background image

h2 {
background-image: -webkit-linear-gradient(92deg,blue,red);
}

L’arriére plan de notre balise affiche maintenant un dégrader.

background-clip

background-clip fonctionne comme un filtre qui affiche l’arrière plan en transparence par rapport au texte.

h2 {
background-image: -webkit-linear-gradient(92deg,blue,red);
-webkit-background-clip: text;
}

l’arrière plan s’affiche dans les caractères de notre titre mais la couleur par défaut de notre texte masque le dégradé.

text-fill-color

Défini la transparence comme couleur de votre police avant d’afficher l’arrière plan.

h2 {
background-image: -webkit-linear-gradient(92deg,blue,red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Enfin nous avons notre dégradé sur la police.

Pour le moment cette fonctionnalité n’est compatible qu’avec chrome et Edge, Firefox ne la prend pas en charge.

Allez plus loin avec des animations pour créer un fondu entre couleur (à venir)

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

© 2017 Occitaweb formation WordPress et média sociaux