All you disco-dancing designers out there (no more anticipation of alliteration) have been loving the new features CSS3 provides for making websites look cool in an easier, less hackish, and more straightforward fashion.
Features like CSS3 gradients, drop shadows, rounded corners, animations, and opacity are giving us the promise of less time spent in Photoshop, fewer horribly nested <div>s, more flexibility, and more fun! Not to mention more time down at the pub, excitedly showing your friends your latest cool experiments on your iPad, while sipping on a smooth glass of ale with an intense air of self-satisfaction and smugness. Face it, most of us have enjoyed such a moment!
The new breed of CSS3 shizzle even allows a self-confessed design amateur like myself to produce some fairly tasty looking designs. CSS3 is here, CSS3 is fun, and CSS3 allows us to evolve the look of the web as we go. At least, that’s the theory. But the reality is a bit different:
- On both desktop and mobile (and other alternative browsing devices) there are rendering engines out there other than Webkit. (Many designers out there forget this, and don’t consider the fact that it isn’t that hard to make the new CSS3 features work in other browsers, too.)
- Some browsers in use today support a reasonable set of features, while some support none at all.
- Some of us have real live clients who want their websites to look pretty much identical, even across older browsers.
Ok, I’m probably not saying anything that you don’t know already. But putting our fun experiments aside, what CSS3 stuff can we really start using in a wide variety of production sites, right now, without having to wait 10 years until IE6 finally dies of old age and we have to start learning CSS4?
I won’t cover anything approaching all of the features found in CSS3, as, well, I’d be here until Christmas and miss Coronation Street. For now, I will get down to business and look at some of the basic CSS3 yumminess we all know and love, and how to make it as cross-browser as possible:
- Linear gradients
- Drop shadows
- Opacity
- Rounded corners
- Web fonts
A suitable example?#section2
To illustrate my points, I’m going to create a funky little bling box and use it as my playground. Here’s what it looks like in the latest versions of Opera, Firefox, Chrome, and Safari:
Fig. 1: CSS3 example as shown in a browser that fully supports CSS3.
We will make some updates as we go along. You can view the initial bling example running live: feel free to do some testing and updates of your own, as I’m sure you can get it looking tastier than I can.
In this example, I’ve taken a simple HTML5 page with a <section> element containing some content, and blinged up that <section> with some fairly gratuitous CSS. I’ll not walk you through all the code, as you would find that tedious; I will, however, point out a few of the more interesting features.
Web fonts#section3
To start with, I went to Font Squirrel, found a fairly nice looking font, and then used the @font-face generator to create cross-browser code for including my font which will work across pretty much any browser:
@font-face {
font-family: 'MEgalopolisExtraRegular';
src: url('megalopolisextra-webfont.eot');
src: url('megalopolisextra-webfont.eot?#iefix')
format('embedded-opentype'),
url('megalopolisextra-webfont.woff') format('woff'),
url('megalopolisextra-webfont.ttf') format('truetype'),
url('megalopolisextra-webfont.svg#MEgalopolisExtraRegular')
format('svg');
font-weight: normal;
font-style: normal;
}Rounded corners#section4
To make my example Web 2.0 compliant, I made sure to give my box at least one rounded corner:
border-radius: 30px 0 0 0;Text shadows#section5
Next, I included several text shadows on the h1 to give it a rather nice-looking 3D effect:
text-shadow: 0 0 1px #000,
0 0 1px #aaa,
0 0 2px #999,
0 0 3px #888,
0 0 4px #666,
0 3px 3px rgba(0,0,0,0.5),
0 4px 10px rgba(0,0,0,0.5);I also included a simple text shadow on the paragraph to ensure readability if darker colors are chosen for the background color:
text-shadow: 1px 1px 1px #bbb;(Note: inspiration for my text shadow effect was taken from the rather masterful Jan Henrik Helmers.)
Box shadows#section6
I also added multiple box shadows, including multiple outer box shadows to give the box a more natural feel with multiple light sources, and an inner box shadow (specified by the inset keyword) to give the box some depth:
-webkit-box-shadow: 5px 5px 20px #000,
1px 1px 1px #000,
10px 10px 70px #333,
inset 10px 10px 20px rgba(0,0,0,0.4);
box-shadow: 5px 5px 20px #000,
1px 1px 1px #000,
10px 10px 70px #333,
inset 10px 10px 20px rgba(0,0,0,0.4);Note: I’m including the -webkit- prefix version; as of the time of this writing, Safari still needs this for box-shadow support. You should always put the non-prefixed version last when using vendor prefixes, so that when browsers stop using the prefix and support the final version, the non-prefixed version will override any different behavior exhibited by the prefixed versions earlier in the source.
Linear gradients#section7
Linear gradients are currently supported across all of the newest browsers with vendor prefixes. We therefore need to add a few lines to get them working cross browser. For my blingtastic example, I have added a white gradient going diagonally across the box at 60 degrees to give the box a nice bit of texture:
background-image: -ms-linear-gradient(60deg, rgba(255,255,255,0),
rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
background-image: -moz-linear-gradient(60deg, rgba(255,255,255,0),
rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
background-image: -o-linear-gradient(60deg, rgba(255,255,255,0),
rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
background-image: -webkit-linear-gradient(60deg, rgba(255,255,255,0),
rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
background-image: linear-gradient(60deg, rgba(255,255,255,0),
rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));Opacity#section8
You’ll notice above that for the linear gradients and inner box shadow I’ve used RGBa colors, e.g., rgba(255,255,255,0.2). I’m not varying the color channels, only the alpha channel, so I’m using just pure white and black with varying transparency. The color you see is actually the background-color shining through from behind. This is a great technique in many ways: browsers that don’t support linear gradients will still show a background colour, which is important for readability, and you can simply vary the background-color value to create different color schemes with the effect maintained:
Fig. 2: The same code, but with background-color: #0000a6;.
Crashing down to reality#section9
Great! The design looks cool, and we can go back down to the pub, to show off our groovy experiments again and perhaps break it up a bit by sniggering as we recount the World of Warcraft jokes in The Big Bang Theory. Right? Well, not really. We have a problem. The design is looking less than great in slightly older browsers, and terrible in really old browsers. What should we do?
To start, in order to get browsers to treat the new HTML5 elements properly, we need to set them to display: block; in our CSS:
hgroup, article, header, footer, section {
display: block;
}Next, to get IE to permit styling of these unrecognized HTML5 elements, we need to create instances of them in the DOM, like so:
<script>
document.createElement('article');
document.createElement('section');
document.createElement('hgroup');
document.createElement('header');
document.createElement('footer');
</script>Here’s how things are looking in some older browsers:
Fig. 3: Firefox 3.6 on Windows: most of the features apart from the web fonts and text shadows are missing.
Fig. 4: Safari 4 on Windows: again, most of the features apart from the web fonts and text shadows are missing.
Fig. 5: Opera 10.60 on Mac: apart from the gradient, things are pretty good in Opera.
Fig. 6: IE 9: most of our design is there, but text-shadow is not supported, and the box shadows look weird.
Fig. 7: IE 6–8: pretty much everything is missing, except for the web fonts.
Your choice of testing browsers may vary of course, depending on your target audience and other factors.
Picking up the pieces#section10
I am mainly going to worry about IE here, as most of the other browsers get updated pretty regularly, while IE suffers from “old version lock in” syndrome.
Given that, the most reliable way to fix our cross browser issues is to use JavaScript. Yes, I know: it’s less than ideal to use JavaScript to make up for a lack of CSS support, as some users may have it turned off, and you might also find that your pages suffer significant latency as a result of the extra number crunching. But I tend to think of it this way: if a user is browsing the web with JavaScript turned off, their web experience will be pretty crappy anyway, so the loss of a few visual effects is not going to dramatically affect them. In terms of slowing down your pages, you’ll have to judge this on a case-by-case basis.
If you’re antsy, you can test my updated version of the bling example now; let’s talk about how I got there.
CSS3 pie#section11
The main little helper we’ll look at is CSS3 pie, a JavaScript library that adds support for border-radius, box-shadow, gradients, and RGBa colors to older versions of IE.
Read the CSS3 Pie getting started documentation for instructions on how to use it. The short version is that you download CSS3 pie, unzip it, upload it to your web server, then add the following declaration to all of the CSS rulesets that you want CSS3 Pie to make compatible with IE:
behavior: url(path/to/PIE.htc);We also need to use a special -pie- prefixed version of the background-image property we are using to apply the CSS3 gradient, and change that particular property to read background, not background-image, as CSS3 Pie doesn’t support the longhand values, just the shorthand. The new addition therefore looks like this:
-pie-background: linear-gradient(60deg, rgba(255,255,255,0),
rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
The old IE versions now render the design like this:
Fig. 8: The example as rendered in IE8 with CSS3 pie used to add support for the CSS3 stuff.
Now we’re getting there, but what’s with the background color? The answer I found, after a little bit of digging in the CSS3 Pie docs, is that while CSS3 Pie allows IE to render RGBa colors, it can’t render the alpha value; instead, it renders the RGB channels as fully opaque. We are using transparent white variants for the gradient, so it comes out as white. What we need to do here is change the -pie- prefixed background declaration to use solid, non-transparent colors that IE can read properly.
To work out which colors to use, I rendered my bling example in Opera with the inset box-shadow disabled and used the Opera Dragonfly color picker utility to work out which colors were at the edges and middle of the gradient:
| Original value | rgba(255,255,255,0) on top of #a600a6 | rgba(255,255,255,0.2) on top of #a600a6 |
|---|---|---|
| Updated value | #a600a6 | #b630b6 |
With that information, we can update the CSS3 pie background line to:
-pie-background: linear-gradient(60deg, #a600a6,#b630b6 50%, #a600a6);This does take away some of those flexible advantages we talked about earlier in the “Opacity” section, but it now gives us the following output in IE:
Fig. 9: The example as rendered in IE8 with CSS3 pie used and a fix for the gradient.
Much better! So the only things we are missing now are the text-shadows and the inset box-shadow, neither of which CSS3 Pie supports. This is a bit of a pain, but I’m sure you’ll agree that the result is now much nicer in old versions of IE.
Where do we go from here?#section12
I don’t currently have an answer to the inset box-shadow issue; let’s hope CSS3 Pie improves its range of support soon. For text-shadow, there is a library called IE CSS3 that works in a very similar way to CSS3 Pie, and can add limited text-shadow support to IE; I’ve added it into my final example:
Fig. 10: The final example as rendered in IE8 with limited text-shadow support via IE CSS3 library.
As you can see, it only works on simple text shadows, and not multiple text shadows, so take it or leave it. You could also consider faking text shadows using IE filters, but you will be labelled unclean, and they are proprietary functions that can result in an additional performance hit. See Cross browser box shadows for an example of IE filters in action.
Why not just use jQuery?#section13
This is a good question; you could probably achieve cross-browser support of CSS3 elements using a JavaScript library and be done with it. If you’ve got the skills, then go for it, but I’d argue this way is easier. All you need to do here is add some modified CSS and JavaScript links; you don’t need to write a bunch of JavaScript. This makes it more pure, and certainly more accessible to those of us who aren’t much good with script (like me). Think of it as a small stopgap until we don’t need to support those pesky old browsers any more.
Summary#section14
I hope you have found this exploration useful. If you have more ideas about making this blingtastic stuff work across browsers, share them in the comments!
Hello Chris,
I am delighted to see the *ONE* round edge in IE as worked out in demo example via CSS3 PIE. Around an year back, I gave a shot to this library for round corner stuff. But was not able to see that effect. Nice fixing to IE! :- )
Yup – CSS3 pie has come on nicely! It is a shame about the limited opacity support though, and I wish they’d add support for text-shadow as well.
Chris,
Thanks so much for the article. I have to deal with a lot of browser compatibility in my web design work. I was wondering if you could post link to a live example of the ie compatible “finished product.” I’m curious to see how it fairs in IE 6… the less images I have to use the better!
I have been using all of these CSS3 techniques on my clients sites for some time. They work great and degrade very gracefully. I’ve never heard of a client even noticing the difference. I’ve never had to bother with pie. I just learned to live with gracefully differences between browsers. Glad to see there is an option though.
I didn’t, however, realize that you could do multiple text and box shadows. That is going to be very handy. Thanks!
Nicely written article, Chris! Thanks for the great coverage of PIE (I’m its creator).
You’ll be happy to know that proper text-shadow support is currently in the works as well as opacity support in gradients. 🙂
Great article… CSS3 just rocks hard!
I have to say though, I’m am utterly sick and tired of spending more time doing my job for the sake of Internet Explorer.
Thank you Chris. Great Article. CSS3 is awesome!
hi all – thanks for the nice comments about my article! It makes me feel very happy to read them 😉
Some answers to your comments:
@bzell – sorry about that – I forgot to add it to the article 😉 You can find the final version at http://people.opera.com/cmills/bling/
@garrettmoon – thanks for the comment – it is nice to hear that you’ve had success with clients being accepting of browser differences and graceful degradation. This is the kind of attitude that I am really trying to push with the community and businesses in general. The old fashioned obsession with pixel perfect designs across all browsers really isn’t helping the Web evolve.
@lojjic – thanks for the updates about what’s coming up in PIE, and simply, thank you for an awesome and really helpful piece of JS!
@DougC – I feel your pain dude. At least PIE allows non-scripters like me to do this kind of thing more easily. If you just put it into your standard starting template, then it’s often no more work at all, beyond the initial set up.
@Top Web Design Company – cheers!
Really great article.
Good idea to show cross platform compatibility for your coding because most of designers who uses new features of CSS3 often tend to forget about older browser, but as you said, except IE, all the famous browser usually get updated.
Nice fix for Internet Explorer.
Awesome reading!
George.
No matter what, I always have a problem, from CSS1 to 2 had issues with IE and various browsers, then they caught up, then on to three and more issues, finally, again, caught up. But with soooo many versions of browsers, soo many versions of css, it’s like i have to spend more time researching and testing, YUKK! personally, i just build simple stuff, lowest common denominator, until we all get along, i’m just going to wait.
“)
Thanks George!
I can totally understand and respect your opinion here. I don’t think there is any right or wrong answer here, and you should always do what is best for you, as long as your work follows best practices such as accessibility, of course. I am pretty “Web 1.0” in my outlook, and will always choose accessibility/good SEO/flexibility etc. over gorgeous eye candy, if there is a choice.
But when you can achieve the best of both worlds, as in case like my example here, without too much hacking/hassle, then I think “why not”?
Excellent work George.
I really think this should be a huge topic/central idea/crusade:
” ..if a user is browsing the web with JavaScript turned off, their web experience will be pretty crappy anyway, so the loss of a few visual effects is not going to dramatically affect them.” And furthermore I think that should go along with viewers who refuse to upgrade/switch their browsers.
I also found the “Jan Henrik Helmers” link very interesting and creative.
Good stuff sir. Kudos to you and your keyboard.
-Graham
alluringmedia.net
FF3.6 supports gradients, box-shadow, and border-radius via the -moz- vendor prefix, e.g. -moz-border-radius.
The big issue there is border-radius does not work for images, which you can work around by making a clipping path in SVG.
Thanks for the comments Graham!
Jan Henrik Helmers used to be one of our UI/graphic designers at Opera – a very talented chap.
As for the central crusade – this is quite a contentious issue. Unfortunately for a number of people, it is not a case of refusing to upgrade or have JavaScript turned on – many people work in corporate/government environments where they are locked into such situations, due to mad security policies, or mission critical apps that only work on IE6 or 7.
So generally, my attitude is “all functionality/content should be usable in all browsers, with JavaScript turned off, if at all possible”.
“Styling? not so much.”
thanks for the clarification stormsweeper – I will update my demo when I get the chance.
Theres is some great stuff to watch and think about but for some of us implementation of it will be in the (hopefully) near future as there are just too many old browsers out there for business sites.
Cheers though a great help
Hi Chris,
Good article, I’ve been toying with the idea of a html 5 / CSS3 rebuild for a client of mine. With a good chunk of the world gone iThis & iThat crazy scalable GUI’s are fast becoming a must have.
As always using the benefits of the latest browsers creates design, layout and even display issues for the older ones. I however am of the old fashioned type and pixel perfection across as many possible browsers and platforms is a must!
So I just wanted your opinion on possibly using a mix of CSS3 @fontface and .svg images. Support of the later has pretty much rolled out across all browsers. Then I stumbled upon this piece of javascript by Alxis Deveria written way back in 2007! G@@gle SVG Image and Background Image Replacer.
Which would allow older browsers in theory to replace the .svg images with .pngs or .jpg’s without having to code CSS for older versions of IE.
With the right mix of CSS3, @font_face, .svg and a dash of js maybe there is still some room left for pixel perfection? But more importantly a quick way to work around old browsers while playing to the strenghts of the new. Going to take a stab at this approach I’ll let you know how it pans out in a few weeks!
Handy article, very nicely written. However, since reading Andy Clarke’s “Hardboiled Web Design”, my interests in the outdated browsers are at a minimum. I’ll browser test the layouts to make sure there are no mistakes with the actual build, but it doesn’t worry me if a design looks a little empty in certain browsers because of heavy CSS3 use.
@neDKeny: thanks for sharing your ideas here. I like your thinking, and woujld be interested in seeing how this pans out. SVG is a more and more viable solution for such things now, especially seen as IE is starting to include decent support now, and it is also pretty easy to fake support for, with solutions such as the G@gle SVG Image and Background Image Replacer you found.
In terms of pixel perfection, I can understand the desire for a consistent look and feel across browsers/platforms, but I also think that it will be become less important, especially as it is become nigh on impossible to duplicate across alternative browsing devices such as mobiles.
@JackS11: I tech edited Andy’s book, and really enjoyed it! I can totally respect your stance on this. It is a brave, bold stance, and great if you can get away with it. Don’t you ever get clients complaining because it doesn’t look the same on their Windows XP machine? I still have to think about fallbacks carefully – a lot of the design work I do is for friends’ bands and such, and I always seem to get half the band moaning because it looks crappy on their Windows box.
It seems like every musician in the North of England uses bloody IE6/7/8 on Windows XP! So frustrating!
The main problem I find is with designs that make heavy use of opacity, RGBa colours and the like. they can look really bad when the transparency fails. Of course, IE6 doesn’t even support transparent PNGs properly! Aaargh! 😉
Great piece! Useful to see not only the variations but the renderings that go with them and doubly for the IE tips!
That’s where educating the client comes into play. And if the client doesn’t “get it”, I simply won’t work for them.
You should know how older browsers react when poked with CSS3 and you should, of course, test your sites in those browsers. But I don’t spend any more time trying to bend a project to pixel perfection.
Your sites just shouldn’t look broken in those older clients. Their users won’t know they’re missing something anyway.
The web has and will always be about the content. If the content is accessible by anyone on any machine, you’re in good shape.
Just my opinion.
For instance, the rounded corners do not work in Firefox versions before 4. Also, for gradients in IE, what are your feelings about using the Microsoft filter class in the CSS? Anyway, this is really useful, especially the CSSPie stuff, I hadn’t heard of that before. Thanks!
I was a bit naughty and forgot to include -moz-box-shadow for older versions of FF. Try it!
I don’t advocate using IE filters, as I think they are a relic of a bad old past, that we should cease propagating 😉
Thanks for sharing your opinion Rudolph – it is great to see you treading the bold path, and our jobs will become a whole lot easier when more designers/developers join you.
We are starting to try and educate our “kent web design”:http://www.eonic.co.uk customers that it is OK to have the site looking better in one browser than another. But sometimes it is a hard sell, we do a lot of work for larger ad agencies and testing in all browsers is now so entrenched in some big agencies it is like turning an supertanker.
Got me thinking and we have now published our policy on HTML5 and CSS3 for our customers…
“Browser Compatibility Policy”:http://www.eonic.co.uk/About-Us/News/3982-/Making-the-most-of-HTML5-and-CSS3
Thanks Chris
I want to be part of this but my I have to stand by cross browser compatability…for now. Therefore more work…..not yet thanks.
I am like those who stand by “cross browser compatibility” and think, as designers, we have to put how users will experience our contents before how easy it is for us to make them. Reading some comments regarding this topic made me think whom really those CSS features are for. (Those are really helpful by the way) Then I think those features cover somewhat minor design decisions, which could be even more insignificant from the viewers’ point, except cases that hinders display of actual content-mostly texts- like the case of showing no background color behind white text.
And I think we as designers should listen to the customers whether they want their web to be for all browsers or not.
Thank you for this article! I have been always stressed and overwhelmed by the fact that i should master javascript and even jQuery to create a beautiful website. Also constantly having to use photoshop and jpegs to add refined typography or animations seemed to be a hassle. It is great to hear that CSS3 is continuing to provide new features to make websites look cool in an easier and simpler way.
Effects like text shadows, rounded corners, box shadows, gradients, and opacity are basic effects that designers often use to create websites. Why use multiple tools when it can be simply done with css?
Even though there are kinks with CSS3 such as blurry shadows and some pixelations, it is definitely the right direction to make web designing more simple and easier to do and it only seems to be minor.
And in terms of Internet Explorer, I wouldn’t count IE as a problem to CSS3 since IE seems to be unsupportive of a lot of new features. It is frustrating to constantly see new features one after the other stating “IE not supported” or “might not work as well under IE”
For an amateur graphic designer such as myself, it is great to know that all of this information is readily available on the web. Thank you for the great article. It is great to know that you no longer have to deal with creating your own images and effects through image-editing programs like Photoshop. Small touches like rounded corners and drop shadows definitely have a huge effect on the overall aesthetic of any website, and it is great to be able to use these tools so easily through CSS. Although such simple effects are featured in your article, I am excited at the possibilities of new designs and tools to create a more aesthetically pleasing website through simple and pain-free additions to the code.
It is interesting to see the comparisons between the browsers and how they display the same information. It seems as though Internet Explorer is rather far behind in terms of integrating web design. It seems that most web designers are using other browsers any way, and IE will eventually become obsolete as design is rapidly becoming the “next big thing.” Hopefully some day in the near future they will all be more designer-friendly and make the web a much more visually appealing place to be!
I really appreciated the light-hearted and easily understandable way you have written this article in order to make head-scratching CSS for a beginner like me less intimidating. It is also great that you have linked to all examples where the CSS3 is running live. It is eye-opening to see all these new innovations and possibilities that can be done with CSS, no matter how eye-blinding and blingtastic they may be! The abilities to perform these little tricks live completely expand the way how website design can be presented. Nice that you also included the images of how it would look in different browsers incapable of handling all the blingtasticness, and how exactly to go about tackling this problem. It is sort of amusing even how much digging around and research has to be done in order to make the IE version the same as the others. As a web design beginner who does not know how to use jQuery or javascript at all, this is a wonderful way for me to increase my ability to create more dynamic-looking and appealing websites live without having to go back to Photoshop for every little change such as a color decision. Look forward to using these little tips and tricks soon in my own web design projects.
It’s very exciting to see all the new things that can be done with CSS3, and great articles like this one make the cross-browser nightmare less daunting.
I hope that we don’t all go overboard with CSS3 giddiness; as the new features become common knowledge, I’m envisioning a CSS3-pocalypse of body text set in display faces at low opacity, embossed and drop-shadowed on top of a red to green gradient backgrounded box with four different corner radiuses as well as inner and outer drop shadows. And the whole thing does a 360 on mouseover.
I would love to see a companion piece to this on the aesthetics and tasteful application of CSS3 bling (is that an oxymoron?).
Thanks for an insightful article! I am also glad that CSS is allowing for cross-compatability on browsers and opening doors for the way people view web pages. What is interesting to me is that CSS feels like it is always catching up to photoshop, like an outdated civilization trying to tap into all these great technologies that adobe has. It’s funny that we can celebrate the advent of a gradient on CSS when it’s been around for so long. But I don’t want to be a debbie-downer; I’m certainly glad that things are becoming more efficient for us through CSS3!
I certainly enjoyed your ‘bling’ aesthetics in your post and laugh a little that that can come from simple coding. I’m slightly curious as to how many designers will begin decking out sights in gradients and drop-shadows just because they can. But who can blame them when it just looks so nifty?
Why is it some people still insist in using old versions of IE such as IE 6 and 7? All they do is cause problems for us all when it comes to styling, no matter what CSS you use 🙁
IE should just drop or kill anything below IE9 because thats the only version that dont take a long time to get to work with good standards.
In fact, everyone thats still using something below IE9 should get a message saying it will self destruct in 24 hours if not updated to IE9 or even a better browser such as FF.