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

14 mai 2016
Posted in Code, CSS
14 mai 2016 Occitaweb

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 *

Occitaweb création de site internet Albi

Création / formation / réseaux sociaux
18 rue dominique de florence
81000 albi