Drop-shadow funksiýasy

drop-shadow funksiýasy fon şekline kölege goşmaga mümkinçilik berýär.

Sintaksis

cssselektory {
  filter: drop-shadow(x boýunça ýykgyn, y boýunça ýykgyn, bulanjyklýk radiusy, reňk);
}

Görnüşleri

Görnüş	Düşündiriş
x boýunça ýykgyn	Kölegeň göni gorizont boýunça fona garanda ýerini üýtgetmek. Positive san kölegeň sag tarapa, negative san - çep tarapa ýykgyny aňladýar. Hökman goşulyan parametr.
y boýunça ýykgyn	Kölegeň dikeý boýunça fona garanda ýerini üýtgetmek. Positive san kölegeň aşak tarapa, negative san - ýokary tarapa ýykgyny aňladýar. Hökman goşulyan parametr.
bulanjyklýk	Kölegeň bulanjyklýk radiusyny belleýär. Görnüşiň ululygy näçe uly bolsa, kölege şonça-da bulanjak. Ihtýarly parametr. Deslapky bahasy `0`.
reňk	Kölegeň reňki. Ihtýarly parametr. Deslapky kölegeň gara reňki bellener.

Mysal

Şekilimize ok we dikeý boýunça ýykgyny bolmadyk, 5px bulanjyklýkly gök kölege ýerleşdireliň:

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

Результат:

Şeýle-de serediň

fon şeklini bulanjyk edýän blur funksiýasy,
fona ýagtylyk belläp berýän brightness funksiýasy,
fona kontrastlyk belläp berýän contrast funksiýasy,
fona reňklilik belläp berýän hue-rotate funksiýasy,
fonuň reňklerini inwertirleýän invert funksiýasy,
fona geçirijilik belläp berýän opacity funksiýasy,
fonu sepia öwürýän sepia funksiýasy,
fon üçin gysgaça görnüş bolup hyzmat edýän background aýratynlygy,
bloga fon şeklini belläp bermek üçin ulanylýan background-image aýratynlygy,