CSS Podcast'i - 017: Gölgeler
'nı inceleyin.
Diyelim ki size bir tasarım gönderildi ve bu tasarımda bir tişört resmi var. gölgelendiriliyor. Tasarımcı, ürün resminin dinamik olduğunu söylüyor ve içerik yönetim sistemi üzerinden güncellenebilir. gölgenin de dinamik olması gerekir. Tişört yerine Resim siperlik, şort ya da başka bir öğe olabilir. Bunu CSS ile nasıl yapabilirsiniz?
CSS
box-shadow
ve
text-shadow
mülk,
ancak resim metin olmadığı için text-shadow
kullanılamaz.
box-shadow
kullanırsanız gölge, etrafındaki kutunun üzerinde olur
etmedik.
Neyse ki başka bir seçenek daha var:
drop-shadow()
filtresini uygulayın.
Bu, tasarımcının istediği şeyi tam olarak yapmanızı sağlar.
CSS'deki gölgeler için birçok seçenek var.
her biri farklı bir kullanım alanı için tasarlandı.
Kutu gölgesi
box-shadow
özelliği, bir HTML öğesinin kutusuna gölge eklemek içindir.
Blok öğeler 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ı şu şekildedir:
- Yatay uzaklık: pozitif bir sayı sayıyı soldan, negatif bir sayı ise sağdan dışarı iter.
- Dikey ofset: pozitif bir sayı onu yukarıdan aşağı iter, eksi bir sayı ise aşağıdan yukarı doğru iter.
- Bulanıklık yarıçapı: büyük bir sayı daha bulanık bir gölge oluşturur. küçük bir sayı daha keskin bir gölge oluşturur.
- Genişlik yarıçapı (isteğe bağlı): büyük bir sayı gölgenin boyutunu artırır, ne kadar küçük bir sayıysa gölgeyi küçültür. 0 olarak ayarlanırsa bulanıklık yarıçapı ile aynı boyutta olacak şekilde ayarlayın.
- Renk: Geçerli herhangi bir renk değeri. Tanımlanmamışsa hesaplanan metin rengi kullanılır.
Bir kutuyu gölgelendirmek için iç gölgeyi
dış gölge yerine
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 fazla gölge
box-shadow
ile istediğiniz kadar gölge ekleyebilirsiniz.
Bunu yapmak 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 border-radius
eklemek, kutu gölgesinin şeklini de etkiler.
Bunun nedeni CSS'nin kutunun şekline göre bir gölge oluşturmasıdır
sanki ışık doğru yöneltiyormuş gibi.
.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ı ve aynı sırada.
Tek fark text-shadow
URL'sinde spread
değeri ve inset
anahtar kelimesi olmamasıdır.
Eklediğiniz box-shadow
, kutunuzun şekline kırpılır.
ancak text-shadow
oranında klip yok.
Bu, metninizin tamamen veya yarı şeffaf olduğu durumlarda
gölgenin üzerinden görünür.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
Birden fazla gölge
text-shadow
kullanarak istediğiniz kadar gölge ekleyebilirsiniz,
Tıpkı box-shadow
.
Değer kümelerinin virgülle ayrılmış bir koleksiyonunu ekleyin.
ve 3D metin gibi etkileyici 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 maskeye uygulandığından, kesilmiş resme gölge eklemek için çok kullanışlı bir hale gelir.
her şeyi öğreteceğiz.
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
drop-shadow
filtresi, box-shadow
ile aynı değerlere sahip ancak inset
anahtar kelimesine ve spread
değerine izin verilmiyor. İstediğiniz kadar gölge ekleyebilirsiniz.
filter
özelliğine birden fazla drop-shadow
değeri ekleyerek.
Her gölge, konumlandırma referans noktası olarak son gölgeyi kullanır.
Öğrendiklerinizi sınayın
Gölgeler hakkındaki bilginizi test edin
Aşağıdaki gölge değerlerinden hangisi box-shadow
özelliğine özgüdür?
inset
Bir öğede aynı anda yalnızca 13 kutu gölgesine izin verilir.