1 / 5

Gradients

Gradients. Gradients. A gradient is a type of background image that gradually changes from one shade of color to another:. Gradients can be horizontal or vertical. Horizontal is more common, as the background color changes from the top of the page down to the bottom.

jameschill
Download Presentation

Gradients

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Gradients

  2. Gradients A gradient is a type of background image that gradually changes from one shade of color to another: • Gradients can be horizontal or vertical. Horizontal is more common, as the background color changes from the top of the page down to the bottom. • There is no need to use a large image file when building a gradient effect on a page. We take advantage of the background-repeat property in CSS. • Gradients can make our web pages more polished and visually appealing.

  3. How Gradients Work Here is a simple horizontal gradient image using two shades of blue: As the small image is repeated, the tiling creates a smooth background effect. More complex gradients can run through multiple different colors from end to end. 800px In this example, the vertical gradient is 20px wide. In practice, most web designers use gradient images that are a single pixel wide, in order to minimize image file size and to make the page load a little more quickly. 20px

  4. Gradient Example By using the gradient image for the background and with the background-repeat property, we can create a pleasant visual effect: body { background-image: url('gradient.jpg'); background-repeat: repeat-x; } h1 { color: #F1F8FE; } ... <body> <h1>Welcome to my website!</h1> </body> Background gradients can be applied to other XHTML elements, including <div>, <table>, <tr>, and <td>. A powerful new feature of CSS3 is to create complex gradients programmatically, i.e. without the need for an actual image file.

  5. Creating Gradient Images Gradient images can be created using graphics applications, such as Adobe Photoshop. There are also free tools and websites available, such as tools.dynamicdrive.com/gradient/ : Select the type of gradient. Specify the dimensions. Set the start and end colors. See a preview

More Related