Biraz temel CSS bilgisine sahipseniz bu ders işinize çok yarayacak. Yapacağımız iş web sitenizde yer alan her resme basit ve etkili bir yol kullanarak gölge (dropshadow) eklemek olacaktır. Bunun için temel CSS bilgisi ve Photoshop'ta oluşturacağımız bir gölge (dropshadow) resmi gerekiyor.
Başlamak için Photoshop'ta transparan bir .gif oluşturacağız. 80x80 px ebatında bir dosya açın, arka planın transparan olmasına dikkat edin. Sonra sol üst köşeden itibaren aşağıdaki gibi beyaz dolgu yapın.
Aşağıdaki ayarları uygulayın:
Ve resmi web için kaydet (kısa yolu: ctrl+alt+shift+s) yapın ve "transparent gif" olarak "dropshadow.gif" ismi ile kaydedin.
Şimdi size 75x75 px ebatında bir resim lazım. Ben aşağıdaki resmi kullanıyorum.
Şimdi bundan sonrası CSS'nin işi. İsmini 'Dropshadow' olarak vererek CSS kodunu aşağıdaki gibi yazın.
#dropshadow{
background: url('dropshadow.gif');
width: 80px;
height: 80px;
}
Bu CSS'yi ister harici bir CSS olarak, ister sayfa içi CSS olarak yerleştirebilirsiniz. Bu size kalmış.
Şimdiki iş, bunu HTML kodları arasına arasına aşağıdaki gibi tanıtmak olacaktır.
<div id="dropshadow"><img src="head.gif"></div>
Web sayfanızı önizleme yaptığınızda az önceki resminizin gölgeli olduğunu göreceksiniz. Bu yöntemle sayfanızda yer alan resimlerinize kolaylıkla gölge (dropshadow) efekti eklemeniz mümkün. Tek dikkat edeceğiniz konu, boyutların aynı olması.
Not: Jordan Garn'ın yazısından faydalanılmıştır.
