Merhabalar,

Bu dersimde css ile resimlere gölge efekti vermeyi anlatacağım. Bir çok sitede örneğini görmüş olabilirsiniz. Attaki adımları izlerseniz söylemek istediğimi daha da iyi anlayacaksınızdır.

Not : Golge.gif | Golge.png dosyalarını indirmeyi unutmayınız.

İlk önce gölgemizin kodunu yazarak başlayalım..

background: url(golge.gif) no-repeat bottom right;

Ardından aşağıdaki kodlarla gölgemizin boyunu ayarlayalım. Boyutunu ayarlamak sizlerin hayal gücüne kalmış.

margin: -6px 6px 6px -6px;

Ancak unutmamamız gereken bir nokta da bu yazdığımız gölge kodunun bazı tarayıcılarda çalışmayacağıdır. Bunun için alttaki koduda ekliyoruz. “!important”

background: url(golge.png) no-repeat right bottom !important;

Son olarak aşağıdaki değişiklikleri yapıyoruz ve CSS kodlamamızı bitiriyoruz.

.resim-golgesi {
float:left;
background: url(golge.png) no-repeat bottom right !important;
background: url(golge.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.resim-golgesi img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

HTML kodumuzda alttaki gibi olacaktır.

<div class="resim-golgesi">
<img src="resminiz.jpg" alt="Resime Gölge Efekti"/>
</div>

Çalışır Bir Örneği Görmek İçin Tıkla

Kaynak