Cómo combino la sombra de texto de CSS y "background-image: -webkit-gradient"

Question

Estoy tratando de lograr un efecto de sombreado degradado + texto en Chrome/Safari usando CSS text-shadow y una combinación de text-shadow y background-image: -webkit-gradient, ver ejemplo blw. Sólo puedo hacer que uno de los efectos se aplican (si añado la sombra del gradiente desaparece. ¿Qué estoy haciendo mal?

h1 { 
font-size: 100px; 
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
text-shadow: 0 1px 1px #fff; 
} 

Answer 1

El gradiente "desaparece" debido a que el text-shadow está en un nivel por encima del fondo.

1. El texto (que es transparente)
2. La sombra
3. el fondo.

Podemos evitar esto copiando el texto y ponerlo debajo de la capa original, a continuación, aplicar la sombra allí, for example:

h1 { 
    position: relative; 
    font-size: 100px; 
    text-align: center; 
    } 

    h1 div { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    position: absolute; 
    width: 100%; 
} 
    h1:after { 
    text-shadow: 10px 10px 11px #fff; 
    color: transparent; 
    } 

    #hello:after { 
     content: 'Hello World'; 
    } 

<h1 id="hello"><div>Hello World</div></h1> 

Answer 2

Esta respuesta es similar a la respuesta por @KennyTM anterior, excepto su respuesta tiene la sombra codificada en el CSS, que no es adecuada para texto dinámico, como en un CMS. Además, su método requiere una identificación separada para cada instancia, lo que sería muy tedioso si planea usar mucho este efecto. El siguiente ejemplo utiliza una clase y permite texto dinámico.

Prueba esto:

h1 { 
    position: relative; 
    font-size: 100px; 
    text-align: center; 
} 

h1 div { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    position: absolute; 
    width: 100%; 
} 
h1:after { 
    text-shadow: 2px 2px 2px #000000; 
    color: transparent; 
} 

.gradient-shadow:after { 
    content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */ 
} 

Y luego en el código HTML:

<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1> 

Sólo asegúrese de que el texto en el <div> coincide con el texto en el atributo title.

Con un nuevo formato (utilicé Helvetica Neue ultraligero y un fondo oscuro), se puede obtener un efecto algo como esto: http://cl.ly/image/2C0k0I3W271D

Answer 3

Sin elementos de marcado HTML o seudo adicionales que usted puede conseguir este efecto utilizando el filtro propiedad y función drop-shadow. Este método también funciona con una imagen de fondo vs gradiente.

h1 { 
    font:54px 'Open Sans', 'Helvetica', Arial, sans-serif; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#484848)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    -webkit-filter: drop-shadow(2px 2px #333); 
      filter: drop-shadow(2px 2px #333); 
} 

violín: https://jsfiddle.net/eywda89g/