How to Convert an Image to CSS3

A special feature of the Ultimate Gradient Generator is the capability to turn your existing image into a CSS3 gradient that you can use on your site. This is an interesting way to define some complex gradients with little effort; note, however, that this feature works best with images like the one below.

Even if you provide a complex graphic, the resulting gradient will use only the colors on the left side of the image. Anything after the first color is ignored.

image0.jpg

Refer to the bottom to find the Import from Image button. Click this button and you see the bottom of the CSS area expand to include the form. You can obtain images from a location online or from your local hard drive. When you want to use your hard drive as a resource, click Browse to display a File Upload dialog box, locate the file, and then click Open.

image1.jpg

After you provide a source for the image, click Import. The Ultimate Gradient Generator imports the file and creates the CSS required to mimic the image and its applied gradient. You can then make tweaks and changes as needed to produce the desired result. After you’re done, you can save the CSS as usual and include the gradient in your application.

After you provide a source for the image, click Import. The Ultimate Gradient Generator imports the file and creates the CSS required to mimic the image and its applied gradient. You can then make tweaks and changes as needed to produce the desired result. After you’re done, you can save the CSS as usual and include the gradient in your application.

image2.jpg
blog comments powered by Disqus
Advertisement

Inside Dummies.com