drop-shadow funksiyası

drop-shadow funksiyası fon şəklinə kölgə əlavə etməyə imkan verir.

Sintaksis

cssselektor {
  filter: drop-shadow(x oxu üzrə sürüşmə, y oxu üzrə sürüşmə, bulanıklıq radiusu, rəng);
}

Dəyərlər

Dəyər	Təsvir
x oxu üzrə sürüşmə	Kölgənin fona nisbətən üfüqi yerdəyişməsi. Müsbət ədəd kölgənin sağa sürüşdüyünü, mənfi isə sola sürüşdüyünü göstərir. Məcburi parametr.
y oxu üzrə sürüşmə	Kölgənin fona nisbətən şaquli yerdəyişməsi. Müsbət ədəd kölgənin aşağı sürüşdüyünü, mənfi isə yuxarı sürüşdüyünü göstərir. Məcburi parametr.
bulanıklıq	Kölgənin bulanıklıq radiusunu təyin edir. Dəyər nə qədər böyük olarsa, kölgə bir o qədər çox bulanır. İstəyə bağlı parametr. Standart olaraq `0` bərabərdir.
rəng	Kölgənin rəngi. İstəyə bağlı parametr. Standart olaraq qara kölgə rəngi təyin olunur.

Nümunə

Gəlin şəklimiz üçün oxlar boyunca yerdəyişməsi olmayan, 5px bulanıklığı olan mavi kölgə təyin edək:

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

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

Результат:

Həmçinin bax

fonu bulanlaşdıran blur funksiyası
fona parlaqlıq təyin edən brightness funksiyası
fona kontrastlıq təyin edən contrast funksiyası
fona rəng tonu təyin edən hue-rotate funksiyası
fonun rənglərini çevirən invert funksiyası
fona şəffaflıq təyin edən opacity funksiyası
fonu sepıyaya çevirən sepia funksiyası
fon üçün qısaltma xassə olan background xassəsi
bloka fon şəkli təyin etmək üçün istifadə olunan background-image xassəsi