PDA

Orijinalini görmek için tıklayınız : css box shadow (kutu gölgelendirme)



nizamgl
03-01-2012, 21:36
css3 ile gelen bir özellik te kutulara çok basit bir şekilde gölge etkisi vermek
bunu kutunun sadece bir kenarına verebileceğimiz gibi tüm kenarlarına da verebiliriz
kullanımına gelirsek
html olarak

<div id="kutu"></div>

şeklinde bir tag ımız var bununu css tanımlaması ise tüm popüler tarayıcılar için ve ie9 için
sağ ve alt kenara gölge verir


#kutu {
width:100px;
height:200px;
background-color:#ffffff;
box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
}

tanımlarsak : 3px 3px 4px #000 ilk değer: alt kenar için ikinci değer: sağ kenar için üçüncü değer : gölge miktarını belirler

ie7 ve ie8 ise bu özelliği desteklememekte sadece iki kenara filtre kullanarak benzer bir etki verebilirsiniz ama tüm kenarlara kullanamazsınız


/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength= 4, Direction=135, Color='#000')";
/* IE 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength= 4, Direction=135, Color='#000');


alttaki gibi bir kullanımla tüm kenarlara gölge etkisini verebilirsiniz


-moz-box-shadow: 0 0 3px 3px #000;
-webkit-box-shadow: 0 0 3px 3px #000;
box-shadow: 0 0 3px 3px #000;