Create Gradient Backgrounds using only CSS


Summary:

Gradient Backgrounds in Dreamweaver

    ●   Learn to create a gradient background without using any images, only code.


Learn About:

Gradient Backgrounds Codes in CSSColor Codes in Illustrator

  •   This tutorial is part of the What in the World?, and Home Sweet Home Portfolio, What in the World? and other Web Design Projects.

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.

open-styles-sheet.png

 

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 …

Isla Verde

- Visit our Beautiful island!


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 hex code and replace the gradient colors to match your theme …

… for something like this:

Hex Codes #886C2A and #000 Gradient in CSS


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


Step #10: Radial Gradient ~

Also try radial-gradient

radial gradient

… which does this:

CSS Codes yellow and red


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.

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/