Drop Shadow
With CSS
you can create a very nice drop shadow effect for your text. Here's how
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.