CSS3 serimize devam ediyoruz. CSS3′teki farklılıklardan biri de kenar gölgelendirmesi verebiliyor olmamız. Yalnız, bu özellik Internet Explorer için henüz geçerli değil (ie8 dahil). Ayrıca Opera tarayıcısında da çalışmıyor (10.10 dahil). Bunların yanında Safari 3 ve Firefox 3.1 ve üzerindeki versiyonlarda çalışıyor. Pek yakında diğerleride CSS3′e uyumlu hale geleceklerdir diye tahmin ediyorum.

Neyse biz konumuza geçelim. Aşağıda çeşitli örneklerle olayı anlatmaya çalıştım.

HTML Yapı

<div id="kutu">
 İçerik buraya geliyor.
 </div>

CSS3 Kenar Gölgelendirme

#kutu {
width:20%;
margin: 30px 0;
-icab-box-shadow: 10px 10px 5px #888;/*iCab tarayıcı için*/
-khtml-box-shadow: 10px 10px 5px #888;/*Konqueror tarayıcı için*/
-moz-box-shadow: 10px 10px 5px #888;/*Firefox tarayıcı için*/
-webkit-box-shadow: 10px 10px 5px #888;/*Safari tarayıcı için*/
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
}

Yuakrıdaki örnekten de görüleceği üzere basit bir div yapısı kullandım. CSS’de ise stillerimi atadım. Stil özelliklerinde hangi tarayıcılar için hangi özelliklerin kullanıldığını da yanlarına yazdım. Yukarıdaki resimin uygulamasını, konuya girerken bahsettiğim tarayıcılar ile buradan görebilirsiniz. Diğer tarayıcılar ile göremezsiniz.

Burada box-shadow özelliğine verdiğim 10 px değerlerlerinden ilki padding ve margin’de olduğu gibi top(üst), ikincisi ise left(sol) kayma değerleridir.  Girdiğimiz değerler, eğer pozitif değerler ise gölge sağa ve aşağıya, negatif değerler de ise gölge kutunun soluna ve üstüne kayıyor.  Üçüncü 5px lik değer ise blur (bulanıklaşma) değeri.. Bu değer 0 verildiğinde bulanıklaşma kalkerken, 0 dan itibaren pozitif değerlerde, bulanıklaşma artmakta. Son değer ise renk değerim.

Şimdi ikinci bir örnek yapalım ki konu daha iyi anlaşılsın.. Yine aynı div yapısını kullandım CSS stilim ise şöyle;

CSS3 Gölgelendirme

#kutu {
width:20%;
margin: 30px 0;
-o-box-shadow: -5px -5px 0px #888;/*Opera tarayıcı için*/
-icab-box-shadow: -5px -5px 0px #888;/*iCab tarayıcı için*/
-khtml-box-shadow: -5px -5px 0px #888;/*Konqueror tarayıcı için*/
-moz-box-shadow: -5px -5px 0px #888;/*Firefox tarayıcı için*/
-webkit-box-shadow: -5px -5px 0px #888;/*Safari tarayıcı için*/
box-shadow: -5px -5px 0px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
}

Yukarıdaki örnekte, bu sefer negatif değerler kullandım. Dolayısıyla gölgem sola ve yukarı doğru kaydı. Ayrıca bulanıklaşma değerimi de 0 verdim, bu da gölgemin keskin hatlı olmasını sağladı. Yine resimin uygulamasını, konuya girerken bahsettiğim tarayıcılar ile buradan görebilirsiniz. Diğer tarayıcılar ile göremezsiniz.

Evet, konu bu kadar.. Umarım yararlı olur. Kaynak dosyayı buradan indirebilirsiniz. Teşekkürler..