CSS3 implémente l'effet de texte dégradé

Cet article partage principalement avec vous CSS3 pour obtenir un effet de texte dégradé. Nous partageons principalement avec vous deux méthodes, en espérant vous aider.

1. Méthode 1 : Utiliser l'attribut mask-image

pour créer un effet de dégradé de texte

Le code HTML correspondant est le suivant suit :

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>

Le code CSS correspondant au HTML est le suivant :

.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    position: relative; 
}  
  
.text-gradient[data-text]::after {  
    content: attr(data-text);  
    color: green;  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}

Comme peut Comme le montre le code CSS, en plus de la "technologie de génération de contenu", l'effet est principalement obtenu en utilisant l'attribut mask-image, et le contenu est "dégradé sous le navigateur principal du webkit".

2. Méthode 2 : Implémentation sous background-clip + text-fill-color

Effet de dégradé de texte sous la méthode 2

Ici L'implémentation est plus simple que ce qui précède. Le code HTML est le suivant :

<h2 class="text-gradient">天赐美妞</h2>

Le code CSS correspondant au HTML est le suivant :

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};

La chose clé et utile dans le code CSS sont en fait les trois dernières lignes :

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Bien que cette méthode utilise relativement plus de propriétés CSS , la structure est simple, facile à contrôler, la sélection et le contrôle des couleurs sont plus précis et plus faciles à comprendre. Personnellement, je recommande d’utiliser la deuxième méthode.

3. Conclusion

Étant donné que les attributs text-fill-color et mask-image actuels semblent être pris en charge par les navigateurs principaux du kit Web, les deux pages de démonstration ne peuvent être utilisé dans L'effet de dégradé n'est visible que dans le navigateur Chrome ou le navigateur Safari. Couleur unie sous le navigateur Firefox, sans oublier sous IE.

Cependant, le dégradé de texte lui-même est une fonction décorative, donc basé sur le principe d'amélioration progressive, nous pouvons réellement l'utiliser avec audace dans des projets réels. Sans affecter les fonctions d'origine, quelques lignes de code CSS peuvent offrir une meilleure expérience visuelle sous le navigateur Chrome, de plus en plus populaire. Pourquoi pas ?

Recommandations associées :

implémentation js de l'obtention du code de dégradé de couleur

partage d'exemples de couleurs de dégradé de calcul javascript

Partage d'exemples d'entrée de dégradé linéaire CSS3

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!