Summary:

Drop-Shadow Rollover in CSS

    ●   Add Drop-Shadow rollovers to your button text.


Learn About:

Code HintsDrop Shadowa:hover

  •   This tutorial is part of the Art Genre, What in the World? and Portfolio Projects.

This tutorial is part of a series:

1 - Navigation using List Tags     2 - Drop Shadow Rollover     3 - Gradient Rollovers     4 - 101_links_Dw.htm  

Other People's Work:

Here are examples of work inspired by this tutorial.



 


Step #1: Open your Index Page in Dreamweaver~

Last time you worked on Navigation using List tags in CSS.

This time, we create Drop Shadows for your Rollovers.

 

Open your style sheet again by Double-Clicking it.


Step #2: a:hover ~

Look for your a:hover tag - yours may looks different, or you have to make one yourself …

… and type this code:


Step #3: Add the Drop Shadow ~

Complete the code as follows:

!Try different things! Be creative!


Step #4: Text Color ~

Change the color of your rollover text by typing:

!Try different things! Be creative!


Step #5: Text Shadow Generator ~

Experiment! Try different settings! Be creative! Go to the following website and pick your own text shadow settings …

http://css3gen.com/text-shadow/

!Try different things! Be creative!

Make sure your drop-shadow is unique!


Last Step: Upload your Site ~

Save and upload your files with the completed code.

upload your site

Attach the URL of your site, and continue working on 103_nav_gradient_Ps.htm


Other Resources: http://css3gen.com/text-shadow/ and http://www.htmlgoodies.com/beyond/css/article.php/3891201/Making-Rounded-Corner-Buttons-Without-Images.htm