CSS metin gölgesini ve "background-image: -webkit-gradyan" ı nasıl birleştiririm?

Question

CSS metin gölgesi ve metin gölgesi kombinasyonu kullanarak Chrome/Safari'de degrade + metin gölge efekti elde etmeye çalışıyorum arkaplan resmi: -webkit-gradyan, bkz. örnek blw. Sadece etkilerinden biri ben degrade kaybolur gölge eklerseniz. Nerede yanlış yapıyorum (uygulamak yapabilir?

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

text-shadow arka üstünde bir seviyede olduğu için degrade "kaybolur".

(saydamdır)

1. metin
2. gölge
3. arka plan.

Biz metni kopyalayarak bu geçici bir çözüm ve özgün tabakasının altına koyabilirsiniz, o zaman, orada for example gölge uygulayın:

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

Bu cevap haricinde yukarıda @KennyTM tarafından cevap benzerdir Onun cevabı, CMS'de olduğu gibi, CMS'de olduğu gibi dinamik bir metin için uygun olmayan gölgeye sahip gölgeye sahiptir. Ayrıca, yöntemi her bir durum için ayrı bir kimlik gerektirir, bu etkiyi çok kullanmayı düşünüyorsanız çok sıkıcı olur. Aşağıdaki örnek, bunun yerine bir sınıf kullanır ve dinamik metne izin verir. HTML'nize sonra

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

Ve:

bu deneyin

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

Sadece <div> metin title Özellikte metinle eşleşen emin olun. http://cl.ly/image/2C0k0I3W271D

Answer 3

hiçbir ekstra HTML biçimlendirme veya sözde elemanları ile filtre kullanarak bu etkiyi elde edebilirsiniz: bazı ek biçimlendirme ile

, böyle bir etki şey elde edebilirsiniz (ı Helvetica Neue Ultralight ve karanlık bir arka plan kullanılır) özellik ve açılan gölge işlevi. Bu yöntem aynı zamanda bir arka plan görüntüsü ve degrade ile de çalışır.

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/