web-dev-qa-db-fra.com

Dégradé de couleur de texte pur CSS3 - Est-ce possible?

Existe-t-il un moyen de créer un dégradé de couleur de texte pur CSS3 entre navigateurs?

Donc, pas de png. Pas de "webkit" uniquement.

EDIT: Pour être plus précis: c'est CSS3 seulement, et c'est pour le texte, pas les dégradés de boîte.

EDIT: J'ai trouvé cette solution, mais c'est seulement pour le webkit.

colorscss3gradient
27
Kriem

Il n'y a pas de moyen multi-navigateur pour le faire en dehors du webkit car seul le webkit a actuellement background-clip: text , et cette extension à background-clip n'est pas sur la voie des standards (pour autant que je sache). Si vous souhaitez assouplir votre exigence CSS3, vous pouvez obtenir le même effet avec plusieurs navigateurs avec Canvas (ou SVG), mais vous ne parlez que de navigateurs compatibles HTML5.

13
Michael Mullany

Il n'y a pas de méthode CSS "pure" pour le moment, mais il existe une méthode utilisant CSS et une certaine duplication de contenu. Voir ma solution de texte dégradé css côté serveur ici , qui ne nécessite pas de JavaScript ou d'arrière-plan clair. Vous pouvez également faire cela côté client en utilisant JavaScript, voir ce que Dragonlabs a fait ici .

5
Gus T Butt

Comme je l'ai déjà souligné en tant que commentaire dans la réponse de zzzzBov, il existe un moyen d'obtenir un dégradé de texte en CSS3 uniquement.

Si vous prenez un peu plus loin la solution PNG , vous pouvez faire la même astuce avec les dégradés CSS3.

Bien sûr, cela ne fonctionne que pour le texte sur une couleur d'arrière-plan uniforme.

0
enyo

La meilleure solution pour le moment est d'utiliser une couleur unie comme solution de repli non-webkit, puis d'utiliser la technique suivante (nécessite le webkit):

h1 {
  color: $333;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<h1>Example</h1>
0
sean2078