Obtention d'un texte bicolore avec CSS

Requête initiale :

Comment pouvez-vous obtenir l'effet d'un texte avec différents couleurs de chaque côté sans dupliquer le contenu ?

Approche conventionnelle :

Une méthode courante consiste à créer deux éléments de texte distincts et à les positionner côte à côte, chacun avec son couleurs d'arrière-plan et de premier plan uniques.

Solution alternative :

Pour minimiser la duplication de contenu, envisagez d'exploiter les propriétés CSS telles que background-clip:text. Cette propriété vous permet d'appliquer un dégradé au texte lui-même, permettant ce qui suit :

Implémentation CSS :

#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;
}

Structure HTML :

Explication :
Un dégradé est appliqué à l'élément #main, qui englobe le texte .
L'élément 
 a un dégradé inversé appliqué à son arrière-plan, qui est défini comme couleur d'arrière-plan du texte.
La propriété background-clip:text restreint le dégradé d'arrière-plan au texte. zone.
-webkit-text-fill-color : transparent garantit que le texte est transparent, permettant au dégradé d'arrière-plan d'apparaître.
Cette technique crée un texte bicolore effet sans nécessiter de contenu dupliqué. En utilisant des effets de fusion, il permet d'obtenir une transition transparente entre les couleurs sans avoir besoin d'éléments de texte supplémentaires.