Bu dersimizde CSS ve Photoshop kullanarak Dropshadow yapmasını öğreneceğiz.

Adım 1:

İlk olarak Photoshop kısmını yapacağız.Photoshop'da 80*80 boyutunda arkaplanı saydam(transparent) bir sayfa açalım.Daha sonra da Marquee Tool ile aşağıdaki gibi beyaz bir dikdörtgen oluşturalım.



Adım 2:
Şimdi de çizdiğimiz dikdörgene Layer Styles ile Drop Shadow ekliyoruz ve dropshadow.gif olarak kaydediyoruz.





Adım 3:

Şimdi CSS stilini oluşturalım.

<style>
#dropshadow{
background: url('dropshadow.gif');
width: 80px;
height: 80px;
}  
</style>

Adım 4:
Şimdi de gölge ekliyeceğimiz resmi alıyoruz ve HTML kodunu ekliyoruz.

<div id="dropshadow"><img src="head.gif"></div>

Bu Dersin Çalışır Örneğini Görmek İçin Tıklayın...

Başka bir derste buluşmak üzere esen kalın...

Kaynak dosyayı indirmek için tıklayın