1.484 kez okundu

Css’de box shadow kullanımı

10 10 1.484 kez okundu incelendi

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);
*/

http://resim.sanalkurs.net/uploads/Resim001_5.jpg
Ö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);
*/

http://resim.sanalkurs.net/uploads/Resim002_2.jpg
Ö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.

http://resim.sanalkurs.net/uploads/Resim003_2.jpg
Ö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.

http://resim.sanalkurs.net/uploads/Resim004_2.jpg
Ö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.

Paylaş !

1 Yorum yapıldı “Css’de box shadow kullanımı”

  1. ahmet dedi ki:

    Paylaşımların devamını ekliyoruz. Arkadaşlara da tavsiye ediyorum sitenizi.

Yorum yap

Önceki yazıyı okuyun:
CSS ile kaydırma çubuğu rengi değiştirme

CSS ile kaydırma çubuğu rengi değiştirme

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter