Suite à cet article publié par Benjamin, je me suis dit qu'il pourrait être intéressant de vous montrer comment réaliser une opération similaire pour le web, en utilisant quelques fonctions CSS expérimentales.
Pour remplir le texte on utilise la propriété background-image pour définir l'image de remplissage.
Cette propriété sert normalement à définir une image d'arrière plan dans le conteneur qui contient le texte. On va donc devoir ajouter la propriété -webkit-background-clip: text pour indiquer au navigateur qu'il s'agit d'une image d'arrière plan du texte.
Par ailleurs, la couleur par défaut du texte est le noir. De fait il faut attribuer une couleur transparente au texte pour que l'image apparaisse.
CSS:
.texteARemplir {
background-image: url(terre.jpg);
-webkit-background-clip: text;
color: rgba(0, 0, 0, 0)
}
Pour ajouter une ombre au texte on n'utilisera pas text-shadow. En effet cette propriété est généralement calculée par le navigateur comme un masque sous le texte. Or, notre texte est transparent pour laisser apparaitre une image. Donc l'ombre text-shadow qui se trouve toujours entre le fond du conteneur et le texte apparait au dessus de l'image de fond de texte.
Voyez plutôt :
On va donc plutôt ajouter le filtre drop-shadow.
filter: drop-shadow(5px 5px rgba(0, 0, 0, 0.5));
Enfin, pour ajouter une image de fond on procède comme toujours en applicant un background-image au conteneur du texte.
La bonne nouvelle c'est que l'image de fond du texte peut hériter de n'importe quelle propriété enfant de la propriété background, pour des effets plus dynamiques.
Par exemple avec un background-attachment: fixed :
Crédit image: paruvendu.fr
