ფუნქცია drop-shadow

ფუნქცია drop-shadow საშუალებას აძლევს დაამატოს ჩრდილი ფონის სურათს.

სინტაქსი

სელექტორი {
	filter: drop-shadow(x-ღერძის გადანაცვლება, y-ღერძის გადანაცვლება, დაბინდვის რადიუსი, ფერი);
}

მნიშვნელობები

მნიშვნელობა	აღწერა
x-ღერძის გადანაცვლება	ჩრდილის ჰორიზონტალურად გადანაცვლება ფონთან მიმართებაში. დადებითი რიცხვი აღნიშნავს ჩრდილის მარჯვნივ გადანაცვლებას, უარყოფითი - მარცხნივ. სავალდებულო პარამეტრი.
y-ღერძის გადანაცვლება	ჩრდილის ვერტიკალურად გადანაცვლება ფონთან მიმართებაში. დადებითი რიცხვი აღნიშნავს ჩრდილის ქვემოთ გადანაცვლებას, უარყოფითი - ზემოთ. სავალდებულო პარამეტრი.
დაბინდვა	აყენებს ჩრდილის დაბინდვის რადიუსს. რაც უფრო დიდია მნიშვნელობა, მით უფრო მეტად ბინდულობს ჩრდილი. ოფციონალური პარამეტრი. ნაგულისხმევად უდრის `0`.
ფერი	ჩრდილის ფერი. ოფციონალური პარამეტრი. ნაგულისხმევად დაყენებულია ჩრდილის შავი ფერი.

მაგალითი

დავაყენოთ ჩვენი სურათისთვის ცისფერი ჩრდილი ღერძების გასწვრივ გადანაცვლების გარეშე, 5px დაბინდვით:

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

იხილეთ აგრეთვე

ფუნქცია blur,
რომელიც ბინდავს ფონს
ფუნქცია brightness,
რომელიც აყენებს ფონის სიკაშკაშეს
ფუნქცია contrast,
რომელიც აყენებს ფონის კონტრასტულობას
ფუნქცია hue-rotate,
რომელიც აყენებს ფონის ფერიანობას
ფუნქცია invert,
რომელიც ინვერტირებას ახდენს ფონის ფერების
ფუნქცია opacity,
რომელიც აყენებს ფონის გამჭვირვალობას
ფუნქცია sepia,
რომელიც ფონს სეპიაში გარდაქმნის
თვისება background,
რომელიც წარმოადგენს შემოკლების თვისებას ფონისთვის
თვისება background-image,
რომლის საშუალებითაც ბლოკს შეუძლია მიანიჭოს ფონური სურათი