Box shadow

Box shadow yada kutu gölgesi. CSS3 Kutu elementlerine gölge verme Box-shadow. CSS3 ile gelen yeni özelliklerden bir tanesi de box shadow özelliğidir.

Öncelikle Bir div layer oluşturalım adınıda “golgeli-kutu” koyalım.

<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;

  • 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.
  • Siz parametreleri istediğiniz gibi değiştirerek istediğiniz boyutlarda ve renklerde gölgeler oluşturabilirsiniz. değerleri eksi olarak verirseniz gölge diğer tarafta olacaktır. Renk değerini Hex formatında değilde RGB formatında vererek gölgeye transparent özellikte atayabiliriz.
Advertisements

Yazar: Ömer M.

Kim ki bize anlatır kendini? Hatırlatmıyorsa bir kişi kendini unuttu diye kınamamalı hiçbir kimseyi.

Düşüncenizi belirtin