Box-shadow yapısını css3 gelmeden öncede bir kaç div ve pozisyon ayarı yaparak yada div için background görseli atayarak bu sorunu çözmek mümkündü. Artık günümüzde Css3 ile eklenecek bir kaç satır kod ile kutulara bu özelliği atamak son derece kolay ve kullanışlı.
box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
Box Shadow yapısı da 4 kısımdan oluşmaktadır;
1. değer:
Yatay eksen de ki mesafe için kullanılır pozitif ve negatif değer alabilir. +5px, -5px gibi
2. değer:
Dikey eksen eksen de ki mesafe için kullanılır pozitif ve negatif değer alabilir. +5px, -5px gibi
3. değer:
Bulanıklık (blur) gölgemizin sert yada yumuşak olmasını ayarladığımız kısımdır 0 çok keskin bir görüntü iken 7px daha soft bir görüntü elde etmemizi sağlar.
4. değer:
Son değerimiz gölge rengi #000 kullanıla bildiği gibi rgba olarakta kullanım uygulaya biliriz rgba kullanımında ilk üç değer R-G-B son değer ise Opacity yani şeffaflığı ayarlamak çin kullanılır.
Farklı tarayıcılar için farklı kod şablonları uygulamak gerekmektir.
box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
---------
Box-shadow inset (kutu içi gögle verme)
box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 5px 7px rgba(0,0,0,0.5);
Umarım beğenmişsinidir arkadaşlar.
KAYNAK: http://minimalcoding.net/blog/css-box-shadow-ile-kutulara-golge-vermek/
