CSS3 Gradient Generator

I started looking into CSS3 gradients and asked some of my friends for some help.  I had assumed they already played with this in CSS3.  While I did not get a nice explanation of things I did get a great link to a CSS3 generator.  One drawback, everywhere I have looked, it appears that IE9 does not support gradients, although you can pull this off in IE7 and IE8.

CSS3 Generator By Eric Hoffman and Peter Funk

After a little more searching I found a post by CSS3 Wizardry that appears to have made a little work around for IE9.  He uses SVG to create the gradient.  You can read his blog post here.

A good idea from CSS -Tricks is to still use an image, kind of like a fall back plan.  The images will not load if the other methods are used to create the gradient. Playing around with it in IE8 and Chrome it seems that IE8 still loads the image, but Chrome does not. Well, at least you can right click the image in IE8 to save it, so I assume it is loading it. When I do not use the image as a fall back IE8 does not give you that option.

I thought I would throw in a couple of examples of what I used after all this stuff. You will notice it still uses an image as backup. One is a red gradient for alerts and a modified one like it for validation summary controls. The other is a yellow one for informational feedback.

.alert
{
    background-color: #FFCFC9;
    background-image: url(images/light-red-bg.png);
    background-repeat: repeat-x;
    border: 1px solid #DD3C10;
    color: #000000;
    padding: 5px
    
    background-image: -moz-linear-gradient(top, #ffffff, #ff0000);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#ff0000));
    background-image: -o-linear-gradient(top, #ffffff, #ff0000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000');
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')";
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    background-image: linear-gradient(top, #ffffff, #ff0000);
}
.info
{
    background-color: #FFFFCF;
    background-image: url(images/gradient-yellow.jpg);
    background-repeat: repeat-x;
    border: 1px solid #E8E8A4;
    padding: 10px;
    
    background-image: -moz-linear-gradient(top, #ffffff, #fff721);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#fff721));
    background-image: -o-linear-gradient(top, #ffffff, #fff721);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fff721');
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fff721')";
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    background-image: linear-gradient(top, #ffffff, #fff721);
}
Advertisements

About SheldonS

Web developer for over 15 years mainly with Microsoft technologies from classic ASP to .NET 4. Husband, father, and aspiring amateur photographer.

Posted on May 17, 2011, in CSS. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: