Beşiktaş Haber Portalı

CSS3’ün getirmiş olduğu yeniliklerden bir tanesi de gölgelendirme efektleridir. Böylece metinlerimize ya da kutularımıza kolayca gölge ekleyebileceğiz.

Metne Gölge Ekleme

İstediğimiz metne, başlığa, paragrafa istediğimiz renkte istediğimiz ebatlarda gölge atayabiliriz. Bunu da sadece text-shadow kodu ile yapacağız. Hemen örnek kodumuz üzerinde gösterelim:

1
2
3
4
5

p{
	font-family:Arial, Helvetica, sans-serif;
	color:#ea9800;
	text-shadow: 4px 4px 7px #999;
}

Buradaki ilk iki kodu anlatmayı atlıyorum. Çükü bizim konumuzu ilgilendiren asıl kod kısmı son kısımdır. Text-shadow kodunda 4 değer görüyoruz. Bunlardan ilk 4px.lik değer gölgemizin metnin sağından uzaklığını belirler, ikinci değer olan 4px.lik değer ise gölgemizin metnin aşağısından uzaklığını belirler, üçüncü değerimiz (2px.lik değer) ise gölgemizin yoğunluğunu, bulanıklılık değerini belirler. Son değerimiz ise gölgemizin rengidir. Aşağıda bu kodların örnek görünümü de bulunmaktadır. Bu örneği görebilmeniz için sitemizi Firefox 3, Opera ve Safari ile görüntülemeniz gerekmektedir.

Bu metindeki gölgeyi görebilmeniz için sayfayı Opera, Firefox 3 ya da Safari ile görüntülemeniz gerekmektedir.

Kutulara Gölge Ekleme

Güzel yeniliklerden biri de kutularımıza gölge eklemek için eklenen box-shadow kodudur. Kullanımı text-shadow koduyla aynıdır. O yüzden fazla değinmeyeceğim. Hemen örnek kodumuza geçelim:

1
2
3
4
5
6
7
8

#kutu{
height:100px; 
width:550px; 
border:1px solid #000;
box-shadow: 4px 4px 4px #999; 
-moz-box-shadow: 4px 4px 4px #999; 
-webkit-box-shadow: 4px 4px 4px #999;
}

Bu kodlarda tek fark olarak “–moz” ve “–webkit” ile başlayan kodlar olduğunu fark etmişsiniz. Bu kodlardan –moz olanı Firefox tarayıcısıyla, -webkit olanı ise Safari tarayıcısıyla gölgeleri görmemizi sağlar. Aşağıdaki örnek uygulamayı görebilmeniz için sayfamızı Firefox ya da Safari ile görüntülemeniz gerekmektedir.

Yorumlar

1 Yorum

1. mexxanit diyor ki:
   

   25 Ekim 2009, 01:03

   Eline sağlık ta. Peki ya gölgeyi soldan vermek istersek yani ışığı sağdan