Css'de box shadow kullanımı

Bu yazımızda Css'te box-shadow kullanımını inceleyeceğiz.

Merhaba Arkadaşlar,

Bu yazımda css'de box-shadow kullanımını göstereceğim. Daha önceden şu yazımızda text-shadow kullanımını göstermiştik. Baştan söyleyelim, bu özelliği Mozilla Firefox ve Safari dışındakiler desteklemiyor :( Bu tarayıcıların da eski sürümleri sorun çıkartabilir.

Peki ne yapacağız box-shadow ile?

Daha önceden resimlerle hazırladığımız gölgeli kutuları sadece css/html kullanarak oluşturacağız.

Şimdi gelelim asıl konumuza box-shadow kullanımına:

Bildiğiniz gibi CSS 3 le oval köşeler oluştururken farklı tarayıcılar için farklı kodlar yazıyorduk. Burada da tarayıcıya göre değişen bir kod yapısı var.

Temel Kullanım:


box-shadow:[x koordinatından uzaklık][y koordinatından uzaklık][color];

/*

Mozillada :-moz-box-shadow:(Gerekli Argümanlar);

Safaride  :-webkit-box-shadow:(Gerekli Argümanlar); 

*/




Örneği görmek için tıklayın.

[Blur-radius] ilaveli kullanım:


box-shadow:[x koordinatında uzaklık][y koordinatında uzaklık][Blur-radius][color];

/*

Mozilla da :-moz-box-shadow:(Gerekli Argümanlar);

Safaride  :-webkit-box-shadow:(Gerekli Argümanlar); 

*/




Örneği görmek için tıklayın.

Blur-radius ne işe yarar?
Blur-radius gölgenin bulanıklık yarıçapını ayarlar.

[Spread-radius] ilaveli kullanım:


box-shadow:[x koordinatında uzaklık][y koordinatında uzaklık][Blur-radius][Spread-radius][color];  

/*

Mozilla da :-moz-box-shadow:(Gerekli Argümanlar);

Safaride  :-webkit-box-shadow:(Gerekli Argümanlar); 

*/



Spread-radius işe yarar?

Spread-radius gölgenin bulanıklık yayılma yarıçapını ayarlar.


Örneği görmek için tıklayın.

inset ilaveli kullanım:


box-shadow:inset [x koordinatında uzaklık][y koordinatında uzaklık][Blur-radius][Spread-radius][color];

/*

Mozilla da :-moz-box-shadow:(Gerekli Argümanlar);

Safaride  :-webkit-box-shadow:(Gerekli Argümanlar); 

*/



inset ne işe yarar?

inset dışa doğru olan gölgeyi box'un içine doğru yöneltir.


Örneği görmek için tıklayın.

Genel olarak kullanım bu kadar. Gerisi size kalmış.

Not: Eğer örneklerde bir fark göremiyorsanız, tarayıcınız uygun değildir.

Kolay gelsin.
  • Etiketler;
Yorum Yaz

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

Yukarı Git