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:
- Yatay göreli konum: Pozitif bir sayı onu soldan dışa, negatif bir sayı ise sağdan dışarı iter.
- Dikey göreli konum: Pozitif bir sayı onu üstten aşağı, negatif bir sayı ise alttan yukarı doğru iter.
- Bulanıklaştırma yarıçapı: Sayı arttıkça gölge daha bulanıkken, küçük sayı daha keskin bir gölge üretir.
- 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.
- 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
Aşağıdaki gölge değerlerinden hangisi box-shadow
ürününe özgüdür?
inset
inset
, box-shadow
için de benzersiz olan bir anahtar kelime.Bir öğede aynı anda yalnızca 13 kutu gölgesine izin verilir.