CSS ile Bir Resme Gölge (Dropshadow) Eklemek

Bu dersimizde yapacağımız şey, web sitenizde yer alan her resme basit ve etkili bir yol kullanarak gölge (dropshadow) eklemek olacaktır.

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: BU YAZININ İÇERİĞİ GÜNCEL DEĞİLDİR. Artık box-shadow özelliği ile her şeye gölge verilebiliyor.

Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

merhabalar ; sayfa içi stil kullanımı ile ilgili bilgi alabilirmiyim?. mesela ssayfa içi stille tablo nasıl olusturulur.<head></head> tagları arasına stil kodlarını, gözükmesini istediklerimizde <body></body> arasınamı yazacagız.yada uygulamalı bir örnek verebilirmisiniz.tesekkürler.
Çok Teşekkürler:)
bende <a title="Hamer Web Tasarım" href="http://www.hamerwebtasarim.com">css </a> ile yapıcan sanmıştım

Yukarı Git