CSS3, artık web sayfalarında kullandığımız yazılara  da (text) gölge verebilme imkanı veriyor.Bunu text-shadow özelliğini kullanarak yapıyoruz. Yine bu özelliğe atadığımız değerler bir önceki dersteki kenar gölgelendirmedeki değerler ile aynı mantıkta çalışıyor.

Internet Explorer’ın hiç bir sürümünde çalışmıyor. Safari 3+, Opera 9.5, Firefox 3.1, Konqueror ve iCab tarayıcılarında, yazılan versiyonlar dahil, üstündeki versiyonlarda çalışıyor. Şimdi bir örnek yapalım.

HTML yapımda iki paragraf kullandım ve bunlara class atadım. Çünkü iki farklı yöne gölgelendirme göstereceğim.

HTML yapı

<p class="ustgolge">Bu yazının altında gölgelendirme var.</p>
<p class="altgolge">Bu yazının altında gölgelendirme var.</p>

Atadığım class’lara text-shadow stilini atayalım.

CSS Stil Yapısı

.ustgolge{
text-shadow: -2px -2px 4px #000;
}
.altgolge{
text-shadow: 2px 2px 2px #000;
}

Yukarıdaki resimden de görüldüğü üzere iki farklı yöne gölgelendirme uyguladım. Resmin uygulamasını buradan görebilirsiniz (Yukarıda yazdığım tarayıcılarda görünür. Diğerlerinde görünmez.).

Şimdi bir örnek daha verelim. Bu sefer daha kapsamlı bir örnek olsun ki özelliğin tam da ne işe yaradığını daha iyi görelim.

HTML yapı

<p>Bu yazının altında gölgelendirme var.</p>

Yukarıdaki HTML yapımıza gölgelendirme ekleyelim.

CSS3 yazı gölgelendirme

p{
background: black;
color: white;
font-size: 30px;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow: 0 0 4px orange, 0 -5px 5px #ffd800, 2px -10px 6px #ff4333, -2px -15px 11px #ff7800, 2px -25px 18px #ff0000;
}

Yukarıdaki resimden de görüleceği üzere bir alev efekti vermeye çalıştım. Kısmen de olsa başardım. Güzel olan artık bunları CSS ile yapabiliyor olmamız. Resmin uygulamasını buradan görebilirsiniz (Yukarıda yazdığım tarayıcılarda görünür. Diğerlerinde görünmez.).

Konuyu kısaca anlatmaya çalıştım. Umarım yararlı olur.. Kaynak dosyayı buradan indirebilirsiniz. Teşekkürler..