Jak połączyć CSS text-shadow i "background-image: -webkit-gradient"

Question

Próbuję uzyskać efekt gradientu i cienia tekstu w przeglądarce Chrome/Safari za pomocą CSS text-shadow i kombinacji text-shadow i background-image: -webkit-gradient, patrz przykład blw. Mogę tylko uczynić jednym z efektów zastosowania (jeśli dodać cień gradient znika. Co robię źle?

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

Gradient „znika”, ponieważ text-shadow jest na poziomie powyżej tła.

1. tekstu (które jest przezroczyste)
2. cień
3. tła.

Możemy obejść kopiując tekst i umieścić go poniżej pierwotnej warstwy, następnie zastosować cień tam, 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

Ta odpowiedź jest podobna do odpowiedzi przez @KennyTM powyżej, z wyjątkiem jego odpowiedź ma cień zakodowany w CSS, który nie nadaje się do tekstu dynamicznego, takiego jak CMS. Ponadto, jego metoda wymaga oddzielnego identyfikatora dla każdej instancji, co byłoby bardzo męczące, jeśli planujesz dużo skorzystać z tego efektu. Poniższy przykład wykorzystuje zamiast tego klasę i umożliwia tekst dynamiczny.

Spróbuj tego:

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 */ 
} 

A potem w kodzie HTML:

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

Wystarczy upewnić się, że tekst w <div> dopasowuje tekst w atrybucie title.

Z jakiegoś dodatkowego formatowania (użyłem Helvetica Neue Ultralight i ciemne tło), można uzyskać efekt coś takiego: http://cl.ly/image/2C0k0I3W271D

Answer 3

bez dodatkowych elementów znaczników HTML lub pseudo można osiągnąć ten efekt za pomocą filtra właściwość i funkcja drop-shadow. Ta metoda działa również w przypadku obrazu tła w porównaniu do gradientu.

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); 
} 

Fiddle: https://jsfiddle.net/eywda89g/