Kutulara Gölge Vermek (box-shadow)

Yapısı : box-shadow: (değer) Aldığı Değerler : none | (gölge) [ , (gölge) ] Başlangıç değeri: tanımlama yokUygulanabilen elementler: tüm elementler Kalıtsallık:Yok

.golgeliKutu {
  box-shadow: 3px 3px 4px #000;
}

 

Değerler metinlere gölge verme (text-shadow) özelliği ile aynı anlamı taşır.

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

3px; İ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österir.

4px; 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 alır.

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

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

.golgeliKutu {
   box-shadow: 3px 3px 4px #000;
   -moz-box-shadow: 3px 3px 4px #000;
   -webkit-box-shadow: 3px 3px 4px #000;
 }

Yorum Yap

Ara
Kategoriler
ASP.NET  (4 )
MSSQL  (5 )
JAVASCRIPT  (8 )
FİNANS  (8 )
C#  (5 )
GEZİ-KÜLTÜR  (3 )
SEO  (2 )
Diğer  (3 )
CSS  (2 )
ANDROID  (2 )