Gradient de couleur du texte CSS3 pur-est-ce possible?
y a-t-il un moyen de créer un gradient de couleur de texte CSS3 pur, à l'aide d'un navigateur croisé?
donc, pas de png. Pas de webkit seulement.
EDIT: pour être plus précis: c'est CSS3 seulement, et c'est pour le texte, pas pour les gradients de boîte.
EDIT: j'ai trouvé cette solution, mais c'est seulement pour webkit.
4 réponses
il n'y a pas de moyen de faire cela en dehors de webkit car seul webkit a un background-clip: texte et cette extension background-clip n'est pas sur la voie des standards (pour autant que je sache). Si vous voulez assouplir votre exigence CSS3, vous pouvez accomplir le même effet cross-browser avec Canvas (ou SVG), mais alors vous parlez de navigateurs HTML5-capable seulement.
il n'y a pas de méthode CSS" pure " pour le moment, mais il y a une façon d'utiliser CSS et une certaine duplication du contenu. Voir mon côté serveur css gradient de texte solution ici, qui ne nécessite pas de JavaScript ou un fond simple. Vous pouvez également faire ce côté client en utilisant JavaScript, voir ce que Dragonlabs a fait ici.
comme je l'ai déjà souligné comme un commentaire dans la réponse de zzzzBov, il y a un moyen d'obtenir un gradient de texte dans CSS3 seulement.
si vous prenez le PNG solution un peu plus loin, vous pouvez faire le même truc avec les dégradés css3.
bien sûr, cela ne fonctionne que pour le texte qui est sur une couleur de fond uniforme.
la meilleure solution pour le moment est d'utiliser une couleur solide comme repli Non-webkit et ensuite d'utiliser la technique suivante (nécessite webkit ):
h1 {
color: 3;
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<h1>Example</h1>