drop-shadow függvény

A drop-shadow függvény lehetővé teszi árnyék hozzáadását a háttérképhez.

Szintaxis

cssszelektor {
  filter: drop-shadow(x eltolás, y eltolás, elmosási sugár, szín);
}

Értékek

Érték	Leírás
x eltolás	Az árnyék vízszintes eltolása a háttérhez képest. Pozitív szám az árnyék jobbra tolását jelenti, negatív szám pedig balra. Kötelező paraméter.
y eltolás	Az árnyék függőleges eltolása a háttérhez képest. Pozitív szám az árnyék lefelé tolását jelenti, negatív szám pedig felfelé. Kötelező paraméter.
elmosási sugár	Beállítja az árnyék elmosási sugarát. Minél nagyobb az érték, annál jobban elmosódik az árnyék. Opcionális paraméter. Alapértelmezetten `0`.
szín	Az árnyék színe. Opcionális paraméter. Alapértelmezetten fekete színű az árnyék.

Példa

Állítsunk be kék árnyékot a képünknek tengelyek menti eltolás nélkül, 5px elmosási sugárral:

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

Результат:

Lásd még

a blur függvény,
amely elmosja a hátteret
a brightness függvény,
amely beállítja a háttér fényerejét
a contrast függvény,
amely beállítja a háttér kontrasztját
a hue-rotate függvény,
amely beállítja a háttér színárnyalatát
a invert függvény,
amely invertálja a háttér színeit
a opacity függvény,
amely beállítja a háttér átlátszóságát
a sepia függvény,
amely szépia effektust alkalmaz a háttérre
a background tulajdonság,
amely egy rövidítő tulajdonság a háttérhez
a background-image tulajdonság,
amely segítségével háttérképet lehet beállítani egy blokkhoz