Comment utiliser un dégradé comme couleur de police dans CSS?

Comment puis-je utiliser un dégradé de la couleur de police en CSS, sans l'aide d'images? Je veux soutenir Firefox.

J'ai utilisé ce code, mais il n'est pas pris en charge dans Firefox:

<div class="text1"> Gradient Text</div>

.text1
 {
  font-size: 40px;
  background: -webkit-linear-gradient(#0F3, #F00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }

source d'informationauteur Piyush Marvaniya

  1. 17

    vous pouvez utiliser plusieurs travées qui sont positionnés sur le dessus les uns des autres et attribuer une hauteur différente et la couleur de chacun d'eux. C'est vraiment moche de codage sage, mais il fonctionne.
    http://jsfiddle.net/7yBNv/

    De la sélection du texte au comportement un peu étrange, mais pas trop mauvais. Et la copie des copies de plusieurs entrées (en fonction du calque est sélectionné) Donc je dirais que vous êtes mieux de la résolution de ce avec svg.

    (J'ai eu la réponse à partir d'ici ,vérifier pour plus de détails: http://www.bagnall.co.uk/gradient_text.asp)

    html:

    <h1 class="Gradient">Sample Gradient Text (h1)
   <span class="G1" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G2" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G3" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G4" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G5" aria-hidden="true">Sample Gradient Text (h1)</span>
</h1>

    css:

    .Gradient{
    position: relative;
    overflow: hidden;
    height: 28px;
}
.Gradient,
.Gradient .G1,
.Gradient .G2,
.Gradient .G3,
.Gradient .G4,
.Gradient .G5{
    height: 28px;
    position: absolute;
    margin: 0;
    top: 0px;
    left: 0px;
    color: #4a778b;
    font-family: century gothic,helvetica,arial;
    font-size: 23px;
    font-weight: normal;
    overflow: hidden;
}
.Gradient{
    position: relative;
}
.Gradient .G5{
    height: 10px;
    color: #81a4b4;
    z-index: 6;
}
.Gradient .G4{
    height: 13px;
    color: #789eae;
    z-index: 5;
}
.Gradient .G3{
    height: 16px;
    color: #6f96a6;
    z-index: 4;
}
.Gradient .G2{
    height: 19px;
    color: #618a9c;
    z-index: 3;
}
.Gradient .G1{
    height: 22px;
    color: #547f92;
    z-index: 2;
}
  2. 18

    Assistance De Firefox:

    Malheureusement, seuls les navigateurs WebKit mise en œuvre de texte-remplir de la couleur.

    Il n'existe aucune solution de contournement pour Mozilla encore.

    Awesome post par Lea Verou:

    http://lea.verou.me/2012/05/text-masking-the-standards-way/

    Démo pour WebKit:

    http://jsfiddle.net/ondrek/trr67/

    Code de HTML et CSS:

    <h1>hello</h1>

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

    Comment générer dégradé:

    Vous pouvez également générer propre gradient

    http://www.colorzilla.com/gradient-editor/

    Dupliquer à une question sur:

    CSS3 Gradient ne fonctionne pas sous Firefox

  3. 4
    .text1
 {
  font-size: 40px;
  background: -webkit-linear-gradient(#0F3, #F00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
background: -moz-linear-gradient(#0F3, #F00);
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
 }

    vous devez spécifier le fournisseur préfixe pour firefox

  4. -3

    Vous pouvez utiliser cette générateur textgradient.com faire CSS gradient de textes.