Gradients
What are Gradients? Gradients are graphics files that gradually blend from one shade of color to another. By using gradients as background images, we can make our web pages look more modern and stylish. There is no need to use a large image when building a gradient effect on our page. We take advantage of the background-repeat property in CSS.
How Gradients Work: By repeating the graphic horizontally, we can fill a much larger area with the gradient effect. 200 pixels high To make web pages load faster, most web designers make their gradients just 1 pixel wide. 10 pixels wide
We can use horizontal gradients to style our pages also. Gradient Example: <head> <style type="text/css" media="all"> .header { width:800px; height:200px; background-image:url('gradient.jpg'); background-repeat:repeat-x; } h1 { text-align:center; color:white; </style> </head> <body> <div class="header"> <h1>Gradient Example</h1> </div> </body> We can use horizontal gradients to style our pages also. Many XHTML elements can use gradients as their background images: <body>, <div>, <table>, <tr>, <td>, etc. Gradient Example
Creating Gradients: Gradient files are created using graphics applications such as Adobe Photoshop. They can also be created at no cost by using online resources, such as tools.dynamicdrive.com/gradient/ : Choose which type of gradient. Choose dimensions of gradient. Set the start and end colors. Choose a file format. See a preview of the gradient.