CSS box-shadow Özelliği

CSS box-shadow

Css box-shadow özelliği ile bir div elemanına veya kutu modeli olarak stil atamak istediğimiz html elemanlarına gölge efekti verebiliriz.

Örnek:

Bu css örneğinde 1'den 6'ya kadar numaralandırılmış altı tane div elemanınına gölge efekti verilecektir.

div { width: 50px; height: 50px; background-color: red; box-shadow: 8px 8px 4px #777; }

CSS box-shadow nedir nasıl kullanılır

Css box-shadow : Box- shadow özelliği, bir öğeye bir veya birden fazla gölgeler ekler.

CSS box-shadow CSS box-shadow özellikleri  
Varsayılan Değer: none  
Kalıtsallık: var  
Animasyon Özelliği: yok
Versiyon: CSS3  
JavaScript box-shadow: object.style.boxShadow="11px 22px 18px crimson"

CSS box-shadow Tarayıcı Desteği

CSS Kodu:
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

CSS box-shadow Değerleri

box-shadow:none|h-shadow v-shadow blur spread color |inset|initial|inherit;

CSS box-shadow özelliği değerleri

CSS box-shadow değerleri CSS box-shadow değerleri tanımları CSS örnek uygulamalar
none Gölge efekti uygulanmayacağını belirten değerdir.
h-shadow Gölgenin kutudan yatay uzaklığını belirtir .Negatif değerlerde kabul edilebilir.
v-shadow Gölgenin kutudan düşey uzaklığını belirtir. Negatif değer alabilir.
blur bulanıklık mesafesi değeri girilir.
spread Gölgenin yayılma mesafesidir ve negatif değerler girilebilir.
inset Bir iç gölge bir dış gölge ( başından ) itibaren gölge değiştirir.
initial Varsayılan değerine geri döndürür.
inherit Soybağından gelen değeri kullanır.  

Yorumlar

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

Javascript ile neler yapılabilir

CSS top Özelliği

HTML strong Etiketi

Kriptopara nasıl alınır ve nereden alınır?

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Javascript Oyun Yapma Dersleri HTML5+CSS3

CSS flex-basis Özelliği

HTML5 Canvas Oyun Yapımı Dersleri