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

Bu blogdaki popüler yayınlar

HTML progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS text-justify Özelliği

CSS justify-content Özelliği

CSS border-collapse Özelliği

CSS overflow Özelliği

CSS top Özelliği