Appliquer une texture sur un texte
Appliquer une texture sur un texte uniquement en CSS
Cette proposition peut paraitre anecdotique, mais elle est amusante, et peut agrémenter un titre dans un article ou une boite libre très facilement.
Des informations plus précises sur la propriété utilisée (background-clip) ici
Selon mes tests, je n'ai rencontré qu'un seul navigateur (SeaMonkey) qui n'affiche pas ces textures sur les textes, je ne les ai bien sûr pas tous testés... mais les plus utilisés affichent cette astuce. Communiquez-moi au besoin vos observations...
Dans les exemples qui suivent, des textures (au survol également), ainsi que des dégradés... Les règles de style correspondantes sont indiquées au dessous. Elles peuvent être placées dans le code source de l'article de la boite libre entre les balises <style type="text/css"> </style> , ou bien dans votre fichier styleplus.css. Le code source est indiqué également, très simple à reproduire.
Il faudra cependant veiller, si vous utilisez des images de texture à ce que le chemin soit correct. Ici, les images sont dans un dossier img/textures. Si vous placez le style dans styleplus.css, il serait avantageux de placer vos textures dans un dossier textures que vous pourriez placer dans le dossier img de la skin, ainsi le chemin serait identique à celui proposé ici.
TEXTURE
SURVOL
DÉGRADÉ-1
DÉGRADÉ-2
.texture-cailloux {
background: url('img/textures/cailloux.gif'); /*chemin image texture*/
background-clip: text; /*NE PAS MODIFIER*/
-webkit-background-clip: text; /*NE PAS MODIFIER*/
color: transparent; /*NE PAS MODIFIER ou, à la place, les deux lignes ci-dessous*/
/* color: #fff;
-webkit-text-fill-color: transparent; */ /*utiliser éventuellement à la place pour SeaMonkey*/
letter-spacing:0px; /*écart entre les caractères*/
}
.texture-eau {
background: url('img/textures/eau.jpg'); /*chemin image texture*/
background-clip: text; /*NE PAS MODIFIER*/
-webkit-background-clip: text; /*NE PAS MODIFIER*/
color: transparent; /*NE PAS MODIFIER ou, à la place, les deux lignes ci-dessous*/
/* color: #fff;
-webkit-text-fill-color: transparent; */ /*utiliser éventuellement à la place pour SeaMonkey*/
letter-spacing:0px; /*écart entre les caractères*/
}
.texture-eau:hover {
background: url('img/textures/eponge.gif'); /*chemin image texture au survol*/
background-clip: text; /*NE PAS MODIFIER*/
-webkit-background-clip: text; /*NE PAS MODIFIER*/
}
.texture-gradient1 {
background: linear-gradient( to bottom right, #1f3336 10%, #f4c6a6 80%); /*nature du dégradé*/
background-clip: text; /*NE PAS MODIFIER*/
-webkit-background-clip: text; /*NE PAS MODIFIER*/
color: transparent; /*NE PAS MODIFIER ou, à la place, les deux lignes ci-dessous*/
/* color: #fff;
-webkit-text-fill-color: transparent; */ /*utiliser éventuellement à la place pour SeaMonkey*/
letter-spacing:0px; /*écart entre les caractères*/
}
.texture-gradient2 {
background: radial-gradient(#e66465 0%, #9198e5 70%); /*nature du dégradé*/
background-clip: text; /*NE PAS MODIFIER*/
-webkit-background-clip: text; /*NE PAS MODIFIER*/
color: transparent; /*NE PAS MODIFIER ou, à la place, les deux lignes ci-dessous*/
/* color: #fff;
-webkit-text-fill-color: transparent; */ /*utiliser éventuellement à la place pour SeaMonkey*/
letter-spacing:0px; /*écart entre les caractères*/
}
</style>
<p style="font-family:verdana;font-size:90px;text-align:center;"><strong><span class="texture-cailloux">TEXTURE</span></strong></p>
<p style="font-family:verdana;font-size:90px;text-align:center;"><strong><span class="texture-eau">SURVOL</span></strong></p>
<p style="font-family:verdana;font-size:90px;text-align:center;"><strong><span class="texture-gradient1">DÉGRADÉ-1</span></strong></p>
<p style="font-family:verdana;font-size:90px;text-align:center;"><strong><span class="texture-gradient2">DÉGRADÉ-2</span></strong></p>
Les classes "texture-xxx" peuvent être appliquées sur span comme c'est le cas ici ou sur tout autre élément ( p a div...).
Si vous pensez que l'adaptation pour SeaMonkey est utile, il faut remplacer color:transparent; (qui permet d'afficher la texture en transparence des caractères) par une autre couleur contrastée par rapport à la texture car dans ce cas, sur SeaMonkey, le texte apparaitra de cette couleur sur le fond de votre texture... Cela permet de le rendre lisible.
NB : la propriété -webkit-text-fill-color n'est pas standardisée (voir ici). Elle a la même fonction que color et peut être utilisée malgré tout... Là également, sur mes tests, seul SeaMonkey ne la connait pas, les autres navigateurs testés l'appliquent.
Amusez-vous bien...
Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.
Catégorie : - Autres astuces en CSS
Page lue 124825 fois
