CSS3 ile yazıya gölge efekti verme işlemi (text-shadow özelliği)

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.
CSS ile yazıya gölge verme işlemi (text-shadow özelliği)

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


CSS3:Vintage / Retro yazı efekti
CSS kodu:
       text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Neon yazı efekti


CSS3: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


CSS3:İnset yazı efekti
CSS kodu:
       text-shadow: 0px 2px 3px #666;

Anaglyphic yazı efekti


CSS3:Anaglyphic yazı efekti
CSS kodu:
       text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

Ateş yazı efekti


CSS3: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

Popüler Yayınlar