In this recipe, we will cover the process of implementing the dropped shadow effect. This filter can be used for decoration purposes. Although it utilizes CPU resources very actively, don't put it on every page.
Follow these steps:
Add a control element to the appropriate web page of the application—using this object we will control intensity of the effect:
Shadow <input type="range" oninput="doShadow(this.valueAsNumber);" value="0" step="5" min="0" max="50">
Add the
onLoadhandler to HTML'sbodytag of the web page. By using this method, we will initialize the dropped shadow effect.<body onload="doShadow(0);">
Add an appropriate JavaScript function:
function doShadow(val) { var v = document.getElementById("localVideo"); v.style.webkitFilter="drop-shadow(" + val + "px " + val + "px 10px green)"; };We have added the
pxpostfix for the filter's value—this is because of the effect's intensity is setting in pixels. Also, you can see...