Gölgeler

CSS Podcast'i - 017: Gölgeler

Diyelim ki size bir tasarım gönderildi. Bu tasarımda üstün gölgelendirilmiş bir tişört resmi var. Tasarımcı, ürün resminin dinamik olduğunu ve içerik yönetim sistemiyle güncellenebileceğini belirtir. Bu nedenle gölgenin de dinamik olması gerekir. Resim, tişört yerine vizör veya şort ya da başka bir öğe olabilir. Bunu CSS ile nasıl yapabilirsiniz?

CSS'de box-shadow ve text-shadow özellikleri bulunur ancak resim metin olmadığından text-shadow kullanılamaz. box-shadow kullanırsanız gölge tişörtün çevresinde değil, etrafındaki kutunun üzerinde olur.

Neyse ki başka bir seçenek var: drop-shadow() filtresi. Bu sayede tam olarak tasarımcının istediği şeyi yapabilirsiniz. CSS'de gölgeler söz konusu olduğunda, her biri farklı bir kullanım alanı için tasarlanmış birçok seçenek vardır.

Kutu gölgesi

box-shadow özelliği, bir HTML öğesinin kutusuna gölge eklemek içindir. Blok öğelerde ve satır içi öğelerde çalışır.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow için değerlerin sırası aşağıdaki gibidir:

1. Yatay göreli konum: Pozitif bir sayı onu soldan dışa, negatif bir sayı ise sağdan dışarı iter.
2. Dikey göreli konum: Pozitif bir sayı onu üstten aşağı, negatif bir sayı ise alttan yukarı doğru iter.
3. Bulanıklaştırma yarıçapı: Sayı arttıkça gölge daha bulanıkken, küçük sayı daha keskin bir gölge üretir.
4. Yayılma yarıçapı (isteğe bağlı): Sayı arttıkça gölgenin boyutu artarken sayı küçülür. Dolayısıyla bu değer 0 olarak ayarlandığında bulanıklık yarıçapı ile aynı boyuta getirilir.
5. Renk: Herhangi bir geçerli renk değeri. Bu tanımlanmazsa hesaplanan metin rengi kullanılır.

Varsayılan dış gölge yerine bir kutu gölgesini iç gölge yapmak için diğer özelliklerden önce bir inset anahtar kelimesi ekleyin.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Birden çok gölge

box-shadow ile istediğiniz kadar gölge ekleyebilirsiniz. Bunu sağlamak için değer kümelerinden oluşan virgülle ayrılmış bir koleksiyon ekleyin:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Kutu gölgesini etkileyen özellikler

Kutunuza bir border-radius eklemek, kutu gölgesinin şeklini de etkiler. Bunun nedeni, CSS'nin kutunun şekline göre gölge oluşturup sanki ışık görünüyormuş gibi oluşturmasıdır.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

box-shadow içeren kutunuz, overflow: hidden içeren bir kapsayıcıda yer alıyorsa gölge, bu taşmadan da ayrılmaz.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Metin gölgesi

text-shadow özelliği, box-shadow özelliğine çok benzer. Yalnızca metin düğümlerinde çalışır.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

text-shadow değerleri box-shadow ile aynı ve aynı sırada. Tek fark, text-shadow için spread değerinin ve inset anahtar kelimesinin olmamasıdır.

Bir box-shadow eklediğinizde, bu öğe kutunuzun şekline göre kırpılır ancak text-shadow kırpılmaz. Bu, metniniz tamamen veya yarı şeffafsa gölgenin üzerinden görüneceği anlamına gelir.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Birden çok gölge

box-shadow ile olduğu gibi, text-shadow ile istediğiniz kadar gölge ekleyebilirsiniz. Değer kümelerinin virgülle ayrılmış bir koleksiyonunu ekleyin, ve 3D metin gibi gerçekten harika metin efektleri oluşturabilirsiniz.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Gölge

Bir resmin olası eğrilerini takip eden bir gölge elde etmek için CSS drop-shadow filtresini kullanın. Bu gölge, bir alfa maskesine uygulanır. Bu, bu modülün tanıtımındaki örnekte olduğu gibi, kesik bir resme gölge eklemek için çok kullanışlı bir çözümdür.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow filtresi box-shadow ile aynı değerlere sahiptir ancak inset anahtar kelimesine ve spread değerine izin verilmez. filter özelliğine birden fazla drop-shadow değeri örneği ekleyerek istediğiniz kadar gölge ekleyebilirsiniz. Her gölge, son gölgeyi konumlandırma referans noktası olarak kullanır.

Öğrendiklerinizi sınayın

Gölgeler hakkındaki bilginizi test edin