The shadow filter add the shadow effect to the element.
#example {
filter: shadow(color=red, direction=135);
}
| Attribute | Value | Explanation |
|---|---|---|
| color | color code or name | the color of the shadow |
| direction | 0 - 315 (45 degree increments) |
the direction of the shadow
0 = top 45 = right top 90 = right 135 = right bottom 180 = bottom 225 = left bottom 270 = left 315 = left top |
The original
<img src="image/friend.gif" alt="IMG" width="170" height="140"> <img src="image/friend2.gif" alt="IMG" width="170" height="140">
<div style="font: bold 170% sans-serif; width: 100%;">
Example text
</div>
The color and direction of the shadow
<div style="width: 100%; padding-bottom: 10px; filter: shadow(color=red, direction=135);"> <img src="image/friend.gif" alt="IMG" width="170" height="140"> </div>
<div style="width: 100%; filter: shadow(color=red, direction=135);"> <img src="image/friend2.gif" alt="IMG" width="170" height="140"> </div>
<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=red, direction=135);"> Example text </div>
Only the color of the shadow
<div style="width: 90%; padding-left: 10px; padding-bottom: 10px; filter: shadow(color=#c0c0c0);"> <img src="image/friend.gif" alt="IMG" width="170" height="140"> </div>
<div style="font: bold 170% sans-serif; width: 90%; padding-left: 10px; padding-bottom: 10px; filter: shadow(color=#c0c0c0);"> Example text </div>