antalya web tasarım

Css’de box shadow kullanımı

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.