Summary:

Make a Rollover Gradient behind your Navigation using CSS

    ●   Put a soft "gradient" behind your navagation using the a:hover tag.


Learn About:

Kuler Colors - Learn Skills for Choosing Color Schemes Gradient Tool Opacity - The same as Transparency

  •   This tutorial is part of the Art Genre, What in the World? and the Home Sweet Home 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 Project in Dreamweaver ~

Last time you worked on Drop Shadows for your Rollovers.

This time, we create Gradients.

 

Open your style sheet again by Double-Clicking it.

styles panel


Step #2: a:hover ~

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

a-hover.png


Step #3: Background Gradients ~

Copy the following code …

    background: -webkit-linear-gradient( #fff, #000);
	background: -moz-linear-gradient( #fff, #000);
	background: -ms-linear-gradient( #fff, #000);
	background: -o-linear-gradient( #fff, #000);
     

 

… and paste it in your a:hover tag:

linear gradient body tag


Step #4: View your Gradient ~

Save your work and view it by hitting F12 or select small to see your black and white background, something like this:


Step #5: Hex Code Colors ~

Go to: http://www.w3schools.com/tags/ref_colorpicker.asp and pick a color …

OR - if you chose your colors in the Kuler Colors tutorial in Illustrator, opne it and find the Swatches panel …

… click a color in Swatches, and then Double-Click the Fill color to see the Hex Code.


Step #6: Change your Top Color ~

Copy the Hex code numbers hex code and replace the gradient colors to match your theme …

… for something like this:


Do the same thing again with your bottom color until you get the gradient you like.


Step #7: Radial Gradient ~

Also try radial-gradient

radial gradient

… which does this:


Step #8: Keep Going ~

Also add a border radius to your rollover and see what that does …

border radius


Step #9: View Your Work ~

Hit small to view your work.

preview


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…


Other Resources: http://colorzilla.com/gradient-editor/ and http://lea.verou.me/css3patterns/