article

Une image dans mon texte, sans Photoshop

Par  Matthieu

Publié le 11 avril 2018

Retrouvez-nous sur BlueSky, Facebook et Mastodon.

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.

Sous le gazon...

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 :

Sous le gazon...

On va donc plutôt ajouter le filtre drop-shadow.
filter: drop-shadow(5px 5px rgba(0, 0, 0, 0.5));

Sous le gazon...

Enfin, pour ajouter une image de fond on procède comme toujours en applicant un background-image au conteneur du texte.

Sous le gazon...

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 :

Sous le gazon...

Crédit image: paruvendu.fr