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