How to Apply CSS3 Effects and Transforms in Dreamweaver
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver

How to Generate Images Using Gradient Image Maker on CSS3

You've already seen a number of other programs described that create gradient images. It seems as if every site, including CSS3, provides one. The Dynamic Drive Gradient Image Maker is different, though: It actually creates an image file, rather than creating CSS that eventually creates an image on screen.

The difference is important. Using an image means that the browser only needs to support images — something that every browser out today can do — but when using CSS, you need to know that the host browser actually supports the required level of CSS. You access Gradient Image Maker by clicking Gradient Image on the web Tools menu of the main page.

image0.jpg

The Gradient Image Maker sports a simplified interface. All you do is select the kind of gradient you want to create (horizontal, vertical, or diagonal), define the gradient size, and choose the colors you want to use.

When choosing a color, you can either click in an area in the color selector or you can type the hexadecimal code for the color you want to use. There's little flexibility in using this tool. It's specifically designed to provide a simple, quick means of creating a gradient.

When you're satisfied with the gradient, choose an image output format. The JPEG format will generally produce smaller files, while the PNG format will generally produce higher-quality files. Click Get Full Size Image and you see another tab open with the gradient image you requested. Right-click the image and choose Save Image As from the context menu to save the image to your hard drive.

There's a trick to using the image as a background. HTML supports a background attribute for the <body> tag. Supposedly this attribute is deprecated and you shouldn't rely on it being available forever. However, it still works in every browser (and on all platforms). The following code uses the background attribute, and will display a page with the gradient as a background image in the size requested.

<!DOCTYPE html>
<html>
<head>
 <title>Testing a Gradient Image</title>
</head>
<body background="Gradient.JPG">
 <h1>Testing a Gradient Image</h1>
 <p>Some Sample Text</p>
</body>
</html>

This technique does have the advantage of not using any form of CSS to display the image, but it's somewhat risky as future changes are made to how HTML works in browsers. For now, however, it appears that every browser on the planet still supports this particular method of displaying a background image (when some won't use the CSS method). This is what the gradient looks in action.

image1.jpg

The current way to use the image is to apply it using CSS. In this case, you apply it using the background property for the body style, as shown here.

<!DOCTYPE html>
<html>
<head>
 <title>Testing a Gradient Image</title>
 <style type="text/css">
 body
 {
  background: url("Gradient.JPG");
  background-size: 80px 80px;
 }
 </style>
</head>
<body>
 <h1>Testing a Gradient Image</h1>
 <p>Some Sample Text</p>
</body>
</html>

The advantage of this approach is that you can control the background size, origin, and other features. Using CSS, whenever possible, greatly increases the flexibility of using a gradient image. However, if you're going to use CSS anyway, it often pays to apply the gradient itself by using CSS.

The main advantage of using an image over pure CSS is that you can quickly swap one image for another, using any of a number of techniques to change the page appearance, without writing any new code.

blog comments powered by Disqus
CSS Code Hinting in Dreamweaver
Create a New Style Sheet in the CSS Styles Panel
CSS Web Design For Dummies Cheat Sheet
How to Use Safe Text Decoration in CSS3
Basics of MooTools for CSS3 Sites
Advertisement

Inside Dummies.com