Gradients What are Gradients n n n Gradients

  • Slides: 5
Download presentation
Gradients

Gradients

What are Gradients? n n n Gradients are graphics files that gradually blend from

What are Gradients? n n n 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: 200 pixels high 10 pixels wide By repeating the graphic horizontally,

How Gradients Work: 200 pixels high 10 pixels wide By repeating the graphic horizontally, we can fill a much larger area with the gradient effect. To make web pages load faster, most web designers make their gradients just 1 pixel wide.

Gradient Example: <head> <style type="text/css" media="all">. header { width: 800 px; height: 200 px;

Gradient Example: <head> <style type="text/css" media="all">. header { width: 800 px; height: 200 px; background-image: url('gradient. jpg'); background-repeat: repeat-x; } h 1 { text-align: center; color: white; } </style> </head> <body> <div class="header"> <h 1>Gradient Example</h 1> </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: n n Gradient files are created using graphics applications such as Adobe

Creating Gradients: n n 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.