Conseil rapide: comment ajouter des effets et des modèles de gradient au texte

Cette astuce rapide démontre l'ajout simple d'effets et de modèles de gradient au texte de la page Web. Ceci est réalisé en rendant le texte transparent, en appliquant une décoration d'arrière-plan en utilisant background-image, et en coupant précisément cette décoration aux caractères de texte avec background-clip.

Texte transparent et background-clip

L'effet commence par définir la couleur du texte à transparent. Pour un titre <h1></h1>, ce serait:

h1 {
  color: transparent;
}

Cela seul rend le texte invisible. La prochaine étape cruciale est background-clip: text, qui restreint tout arrière-plan aux caractères de texte, l'empêchant de remplir la boîte de l'élément entier:

h1 {
  color: transparent;
  background-clip: text;
}

Maintenant, les effets de fond seront précisément coupés au texte.

Application des gradients de fond

appliquons un dégradé à notre ruban:

h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
}

Cela crée un gradient de gauche à droite à travers le cap. De nombreuses variations sont possibles, modifiant les couleurs, direction et créant des gradients à motifs.

pour un motif rayé:

h1 {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
}

Des modèles et un style plus complexes avec text-stroke sont également réalisables.

en utilisant des images d'arrière-plan

Au-delà des gradients, background-image peut appliquer des images directement au texte. Utilisation d'une image de motif répétitif (comme celle ci-dessous):

Le CSS serait:

h1 {
  color: transparent;
  background-clip: text;
  background-image: url(pattern.jpg);
  background-size: contain;
}

background-size: contain assure une mise à l'échelle d'image appropriée dans le texte. D'autres améliorations peuvent être réalisées avec filter: drop-shadow().

background-image vs background raccourci

Alors que les deux fonctionnent, l'utilisation du raccourci background nécessite de la placer avant background-clip pour éviter que background-clip soit réinitialisé à sa valeur par défaut.

Prise en charge et accessibilité du navigateur

Bien que largement pris en charge, les préfixes des fournisseurs (-webkit-background-clip) peuvent être nécessaires pour les navigateurs plus âgés. Pour l'accessibilité, envisagez d'utiliser @supports pour fournir des styles de secours pour les navigateurs manquant de support background-clip:

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 {
    /* styles here */
  }
}

N'oubliez pas que l'utilisation excessive de ces effets peut entraver la lisibilité. Utilisez-les avec parcimonie et pensivement.

Conclusion

Ces techniques offrent des améliorations de texte subtiles mais efficaces. Utilisez-les judicieusement pour ajouter un intérêt visuel sans sacrifier la lisibilité.

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!