CODEWITHSUNDEEP
csslinear-gradients
StudioTime
StudioTime

Reputation: 23989

Multi-color bar in css - ok in Firefox but not others

I am using the following to create a 100% width multi-colored bar which runs across the page.

In Firefox its ok but all other browsers it's empty, no colors.

Here's the CSS:

.colorBar {
position: relative;
height: 0.5em;
background: -moz-linear-gradient(left center , 
            rgb(231, 82, 57) 0%, 
            rgb(231, 82, 57) 12.5%, 
            rgb(255, 150, 28) 12.5%, 
            rgb(255, 150, 28) 25%, 
            rgb(255, 204, 39) 25%, 
            rgb(255, 204, 39) 37.5%, 
            rgb(252, 230, 47) 37.5%, 
            rgb(252, 230, 47) 50%, 
            rgb(205, 227, 91) 50%, 
            rgb(205, 227, 91) 62.5%, 
            rgb(130, 204, 51) 62.5%, 
            rgb(130, 204, 51) 75%, 
            rgb(65, 190, 206) 75%, 
            rgb(65, 190, 206) 87.5%, 
            rgb(4, 156, 219) 87.5%, 
            rgb(4, 156, 219) 100%) 
            repeat scroll 50% 0px transparent;
background: -webkit-linear-gradient(left center , 
            rgb(231, 82, 57) 0%, 
            rgb(231, 82, 57) 12.5%, 
            rgb(255, 150, 28) 12.5%, 
            rgb(255, 150, 28) 25%, 
            rgb(255, 204, 39) 25%, 
            rgb(255, 204, 39) 37.5%, 
            rgb(252, 230, 47) 37.5%, 
            rgb(252, 230, 47) 50%, 
            rgb(205, 227, 91) 50%, 
            rgb(205, 227, 91) 62.5%, 
            rgb(130, 204, 51) 62.5%, 
            rgb(130, 204, 51) 75%, 
            rgb(65, 190, 206) 75%, 
            rgb(65, 190, 206) 87.5%, 
            rgb(4, 156, 219) 87.5%, 
            rgb(4, 156, 219) 100%) 
            repeat scroll 50% 0px transparent;
background: -ms-linear-gradient(left center , 
            rgb(231, 82, 57) 0%, 
            rgb(231, 82, 57) 12.5%, 
            rgb(255, 150, 28) 12.5%, 
            rgb(255, 150, 28) 25%, 
            rgb(255, 204, 39) 25%, 
            rgb(255, 204, 39) 37.5%, 
            rgb(252, 230, 47) 37.5%, 
            rgb(252, 230, 47) 50%, 
            rgb(205, 227, 91) 50%, 
            rgb(205, 227, 91) 62.5%, 
            rgb(130, 204, 51) 62.5%, 
            rgb(130, 204, 51) 75%, 
            rgb(65, 190, 206) 75%, 
            rgb(65, 190, 206) 87.5%, 
            rgb(4, 156, 219) 87.5%, 
            rgb(4, 156, 219) 100%) 
            repeat scroll 50% 0px transparent;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25) inset;
}

Called simply like: <div class="colorBar"></div> so question is how to make it all browser compatible

Here's a fiddle

Upvotes: 0

Views: 992

Answers (1)

Nix
Nix

Reputation: 5998

The syntax is slightly different in various browsers.

Is this closer to what you are looking for? (just added the standard, no vendor prefixes)

background: linear-gradient(90deg,
                rgb(231, 82, 57) 0%, 
                rgb(231, 82, 57) 12.5%, 
                rgb(255, 150, 28) 12.5%, 
                rgb(255, 150, 28) 25%, 
                rgb(255, 204, 39) 25%, 
                rgb(255, 204, 39) 37.5%, 
                rgb(252, 230, 47) 37.5%, 
                rgb(252, 230, 47) 50%, 
                rgb(205, 227, 91) 50%, 
                rgb(205, 227, 91) 62.5%, 
                rgb(130, 204, 51) 62.5%, 
                rgb(130, 204, 51) 75%, 
                rgb(65, 190, 206) 75%, 
                rgb(65, 190, 206) 87.5%, 
                rgb(4, 156, 219) 87.5%, 
                rgb(4, 156, 219) 100%) 
                repeat scroll 50% 0px transparent;

http://jsfiddle.net/mNZDP/6/

90deg simply means "go from left to right". Personally I think it's easier to understand than the longer "left top, right bottom" (or whatever). If you don't provide a directional argument, it will default to a zero degree rotation – which means, it will go from top to bottom.


A bit on vendor prefixes:
Chrome, Opera and IE10+ use the standard. If you need to support Android, iOS6 (or lower) or Safari 6 (or lower), you need the -webkit- prefix.

IE has never used a prefix for gradients (people who tell you to use -ms- are filthy liars), so if you need to support IE9 or lower, you need some kind of fallback.

You probably won't need the -moz- or -o- prefix, except in special cases.

Beware: Older versions of Webkit (say, on Android 2.3) use a different syntax.

Check the spec for more details: http://dev.w3.org/csswg/css-images-3/
Also checkout Can I Use to see which browser supports what.

Upvotes: 3

Related Questions