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
szelektor {
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:
<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;
}
:
Lásd még
-
a
blurfüggvény,
amely elmosja a hátteret -
a
brightnessfüggvény,
amely beállítja a háttér fényerejét -
a
contrastfüggvény,
amely beállítja a háttér kontrasztját -
a
hue-rotatefüggvény,
amely beállítja a háttér színárnyalatát -
a
invertfüggvény,
amely invertálja a háttér színeit -
a
opacityfüggvény,
amely beállítja a háttér átlátszóságát -
a
sepiafüggvény,
amely szépia effektust alkalmaz a háttérre -
a
backgroundtulajdonság,
amely egy rövidítő tulajdonság a háttérhez -
a
background-imagetulajdonság,
amely segítségével háttérképet lehet beállítani egy blokkhoz