Gölgeler

The CSS Podcast - 017: Shadows

Oluşturmanız için size bir tasarım gönderildiğini ve bu tasarımda, kesilmiş ve gölgelendirilmiş bir tişört resmi olduğunu varsayalım. Tasarımcı, ürün resminin dinamik olduğunu ve içerik yönetim sistemi aracılığıyla güncellenebileceğini söylüyor. Bu nedenle gölgenin de dinamik olması gerekir. Tişört yerine, şapka, şort veya başka bir öğe de olabilir. Bunu CSS ile nasıl yaparsınız?

CSS'de box-shadow ve text-shadow özellikleri vardır ancak resim metin olmadığından text-shadow kullanılamaz. box-shadow kullanırsanız gölge, tişörtün etrafında değil etrafındaki kutuda olur.

Neyse ki başka bir seçenek var: drop-shadow() filtresi. Bu sayede, tasarımcının tam olarak istediğini 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 mülkü, bir HTML öğesinin kutusuna gölge eklemek için kullanılır. 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 ofset: Pozitif bir sayı, öğeyi soldan iter ve negatif bir sayı ise öğeyi sağdan iter.
2. Dikey ofset: Pozitif bir sayı, öğeyi üstten aşağı doğru, negatif bir sayı ise alttan yukarı doğru iter.
3. Bulanıklaştırma yarıçapı: Daha büyük bir sayı daha bulanık bir gölge, küçük bir sayı ise daha keskin bir gölge oluşturur.
4. Dağılım yarıçapı (isteğe bağlı): Daha büyük bir sayı gölgenin boyutunu artırır, daha küçük bir sayı ise boyutunu azaltır. 0 olarak ayarlanırsa bulanıklaştırma yarıçapı ile aynı boyuta getirilir.
5. Renk: Geçerli herhangi bir renk değeri. Bu değer tanımlanmazsa hesaplanan metin rengi kullanılır.

Kutu gölgesini varsayılan dış gölge yerine iç gölge yapmak için diğer özelliklerin önüne 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 fazla gölge

box-shadow ile istediğiniz kadar gölge ekleyebilirsiniz. Bunu yapmak için virgülle ayrılmış bir değer kümesi koleksiyonu 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;
}

box-shadow'u etkileyen özellikler

Kutunuza border-radius eklemek, kutu gölgesinin şeklini de etkiler. Bunun nedeni, CSS'nin kutunun şekline göre gölge 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ıdaysa gölge de bu taşmanın dışına çıkmaz.

<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ıdır ve aynı sıradadır. Tek fark, text-shadow'te spread değeri ve inset anahtar kelimesinin olmamasıdır.

Eklediğiniz box-shadow, kutunuzun şekline göre kırpılır ancak text-shadow kırpılmaz. Bu, metniniz tamamen veya yarı saydamsa gölgenin metnin içinden görüleceği anlamına gelir.

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

Birden fazla gölge

box-shadow ile olduğu gibi text-shadow ile de istediğiniz kadar gölge ekleyebilirsiniz. Virgülle ayrılmış bir değer kümesi koleksiyonu eklediğinizde 3D metin gibi çok havalı metin efektleri oluşturabilirsiniz.

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

Gölge

Bir resmin olası tüm 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 sayede, bu modülün girişindeki gibi bir kesit resmine gölge eklemek için çok kullanışlı olur.

.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 mülküne birden fazla drop-shadow değeri örneği ekleyerek istediğiniz kadar gölge ekleyebilirsiniz. Her gölge, konumlandırma referans noktası olarak son gölgeyi kullanır.

Öğrendiklerinizi test etme

Gölgelerle ilgili bilginizi test edin