CSS 3 Teknikleri 2 -> Gölge Efekti Vermek (Box Shadow)

Css 3 ile gelen yeni özelliklerden birisi olan shadow tekniğiyle , kutu modellerimize gölge uygulayabiliyoruz.

Bir diğer derste , oval köşeli box modelleri oluşturmayı görmüştük sıra geldi gölge efekti uygulamaya .

Destekleyen Browser Model Serisi

[*] Firefox 3.5 +
[*] Google Chrome 4.0 +
[*] Safari 4.0 +
[*] Opera 10 .5 +
[*] Malesef IE desteklemiyor , yeni versiyonu ile destekleyecektir.

Kullanım Örneği ve açıklamasına geçiş yapıyoruz.


-webkit-box-shadow: 1px 1px 2px #000000; /*  1px Yatayda , 1px dikeyde 2px gölge bulanıklaştırma etkisi ve #000000 renk değeri ataması */

-moz-box-shadow: 1px 1px 2px #000000; /* Webkit ile aynı özellikleri taşımakta */

box-shadow: 1px 1px 2px #000000;



Aslında arkadaşlar dikkat ettiyseniz bir işlemi 3 ayrı fonksiyon ile yapmaktayız , çünkü web browserler için yararlı olacaktır.

İyi günler sağlıcakla kalın bir sonraki teknikte görüşmek üzere.
  • Etiketler;
Arda Kazancı
Makul fiyatlara proje fikirleriniz için benimle iletişime geçebilirsiniz. - Web , Mobil
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git