box-shadow özelliği ile oluşturduğumuz resim , kutu gibi nesnelere gölge verebiliriz. Tarayıcalarda farklı türde çalışır.
Opera ve Internet Explorer 9+ için
.gölge { box-shadow: 5px 5px 5px #000; }
Chrome ve Safari için
.gölge { -webkit-box-shadow: 5px 5px 5px #000; }
Firefox için
.gölge { -moz-box-shadow: 5px 5px 5px #000; }
Explorer için
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=155, Color= #000000 )";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=155, Color= #000000 );
box-shadow: 5px 5px 8px #555;
box-shadow: sol sağ | Yukarı Alt | Gölge Derinliği | renk ;
şeklinde kullanılır.
<style>
.golge{
border:1px solid #009;
width:360px;
height:30px;
color:#003;
text-align:center;
line-height:30px;
padding-left:30px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
background-color:#096;
}
</style>
<div class="golge">Boz-shadow (GÖLGE) ÖZELLİĞİ </div>