CSS3 fallback for older browsers

css gradient fallback
scott picture scott · Jun 3, 2013 · Viewed 6.9k times · Source

I have made a circle using CSS3, trouble is in older browsers (ie7 etc) the circle appears as a square.

I know I could use a background image as a backup, but doesnt this defeat the point of using code?

If i was to put background-image in, where would it go in the CSS?

.ButtonB:hover, .ButtonB.hover {
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(255, 255, 255, .1)),
        to(rgba(255, 255, 255, .2))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}

Answer

Blowsie picture Blowsie · Jun 3, 2013

Using the following will provide better support for a variety of browsers and will fallback to a solid colour when gradients are not supported, you could replace this solid colour with an image.

background: #0A284B;  /* for images use #0A284B url(image.jpg)*/
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

Related questions

How do I combine a background-image and CSS3 gradient on the same element?

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

Read More
Gradient borders

I'm trying to apply a gradient to a border, I thought it was as simple as doing this: border-color: -moz-linear-gradient(top, #555555, #111111); But this does not work. Does anyone know what is the correct way to do border gradients?

Read More
CSS3 Transparency + Gradient

RGBA is extremely fun, and so is -webkit-gradient, -moz-gradient, and uh... progid:DXImageTransform.Microsoft.gradient... yeah. :) Is there a way to combine the two, RGBA and gradients, so that there's gradient of alpha transparency using the current/latest CSS specs.

Read More