8 Ocak 2013 Salı

Css Text Shadow ( yazı gölge efekti )


 css3
Css ile yazı ya gölge efekti vermek ( css text shadow ) uygulamasını kısaca anlatmak istiyorum.

Css3 ile gelen özellliklerden biride Text shadow yani yazı gölge efekti dir.Site görünümünde doğru kullanıldığı zaman yazı ve başlıklarda  görsellik açısından oldukça güzel bir görünüm elde edebilirsiniz.


Kısaca  css text shadow kullanımını sizlerle paylasacagım aynı kodları kullanarak sizlerde css3 ile yazıya gölge efekti uygulayabilirsiniz.

ilk olarak css kodumuzu olusturuyoruz. Burada gördüğünüz üzere p etiketine text shadow niteliğini verdik , ve şimdi gelelim piksel değerlerine

.p {text-shadow: 3px 1px white; } 


 ilk pixel imiz yatay eksene gölge verir.
  • İkinci pixel imiz ise dikey eksene gölge efekti uygular.
  • Üçüncü değerimiz ise renk efektidir.Siyah bir yazı üstüne ben beyaz rengi tercih ettim siz isterseniz yazıyla veya rgb , hex kodları kullanarak istediğiniz gibi bir renk atayabilirsiniz.

Eğer blur efekti uygulamak istiyorsanız eğer o zaman da  3 cü bir pixel değeri girmeniz gerekir.Blur efekti ni kullanarak gölgeyi bulanıklaştırabilirsiniz. Sonuç aşağıdaki gibidir.

 
 
Burak Emek Blogspot
 
 
 *internet explorer desteği yoktur.

Hiç yorum yok:

Yorum Gönder

Not: Yalnızca bu blogun üyesi yorum gönderebilir.

//Luckyorange//