Mettre un background image ou un dégradé sur du texte en CSS3

Dans ce nouveau billet, nous allons nous pencher sur une nouvelle technique pour décorer notre texte en particulier les titres Hn.

Avec cette technique, nous serons en mesure de placer une image de fond ou un dégradé à l’intérieur des textes et encore mieux, nous allons intégrer des animations avec!

La propriété CSS : background-clip:text

La technique est très simple à mettre en œuvre. Nous avons juste besoin d’ajouter un fond (peut être un dégradé ou image) dans le texte que nous voulons styliser.

Ensuite, nous allons ajouter les lignes CSS suivantes :

Il est important de noter que cette technique ne fonctionne que sur les navigateurs se basant sur -webkit (chrome , safari)

Mise en place de la démo

Pour la structure, il nous suffira de mettre en place la balise
<h1>lorem ipsum dolera imst…</h1>
Pour le code CSS de base, nous aurions besoin des éléments suivants :

Les css déclarés ci-dessus ne serviront qu’au centrage et la mise en forme du texte afin de pouvoir montrer l’arrière plan.
Maintenant, nous allons passer sur chaque démonstration spécifique.

Demo 1: Background Image avec animation lors du Hover

Background Image avec animation lors du Hover…

Les points que nous allons traiter dans ce démo seront :

  • La mise en place d’un bg image sur la page
  • Puis l’ajout d’ une image de fond sur le texte
  • Et enfin l’animation lors du hover

Voici les codes nécessaires pour cela :

Et c’est tout!!! Nous avons mis une transition sur l’élément afin que lors de l’événement hover notre fond va s’animer.

Essayez de changer la durée de la transition et les images de fond pour voir quel genre d’effet vous pouvez créer.

Démo 2: Animer un dégradé

lorem ipsum dolera imst…

La seule différence avec le démo précédent c’est que cette fois-ci nous allons utiliser un gradient avec l’animation.
Voici le code pour cette démo :

Coté gradient ça parait assez simple, mais vous pourrez jouer sur les effets pour améliorer encore le rendu.

Démo 3: Animer une image de fond

Nous allons utiliser la même animation que sur le démo 2 mais cette fois-ci on va utiliser un background image à la place du gradient

La technique est très simple il suffit de savoir l’utiliser correctement et on pourra avoir des effets différentes.
A vous d’utilisez votre imagination pour jouer avec la propriété CSS background-Clip.

lorem ipsum dolera imst…

Répondre