shadow filter


filter: shadow(***);

Browser
Internet Explorer
Type
Extension

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

Example

The original

<img src="image/friend.gif" alt="IMG" width="170" height="140">
<img src="image/friend2.gif" alt="IMG" width="170" height="140">
Output

IMG IMG

<div style="font: bold 170% sans-serif; width: 100%;">
Example text
</div>
Output
Example text

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>
Output
IMG
<div style="width: 100%; filter: shadow(color=red, direction=135);">
<img src="image/friend2.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG
<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=red, direction=135);">
Example text
</div>
Output
Example text

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>
Output
IMG
<div style="font: bold 170% sans-serif; width: 90%; padding-left: 10px; padding-bottom: 10px; filter: shadow(color=#c0c0c0);">
Example text
</div>
Output
Example text