Set Drop Shadow Effect with CSS
Drop Shadow is used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color.
The following parameters can be used in this filter:
Parameter
| Description
|
|---|
color
| The color, in #RRGGBB format, of the dropshadow.
|
| offX
| Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left.
|
offY
| Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up.
|
| positive
| If true, all opaque pixels of the object has a drop shadow. If false, all transparent pixels have a drop shadow. The default is true.
|
Example
You can try to run the following code to set drop shadow effect:
Live Demo
<html>
<head></head>
<body>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "Filter: Chroma(Color = #000000)
DropShadow(Color = #FF0000,
OffX = 2,
OffY = 2, Positive = 1)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div>
</body>
</html>
Published on 30-Apr-2018 11:37:40
