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қасиеті,
оның көмегімен блокқа фондық сурет беруге болады