0
CSS ile box-shadow (kutu gölgelendirme) nasıl yapılır?
0
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.
Cevap yazabilmek için üye girişi yapmalısınız.
Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol