Comment créer du texte bicolore sans dupliquer le contenu ?

Texte bicolore sans duplication

La duplication de contenu pour obtenir un effet de texte bicolore peut être fastidieuse. Voici une solution plus élégante utilisant purement HTML et CSS :

Utiliser Background-Clip

Exploiter la propriété background-clip: text vous permet de colorer le texte avec un dégradé , offrant une immense flexibilité dans la création de combinaisons de couleurs :

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<div>

Cette technique élimine le besoin de contenu dupliqué tout en permettant la création d'effets de texte bicolores époustouflants et polyvalents.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!