CSS3 Kutu Elementlerine Gölge Verme Box-shadow
1 Mart 2010. Yazar: blackinci
CSS Makalelerini çok boşladım biliyorum ama vaktim olsa durmadan yazarım heralde CSS3 ü popüler tarayıcılar bütün kodları olmasada kısmen bazı kodları artık destekliyorlar yada yada desteklemeye çalışıyorlar bugun kutu modellerine gölge nasıl verilir bunu görücez.
Öncelikle Bir div layer oluşturalım adınıda "golgeli-kutu" koyalım
<div class="golgeli-kutu">
merhaba gölgeli kutu
</div>
merhaba gölgeli kutu
</div>
Kutumuzu oluşturduk geçelim css kısmına
box-shadow: #555 0px 0px 8px;
-moz-box-shadow: #555 0px 0px 8px;
-webkit-box-shadow: #555 0px 0px 8px;
-moz-box-shadow: #555 0px 0px 8px;
-webkit-box-shadow: #555 0px 0px 8px;
Bu şekilde gölgemizi verdik kodumuzun nasıl işlediğini görelim
box-shadow: #555 0px 0px 8px;
box-shadow: renk | sol sağ | Yukarı Alt | Gölge Derinliği;
peki ya neden 3 satırlık kod yazdık evet aslında ilk satırdaki kod bütün işimizi görüyor ama CSS3 ü tarayıcılar yeni desteklemeye başladığı için haliyle tarayıcılara özel olarak kod yazıyoruz tabi bunu özellikle kasıtlı olarakta yazabiliriz ama zamanla bize ilk satırdaki kod yeterli olacaktır
-moz-box-shadow Gecko ailesi için özel olarak yazılmış bir kod birliğidir
-webkit-box-shadow Webkit ailesi için özel olarak yazılmış bir kod birliğidir
Demo