CSS ile Bir Resme Gölge (Dropshadow) Eklemek

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.

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.
  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
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