Make a Rollover Gradient behind your Navigation using CSS
● Put a soft "gradient" behind your navagation using the a:hover tag.
✓ Kuler Colors - Learn Skills for Choosing Color Schemes ✓ Gradient Tool ✓ Opacity - The same as Transparency
This tutorial is part of a series:
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.
Step #2: a:hover ~
✓ Look for your a:hover tag - yours may looks different, or you have to make one yourself …
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:
Step #4: View your Gradient ~
✓ Save your work and view it by hitting F12 or select 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 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 …
✓ … which does this:
Step #8: Keep Going ~
✓ Also add a border radius to your rollover and see what that does …
Step #9: View Your Work ~
✓ Hit to view your work.
Last Step: Upload your Site ~
✓ Save and upload your files with the completed code.
✓ Attach the URL of your site, and continue working…
Other Resources: http://colorzilla.com/gradient-editor/ and http://lea.verou.me/css3patterns/