Funkcja drop-shadow
Funkcja drop-shadow pozwala
dodać cień do obrazu
tła.
Składnia
selektor {
filter: drop-shadow(przesunięcie x, przesunięcie y, rozmycie, kolor);
}
Wartości
| Wartość | Opis |
|---|---|
| przesunięcie x | Przesunięcie cienia w poziomie względem tła. Liczba dodatnia oznacza przesunięcie cienia w prawo, ujemna - w lewo. Parametr obowiązkowy. |
| przesunięcie y | Przesunięcie cienia w pionie względem tła. Liczba dodatnia oznacza przesunięcie cienia w dół, ujemna - w górę. Parametr obowiązkowy. |
| rozmycie |
Ustawia promień rozmycia cienia.
Im większa wartość, tym bardziej cień jest rozmyty.
Parametr opcjonalny. Domyślnie
wynosi 0.
|
| kolor | Kolor cienia. Parametr opcjonalny. Domyślnie ustawiany jest czarny kolor cienia. |
Przykład
Ustawmy dla naszego obrazu niebieski cień
bez przesunięcia wzdłuż osi, z rozmyciem 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;
}
:
Zobacz też
-
funkcja
blur,
która rozmywa tło -
funkcja
brightness,
która ustawia jasność tła -
funkcja
contrast,
która ustawia kontrast tła -
funkcja
hue-rotate,
która ustawia nasycenie kolorów tła -
funkcja
invert,
która invertuje kolory tła -
funkcja
opacity,
która ustawia przezroczystość tła -
funkcja
sepia,
która przekształca tło w sepii -
właściwość
background,
która jest skrótem dla tła -
właściwość
background-image,
za pomocą której blokowi można ustawić obraz tła