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 ක්‍රියාකාරීත්වය,
පසුබිම sepia වෙත පරිවර්තනය කරන
background ගුණාංගය,
පසුබිම සඳහා සංක්ෂිප්ත ගුණාංගයක් වන
background-image ගුණාංගය,
එමගින් බ්ලොක් එකකට පසුබිම් පින්තූරයක් නියම කළ හැකි