Kazi ya drop-shadow
Kazi drop-shadow inaruhusu
kuongeza kivuli kwenye picha ya
asili.
Syntax
kichaguzi {
filter: drop-shadow(usogeaji kwa x, usogeaji kwa y, radius ya kufifia, rangi);
}
Thamani
| Thamani | Maelezo |
|---|---|
| usogeaji kwa x | Uhamishaji wa kivuli kwa usawa ukilinganisha na asili. Nambari chanya inaashiria usogeaji wa kivuli kulia, nambari hasi - kushoto. Kigezo cha lazima. |
| usogeaji kwa y | Uhamishaji wa kivuli kwa wima ukilinganisha na asili. Nambari chanya inaashiria usogeaji wa kivuli chini, nambari hasi - juu. Kigezo cha lazima. |
| kufifia |
Inaweka radius ya kufifia kwa kivuli.
Kadiri thamani inavyokuwa kubwa, ndivyo kivuli kinavyofifia zaidi.
Kigezo cha hiari. Kwa msingi
ni sawa na 0.
|
| rangi | Rangi ya kivuli. Kigezo cha hiari. Kwa msingi rangi nyeusi ya kivuli huwekwa. |
Mfano
Wacha tuweke kivuli cha bluu kwa picha yetu
bila uhamishaji kwenye shoka, na kufifia kwa 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;
}
:
Tazama pia
-
kazi
blur,
ambayo inafifia asili -
kazi
brightness,
ambayo inaweka mwangaza wa asili -
kazi
contrast,
ambayo inaweka utofautishaji wa asili -
kazi
hue-rotate,
ambayo inaweka rangi ya asili -
kazi
invert,
ambayo inabadilisha upande rangi za asili -
kazi
opacity,
ambayo inaweka uwazi wa asili -
kazi
sepia,
ambayo inabadilisha asili kuwa sepia -
sifa
background,
inayowakilisha sifa iliyofupishwa kwa asili -
sifa
background-image,
ambayo kwa kutumia kizuizi kunaweza kupewa picha ya asili