CSS ile box-shadow (kutu gölgelendirme) nasıl yapılır?

Question

ergin · Accepted Answer

CSS3 ile gelen box-shadow özelliği sayesinde çok basit bir tanımlama ile kutulara istediğimiz şekilde gölgeler oluşturabiliriz.

Temel kullanımı;

.uzmanimKutu { 
    box-shadow: 4px 4px 5px #000; 
}

4px; İlk değer yataydaki mesafe içindir. Artı değerler kutunun sağından itibaren uzaklık değeridir, negatif değerler ise kutunun soluna doğru mesafeyi göstermektedir.

4px; İkinci değer dikeydeki mesafe içindir. Artı değerler kutunun altına doğru mesafeyi gösterir, eksi değerler ise kutunun üstüne doğru mesafesini göstermektedir.

5px; Bulanıklık(blur) değeridir. Gölgelerin gerçeğe yaklaşması için kullanılır. Bulanık yatay ve dikey için verilen değerler göre şekil almaktadır.

#000; renk değeri. Gölgenin renk değerini göstermektedir.

Farklı tarayıcılar için ön ek kullanılarak çözüm üretilir. -moz Firefox için, -webkit Safari ve Google Chrome içindir.

.uzmanimKutu {
     box-shadow: 4px 4px 5px #000;
     -moz-box-shadow: 4px 4px 5px #000;
     -webkit-box-shadow: 4px 4px 5px #000;
 }

Birden çok gölge kullanımı

box-shadow tanımında tek bir gölge tanımı yapılabildiği gibi, birden fazla gölge tanımıda yapılmaktadır. Her bir tanım birbirinden virgül ile ayrılır.

.uzmanimKutu { 
    box-shadow: 5px 5px 5px #0000ff, -5px -5px 5px #ff0000 ;
    -moz-box-shadow: 5px 5px 5px #0000ff, -5px -5px 5px #ff0000 ;
    -webkit-box-shadow: 5px 5px 5px #0000ff, -5px -5px 5px #ff0000;
}

Kutu içine gölge vermek

Kutulara gölge verirken kutu içinede gölge verebiliyoruz. Bunun için inset eklemesi ile kutu içine gölge verebiliriz.

.uzmanimKutu {
    box-shadow: inset 0 0 2px #000;
    -moz-box-shadow: inset 0 0 2px #000;
    -webkit-box-shadow: inset 0 0 2px #000;
}

İE İçin Çözüm

box-shadow IE8 ve alt sürümleri içinde çözüm bulunmaktadır. box-shadow esnekliği ve kolaylığını bize sağlamasada bir çözüm yöntemidir.

İnternet Explorer' da çözüm için Shadow filtresinden yararlanabiliriz.

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');

IE8 için farklı diğer IE' ler için farklı kodlar yazıyoruz. Bu kodu yukarıdaki kodlar ile birleştirirsek.

.uzmanimKutu {
    -moz-box-shadow: 3px 3px 4px #333;
    -webkit-box-shadow: 3px 3px 4px #333;
    box-shadow: 3px 3px 4px #333;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
}

Tüm tarayıcılar için çözüm üretmiş olacağız.