28172 sujets

CSS et mise en forme, CSS3

Gradient sur texte ?

Hello

je cherche à appliquer un gradient sur un texte, mais je n'ai pas l'impression que ca soit possible. J'ai cherché et ca m'étonne de n'avoir rien trouvé la dessus à part un lien sur developpez ( http://cssglobe.developpez.com/tutoriels/css/degrade-texte/fichiers/index.html )

ca marche pas mal jusqu'au moment ou mon background est trop texturé pour pouvoir appliquer un png transparent ( il est donc visible en dehors des carateres du titres )

est ce que quelqu'un à deja rencontré ce probleme ? ou est ce tout bonnement impossible ( pour le moment ahahah )

merci d'avance !
Bonjour,

Je ne m'étais jamais penché sur ce sujet auparavant mais votre solution, malgré ses grandes limitations, semble être la meilleure s'il faut vraiment parvenir à gérer le dégradé en CSS.

Une autre technique, absolument pas compatible puisqu'elle ne fonctionne que sur les navigateurs Webkit (à savoir Chrome et Safari), consiste à utiliser les déclarations :
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

On ne dépend plus de la couleur d'arrière-plan puisque le fond a été écrêté selon le texte.

Source : cette belle expérimentation de Trent Walton, à visionner sous Chrome ou Safari bien entendu ! Smiley langue
jeremy-p a écrit :

Source : cette belle expérimentation de Trent Walton, à visionner sous Chrome ou Safari bien entendu ! Smiley langue


Un peu plus simple et sans image, mais hélas, toujours que pour Webkit :


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset=utf-8">
  <title>Dégradé sur du text</title>
  <style>
  h1 {
    background: -webkit-linear-gradient(top, rgb(29,38,92) , rgb(27,209,209) 100%);
    color: transparent;
    -webkit-background-clip: text;
  }
  </style>
</head>
<body>
  <h1>Mon texte...</h1>
</body>
</html>

Modifié par jb_gfx (22 May 2012 - 18:27)
merci à vous ! mais effectivement, j'avais deja mis en place la solution webkit mais je trouve que etant un element du design assez important, j'aurais voulu éviter de devoir utiliser une solution si propriétaire ! tant pis, firefox & compagnie, ca sera noir !

bonne journée
non mais c'est une bonne idée.

je vais chercher ca, si je trouve je partage !
merci en tout cas
Sujet clos
Aller à