drop-shadow Fonksiyonu

drop-shadow fonksiyonu bir arka plan resmine gölge eklemeye olanak tanır.

Sözdizimi

seçici {
	filter: drop-shadow(x kayması, y kayması, bulanıklık yarıçapı, renk);
}

Değerler

Değer	Açıklama
x kayması	Gölgenin arka plana göre yatay kayması. Pozitif bir sayı gölgeyi sağa kaydırır, negatif bir sayı - sola kaydırır. Zorunlu parametre.
y kayması	Gölgenin arka plana göre dikey kayması. Pozitif bir sayı gölgeyi aşağı kaydırır, negatif bir sayı - yukarı kaydırır. Zorunlu parametre.
bulanıklık	Gölgenin bulanıklık yarıçapını ayarlar. Değer ne kadar büyük olursa, gölge o kadar bulanıklaşır. İsteğe bağlı parametre. Varsayılan olarak `0`'a eşittir.
renk	Gölgenin rengi. İsteğe bağlı parametre. Varsayılan olarak gölge rengi siyah olarak ayarlanır.

Örnek

Resmimiz için eksenler boyunca kayma olmadan, 5px bulanıklığa sahip mavi bir gölge ayarlayalım:

<div id="elem"></div>

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ayrıca Bakınız

blur fonksiyonu,
arka planı bulanıklaştırır
brightness fonksiyonu,
arka planın parlaklığını ayarlar
contrast fonksiyonu,
arka planın kontrastını ayarlar
hue-rotate fonksiyonu,
arka planın renk tonunu ayarlar
invert fonksiyonu,
arka plan renklerini tersine çevirir
opacity fonksiyonu,
arka planın saydamlığını ayarlar
sepia fonksiyonu,
arka planı sepya'ya dönüştürür
background özelliği,
arka plan için kısaltma özelliğidir
background-image özelliği,
bir bloğa arka plan resmi ayarlamak için kullanılır