gradient de texte en css avec le texte de l'ombre

Est-il de toute façon à utiliser cette méthode de gradient et aussi avoir une ombre portée sur le texte.
http://css-tricks.com/snippets/css/gradient-text/

Lorsque j'ai mis mon dropshadow comme 

text-shadow: 1px 1px 2px #000;

Puis il bousille mon dégradé de texte parce que le fond est transparent.
Personne ne sait d'une solution à ce pour les navigateurs webkit.

InformationsquelleAutor Chapsterj | 2013-02-25
  1. 10

    mis à jour

    Trouvé une solution pour vous,
    seul problème est qu'il nécessite le code html afin d'avoir un attribut.

    http://jsfiddle.net/2GgqR/2/

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

h1:after {
  background: none;
  content: attr(data-text);
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
  text-shadow: 1px 1px 2px #000;
}

    original est ici 🙂
    http://viget.com/inspire/background-clip-text-shadow-gradients

    mise à jour du lien de commentaires
    http://jsfiddle.net/2GgqR/5/

    ici j'ai ajouté de la couleur d'arrière-plan de l'arrière-plan de l' :après

    h1:after {
  background: #f3f3ee;
}

.background{
    background-color: #f3f3ee;
    position: relative;
    z-index: 1;
}
    • Salut Karl cela fonctionne très bien jusqu'à ce que vous essayez d'avoir un div wrapper autour de ce que j'ai besoin d'avoir une image de fond derrière tout ça. voir mon jour de violon avec juste une couleur de fond de l'emballage autour de lui. jsfiddle.net/2GgqR/3
    • essayez ceci 😉 jsfiddle.net/2GgqR/5
    InformationsquelleAutor Karl Doyle
  2. 5

    Vous pouvez combiner avec filter: drop-shadow propriété CSS qui va faire l'affaire.

    CSS:

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

    HTML:

    <h1>Example</h1>

    InformationsquelleAutor Francisco Romero
  3. 0

    J'ai peut-être vraiment downvoted pour cela, mais je crois que la seule façon de le faire, serait d'avoir un double de l'élément placé derrière. C'est juste une idée.

    • Je veux dire que je pouvais utiliser le Pseudo:après et de contenu d'ensemble:"bla bla bla texte" mais le problème, c'est que le texte est dymnamic donc je ne peux pas définir le contenu. Est-il un moyen de définir le contenu d'une balise inline
    • Comment le contenu est-il mis à jour? Ce que je voulais était de placer l'élément en plus de son double, avec une position absolue, et d'imiter le résultat. Si votre texte est mis à jour avec Javascript, vous pouvez exécuter le code pour les deux éléments. Bien que, je ne ferai que dans des cas extrêmes, où je n'ai pas l'intention de maintenir le code plus tard 🙂
    InformationsquelleAutor mavrosxristoforos