Gradient Backgrounds in Dreamweaver
● Learn to create a gradient background without using any images, only code.
✓ Gradient Backgrounds Codes in CSS✓ Color Codes in Illustrator
Other People's Work:
View this on-line video tutorial and/or follow the steps below.
This video was provided by Webucator, a provider of CSS training.
Step #1: Open your Work in Dreamweaver ~
✓ Make sure your index page for this project is open.
Step #2: CSS ~
✓ Open styles.css by going to: Window > CSS Styles and Double-Click your styles sheet.
Step #3: Open your CSS document ~
✓ Scroll down to the bottom of your CSS code and click in an open space.
Step #4: Create a New Class ~
✓ Create a New Class called .gradient-background by typing in the following:
Step #5: 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); background-repeat: no-repeat; background-attachment: fixed;
✓ … and paste it inside your new .gradient-background tag:
Step #6: Source Code ~
✓ Go back to the Source code of your HTML document:
Step #7: What Div Are You Working On? ~
✓ IF you're working on the apDiv find it in your source code …
✓ … add the .gradient-background class to it.
✓ ANY DIV WILL DO! You can add the .gradient-background class to any div.
✓ Also, you can apply more than 1 class to the same element like this:
Step #7: See if it Works ~
✓ Hit to view your work.
✓ Hopefully it looks something like this …
Step #8: 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 #9: 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 #10: Radial Gradient ~
✓ Also try radial-gradient …
✓ … which does this:
Step #11: Keep Going!
✓ Use this code ANYWHERE! In you Rollover boxes, your content divs, you buttons, EVERYWHERE!
Google Fonts are Great!
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/