Site Navigation:

Home // Tutorials // Code // Drop shadows

Drop Shadows

1
Using filters you can create text with a drop shadow without using any images.

Firstly, Press SHIFT + F11 to open the the CSS palette. Click the little to create a new CSS style. When the box pops up, enter the name dropshadow into the name box.

When done, click OK.
2
Next a new box should appear, On the left side, under "Category" click on "Extensions" now from the drop menu "FILTER" select: drop shadow.
Now its just a case of replacing the ?'s with values.

Here is an example:

DropShadow(Color=#CCCCCC, OffX=1, OffY=1, Positive=5)
3
Looks great, what's the catch?

Well yeah, there are two, firstly you cannot place drop shadowed text in a table cell that has a bg colour, it wont work.
The only way to do that is to place it in a table, inside another table.

Also, as it used filters it only works in certain browsers and versions. So if your worried about compatibility it may be better to do it in an image.

Anyway, experiment and edit it to suit your tastes.

Hope you enjoyed the tutorial.
spacer

This Tutorial was Brought to you by Robouk, Please post any questions in the forum. Thank you.
BACK TO TUTORIALS



Home Tutorials Free Stuff About Gallery Forum Links Contact

Copyright © Robouk 2001.

Dreamweaver®, Flash® and Photoshop® are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Hosted by Pixelcode - web design tutorials.