Créer un texte avec background intégré

Si vous recherchez un moyen très moderne et efficace de styliser vos titres, prenez la peine de regarder à quel point utiliser un background pour styliser la couleur de votre texte peut-être incroyablement innovateur.

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram

1ère étape

Commençons par créer la structure HTML de notre titre.

<div class="banner">
    <h1 class="banner-title">BELIEVEMY</h1>
</div>

On peut sans problème se passer de la classe banner si vous souhaitez que votre background prenne toute la largeur de votre texte, vous devez l'englober comme ça.

2ème étape

Centrons horizontalement et verticalement le titre dans la classe banner avec flexbox :

.banner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background-color: #131416;
}

3ème étape

Il ne nous reste qu'à ajouter le background à notre classe banner-title :

.banner-title {
  font-size: 7em;
  font-family: arial;
  background-image: url('banner.png');
  background-size: cover;
  background-position: center;
}

Mais le résultat n'est pas encore là. Pour le moment nous avons bien un background derrière notre texte, mais nous sommes loin du résultat voulu ! Réglons ce problème avec l'ingrédient secret.

4ème étape

Il suffit d'utiliser background-clip pour définir la façon dont l'arrière-plan s'étend : ici on dit que l'arrière-plan s'arrête au texte, et pas à 100% de la div.

.banner-title {
  // Ce qu'on avait dans la précédente étape
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Ensuite, en mettant la couleur à transparent, on fait apparaître notre magnifique background sur notre superbe titre.

Cette astuce est incroyablement efficace pour des titres de site.