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 Resimler

HTML yorum etiketi ile öğe gizleme örneği

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML5 Canvas Oyun Yapımı Dersleri

YouTube Reklam Engelleyici

Uyurken Bile Para Kazanmak İster misin

javascript ile aciklama satiri ve haftanın gunünü bulma

Linklerin Renklerini Değiştirme Örnek