Css web sayfası yapanların vazgeçilmez yardımcısı.İki satır kod ile bir sürü işlem yapabiliriz.İşte yazıya gölge verme özelliği de
CSS3 ile gelen ve çoğu sitede kullanılan yeni bir özellik.
Yazıya
gölge verme özelliğini kullamak için herhangi bir
css seçicisine text-shadow tanımlamasını yapmanız gerekir. Tanımlama aşağıdaki gibi yapılır.
text-shadow özelliği
html etiketlerinden herhangi bir yazı etiketine
gölge vermek için kullanılır.4 adet parametresi vardır.Bunlardan
ilki yatay olarak yani x ekseninde kaç piksel gölge verileceğini,
ikincisi dikey olarak kaç piksel gölge verileceğini,
üçüncü olanı bulanıklık değerini ,
sondaki ise gölge rengini belirtir.
Örnekler:
Vintage / Retro yazı efekti
CSS kodu:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Neon yazı efekti
CSS kodu:
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de,
0 0 150px #ff00de;
İnset yazı efekti
CSS kodu:
text-shadow: 0px 2px 3px #666;
Anaglyphic yazı efekti
CSS kodu:
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
Ateş yazı efekti
CSS kodu:
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
-20px -20px 40px #ffae34, 20px -40px 50px #ec760c,
-20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
Umarım faydalı olur...
Yazının orjinali