Lessons Community Resources Tools

Drop Shadow

With CSS you can create a very nice drop shadow effect for your text. Here's how

NOTE This trick will work only in IE 5.x and above browsers.

Example:

 » Home / News
 » About Us
 » Related Links
 » Contact Us

Code:

<TABLE cellSpacing="0" cellPadding="0" width="120" bgColor="#999999" border="0">
<TR>
<TD style="FILTER: dropshadow(color=#000000, offx=1, offy=1); WIDTH: 120px; COLOR: #ffffff" width=120>
 » Home / News
</TD>
</TR>
<TR>
<TD style="FILTER: dropshadow(color=#000000, offx=1, offy=1); WIDTH: 120px; COLOR: #ffffff" width=120>
 » About Us
</TD>
</TR>
<TR>
<TD style="FILTER: dropshadow(color=#000000, offx=1, offy=1); WIDTH: 120px; COLOR: #ffffff" width=120>
 » Related Links
</TD>
</TR>
<TR>
<TD style="FILTER: dropshadow(color=#000000, offx=1, offy=1); WIDTH: 120px; COLOR: #ffffff" width=120>
 » Contact Us
</TD>
</TR>
</TABLE>

IE 5 and above will not render the shadow inside a table if there is a background color or image specified in the table, row or cell. To remedy this, just nest a table, div or span elements wherever you would like the drop shadow.
A width attribute is necessary for the drop shadow effect to work.