Gradients in CSS3 are valuable addition supported by all modern browsers. No image needed!
CSS3 Gradient Code
.gradientBox {
background: linear-gradient(top, #ffb260 0%,#ff7f13 100%); /* W3C */
}But this code will not be supported in many older browsers.
All Browsers Compatible Code
Here’s fully compatible code, which can be used even in IE6:
.gradientBox {
background: #ffb260; /* Older browsers */
background: -moz-linear-gradient(top, #ffb260 0%, #ff7f13 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb260), color-stop(100%,#ff7f13)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffb260 0%,#ff7f13 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffb260 0%,#ff7f13 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffb260 0%,#ff7f13 100%); /* IE10+ */
background: linear-gradient(top, #ffb260 0%,#ff7f13 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb260', endColorstr='#ff7f13',GradientType=0 ); /* IE6-9 */
}Note that gradients filter code will not show in IE7 and below. It will show in IE8 and later.
Here’s what it will produce:
Test Gradient
There are more things that can be done, like gradients positions and gradient types, will post about it later here. This tool is excellent to create more complex gradients.
You have five “background” statements? Why? We don’t want to see a bunch of unnecessary BS code … show ONLY the code needed to generate the gradient in a modern browser that supports HTML5/CSS3.
I must me compatible 🙂
It’s all very well saying it must be compatible but you’re missing the point – if it’s not all going to go to hell in a hand-basket, THE BROWSER NEEDS TO BE COMPATIBLE WITH THE SYNTAX – not the other way round.
Take the stream of gibberish just to make IE do the same thing the other browsers do with simpler syntax. What is the point of that? They’re the largest corporation on the planet and after all these years they STILL can’t make a standards-compliant browser. Uninstall IE and get a REAL browser.
P.
🙂 You are forgetting, we build sites for customers, not to ourselves…
Amen.
Uh … who’s missing the point?
Great post! I agree in that you have to create for compatibility…
Nicely done! Compatibility is key. And yes, websites are developed for the client and not ourselves. Ignore those would-be whiners, they’re just a bunch of know-it-all bloggers anyways.
Good job. Disregard all the mean comments above. I don’t understand why people are getting so disgustingly mean when someone is trying to help.
I agree. this post is the first solution in google search.
thanks dude for timely help.
I just stumbled on this page again and had to laugh. I always find humor in the fact that the most arrogant posts on the Web are usually from the most ignorant posters. (Who probably use WordPress anyway, because they think it’s easier than learning how to actually do things, which it isn’t – it only presents its own set of problems.)
We struggle along as most of the industry grapples with being “standards compliant” and Microsoft begins to understand that it can’t bully the rest of the industry into doing things that are convenient for them alone (or are just plain faulty). We certainly have a long way to go, but we are much better off then we were 10 or even 5 years ago.
Those of us who have been developing for the Web for some time can remember days when 50% or more of the quote we provided a potential customer consisted of time spent to make pages compliant with the idiosyncrasies of Internet Explorer.
Times are changing and HTML5 and CSS3 are bringing in whopping changes, making the developer’s job much easier with the ability to create more dynamic, responsive sites in less time – good for the developer as well as the consumer. But, as professionals, we are quite aware that most consumers have no awareness of these changes and many are still running IE7 in Windows XP, and some are viewing the output on a CRT.
Poster Patrick Mann (above) who, according to his (WordPress) Web site, puts himself forward as some sort of HTML5/CSS3 guru, states near the top of his home page “I’m unable to make this nav bar work here as it should, so I’m posting up an image of the actual nav during use, so you have some idea what the heck I’m talking about.”
Okay … so much for your comments, Patrick! (not to mention your professionalism)
And then we have some person who describes his/her self as “HTML Coder” and is arrogant enough to feel they have to expertise to lecture you on what types of code example you should display, which is actually a limitation to common sense and good development practices.
So, to all you arrogant asses out there, please stop cluttering up the Web with your nonsense so the rest of us can have reasonable discussions, share our experiences and make the world a better place.