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;
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;