CSS ile Kutu Gölgelendirme

Vatanay Özbeyli CSS3, Tasarım Unsurları

Bu makalemizde CSS ile kullanabileceğiniz gölge efektlerini tanıyacağız.

ÖRNEĞİ GÖRÜNTÜLE

Çalışma Prensibi
Örnek Kod : box-shadow: 10px 10px 5px #888;

  1. Yatay uzantı gölgenin sağ tarafa doğru uzanmasını sağlar. Negatif değerler kullanmanız sol kısma doğru eğim sağlar.
  2. Dikey uzantı aşağıya doğru gölgelendirme yapar. Negatif değerler yukarıya doğru eğim sağlar.
  3. Bulanıklık (opsiyonel), eğer 0 olarak ayarlarsanız gölge çok sert olur. Gölgenin yumuşaklığını belirtiyoruz.
  4. Yayılış (opsiyonel), gölgenin yayılış miktarını belirler./li>
  5. Renklendirme ile de gölgeyi renklendiriyoruz.

Temel Örneklendirme

Gölge kod sisteminin nasıl çalıştığına dair temel örneklerle başlayalım.

Klasik Gölge (Drop Shadow)

  • CSS Kodu
div{
-moz-box-shadow:5px 5px 15px 3px #666;
-webkit-box-shadow: 5px 5px 15px 3px #666;
box-shadow: 5px 5px 15px 3px #666;
}
  • HTML Kodu
<div>Klasik Gölge</div>

 

Dahili Gölge (Inner Shadow)

  • CSS Kodu
div {
-moz-box-shadow:inset 0 0 20px #000000;
-webkit-box-shadow: inset 0 0 20px #000000;
box-shadow: inset 0 0 20px #000000;
}
  • HTML Kodu
<div>Dahili Gölge</div>

 
Tek Taraflı Gölge (One Side Shadow)

  • CSS Kodu
div {
-webkit-box-shadow: 0 11px 8px -6px #666;
-moz-box-shadow: 0 11px 8px -6px #666;
box-shadow: 0 11px 8px -6px #666;
}
  • HTML Kodu
<div>Tek Taraflı Gölge</div>

 
Dışa Dağılım (Outer Glow)

  • CSS Kodu
div {
-webkit-box-shadow: 0 0 6px 4px #666;
-moz-box-shadow: 0 0 6px 4px #666;
box-shadow: 0 0 6px 4px #666;
}
  • HTML Kodu
<div>Dışa Dağılım</div>