drop-shadow funktsiyasi

drop-shadow funktsiyasi fon tasviriga soya qo‘shish imkonini beradi.

Sintaksis

cssselector {
  filter: drop-shadow(x siljishi, y siljishi, xiraylash radiusi, rang);
}

Qiymatlar

Qiymat	Tavsif
x siljishi	Fon nisbatan soyaning gorizontal siljishi. Musbat son soyaning o‘ngga siljishini bildiradi, manfiy - chapga. Majburiy parametr.
y siljishi	Fon nisbatan soyaning vertikal siljishi. Musbat son soyaning pastga siljishini bildiradi, manfiy - yuqoriga. Majburiy parametr.
xiraylash	Soyaning xiraylash radiusini o‘rnatadi. Qiymat qancha katta bo‘lsa, soya shuncha xiralashadi. Ixtiyoriy parametr. Boshlang‘ich qiymati `0`.
rang	Soyaning rangi. Ixtiyoriy parametr. Boshlang‘ich qiymat qora rang.

Misol

Keling, tasvirimizga o‘qlar bo‘yicha siljishisiz, 5px xiraylash bilan ko‘k soya o‘rnatamiz:

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;
}

Результат:

Shuningdek qarang

blur funktsiyasi,
fonni xiralashtiradi
brightness funktsiyasi,
fonning yorqinligini o‘rnatadi
contrast funktsiyasi,
fonning kontrastligini o‘rnatadi
hue-rotate funktsiyasi,
fonning rangdorligini o‘rnatadi
invert funktsiyasi,
fon ranglarini inversiyalaydi
opacity funktsiyasi,
fonning shaffofligini o‘rnatadi
sepia funktsiyasi,
fonni sepia rangiga aylantiradi
background xususiyati,
fon uchun qisqartma xususiyat hisoblanadi
background-image xususiyati,
uning yordamida blokka fon tasviri berish mumkin