It’s been several months since I’ve done some web design (closing in on a year). I am wondering where the state of the art is as of today concerning rounded corners, box shadows, and stuff like that. Are professional web designers still using images and CSS (and adding HTML for rounded corners) or are you professionals relying strictly on not-yet-standardized CSS3?
Creating shadows and rounded borners is a snap in CSS3. It’s a pain to do it with images, especially when you have to add elements to the HTML like with rounded corners. But as some (or all) of it is not officially adopted in the CSS3 standard, which has not been finalized, there is always the chance things could change or not be adopted.
On the other hand, more and more browsers are supporting CSS3 features like shadows and rounded borders, even if it requires browser-specific CSS properties (like -moz-border-radius). And some of it is supported in older versions of Internet Explorer using filter statements in the CSS.
Pages will load faster with CSS3 as there are less file requests and images to render. But older browsers won’t see it. And I’m not sure what percentage of current web browsers are compliant with the CSS3 effects or if mobile devices are compliant at all. I don’t suppose anyone is using CSS transitions to replace jQuery sliding effects yet. (I hate jQuery!)
I notice a couple of newer websites using CSS3 for things like rounded borders and shadows. They degrade fine in non-compliant browsers.
I’m just wondering what I should do. So if I can find out what professionals are doing now, I’ll get an idea of which direction to go.
If you are a professional web designer and are going to pitch or develop a website for a paying client, what would you do?
Non-professionals are welcome to give their opinions, too. My main concern is what the pros are doing.
Personally, I only use CSS3 now, and either let older browsers fend for themselves or, if pressed, use a bit of JavaScript to get those effects working in older browsers. I think this is becoming a pretty common approach.
Now that IE6 is dead and IE7 is dying it is really only these using IE8 who don’t see all these effects which form a large enough group to possibly make it worth providing an alternative for. Personally I figure that if those people wanted to se the page the way it is intended then they’d upgrade their browser and that they haven’t means that they have chosen not to see those effects.
I use CSS3 for such tasks exclusively for all my clients. No more images and no fallback for older browsers. In fact, I don’t even use vendor prefixes anymore either.
I personally make it work nicely it modern browsers but have it gracefully degrade in older browsers, I don’t bother with JS animations and such unless the client specifically asks for it.
Also IE6 is just worth making readable, make it nice to the point where they can still see it but get no special treatment.
So far it looks like designers are embracing CSS3 and leaving the old methods behind. Maybe some more people will chime in. Thanks for your input so far.
When the effect is not a vital part of the integrity the design I use CSS3. hint: effects are never a vital part of the design – well not worth going the archaic route anyway…
I started using Google Analytics again. So I’ll have some visitor browser version stats to look at and I’ll look for some national and global browser version statistics. I’ll compile a list of browsers that support CSS3 rounded corners and border shadows then see what percentage are using compliant browsers. Once the 50% mark is reached, there isn’t much sense in going back.
I always hated mucking up the HTML to put in rounded corners.
I’m not a fan of the gradients in CSS3 because the code is waaay bloated and there is too much difference between different browsers.
And in IE9 it doesn’t play nice with rounded corners. Unless you use svg … No thanks. I’ll just use images.
Maybe in IE10 cough
hey everyone, i noticed that using low to medium quality images works great, because of the every increasing bandwith of the internet it apears on teh screen quick to. Choosing to to use an image also successfuly works for old and new web explorers alike!
First time I used css3 PIE a lot of annoying problems with earlier IE and my nice shadows and rounded corners were solved.
Well worth using at the present moment, and forget adding extra mark-up instead.
When I get some spare time I might convert some older sites to using it too.
It’s a pleasure to finally use CSS3 and not have a billion DIVs in order to create some kind of effect. In the past I[/I] I used around 10 DIVs to create the rounded corner, and a further 10 more of the drop shadow, fairly bad now that I think of it. Went something like:
So ye, I hated images for drop shadows. I wanted flexibility to change colors on the fly, was easier afterwards.
I’m not a fan of the gradients in CSS3 because the code is waaay bloated
I find that using CSS gradients good for small buttons, it’s only an issue problem for large regions. CSS gradients are much slow on the page page. Only Chrome does a decent job. In fact the CSS gradients slowed by jQuery down, which made me think there was something up with the jQuery library, hardly the issue.
First time I used css3 PIE a lot of annoying problems with earlier IE and my nice shadows and rounded corners were solved.
I have a IE only script on the head of the document and specify the elements I want to have CSS3 in the alternative browsers. I don’t have all my elements which were in CSS3 in this, only the bare necesery. Remeber to include position:relative on the targeted tags. Hope this helps. I’ve already used PIE three times and I am fairly happy with it. I will probably use it on all my projects. Just doesn’t support text-shadow yet and alternative solutions seam bloated
Not sure if i’d consider myself a pro yet, but I have had paying clients and I would not use anything but CSS3 to visually enhance their website. I still use PNG fixes, maybe I should drop that too.
First off, I’d point out it’s NOT “images or CSS3” – since CSS3 gives us better tools for doing borders and effects with images via the border-image property. This makes a lot of sense as if you’re going to be doing anything more than simple rounded corners and a few shadows you’re still going to be using images to do it.
That said I’ve been using border-radius and box-shadow more and more – but when I do so it’s on elements I don’t CARE if people on older browsers get the fancy corners and shadows or not. Too many people are obsessed with pixel perfect cross browser or having goofy things like corners the same, bloating out their pages with idiotic javascript shivs for nothing like that CSS3 Prarie PIE, or worse neglecting their content… Which is the part people ACTUALLY visits websites for. Rounded corners, drop shadows, border images, they’re nothing more than flash with no substance – people visit websites for the CONTENT, not the goofy graphics you hang on it!
Which of course is part of why not only are most image heavy and layout element heavy websites are ultimately useless to end users and serve no real purpose apart from stroking the PSD jockey’s ego and draining the pocket of some suit who doesn’t know any better than to go “Oooh, pretty” as they click on the big blue E.
Oh noes, people using old browsers don’t get the new fancy effects that have ZERO ACTUAL IMPACT on the content or the layout… NOT THAT? I MEAN, IT’S ONLY THE POINT OF PROGRESSIVE ENHANCEMENT LEADING TO GRACEFUL DEGRADATION!!!
Though the mere concept of that is alien to the people who start out making their pretty little PSD filled with non-viable for accessible web deployment elements before they even have the content marked up. CONTENT FIRST!
Content > Markup > Layout > Appearance > CSS… As opposed to the PSD jockeys who do Appearance > Layout > Markup > CSS > Content.
But that’s actually the joy of CSS3 – it makes the whole “content first” design easier to do; it makes it easier to build the layout AND appearance in CSS, skipping the stupid “draw a pretty picture in photoshop then wonder why people keep complaining about broken layouts” approach.
I’ve been reading about how CSS3 gradients slow down page repainting. I haven’t tested this myself yet. I’m a little curious as to why this might be. I can’t imagine the browser would recalculate the gradient when repainting the page such as when scrolling. That would be highly inefficient. I would guess that future versions of browsers will get better at handling CSS3 features like gradients and shadows. Much of what I have read complaining about the performance hit of CSS3 gradients is a year old or more.
A Smashing Magazine article from April 2011 did a test of CSS3 versus the old-fashioned method of using images to do things like gradients and shadows with a dummy site. The writer’s opinion of CSS3 was favorable. Two similar sites were created one using CSS3 and the other using images for gradients and shadows. I had to start Firefox to view the CSS3 site since Opera doesn’t support radial gradients. In Firefox, the radial gradient was a little more dithered (I think dither is the right term) than using an image and it also appeared the gradient radius was larger. But the CSS3 site still looked pretty good and while not a pixel-perfect clone of the non-CSS3 site, it was good enough in my opinion.
Granted it isn’t a very large page, but I didn’t notice any performance difference between the CSS3 and standard page when scrolling. And I’m using a 10-year-old computer.
Maybe someone can show us a link to a page with a gradient that slows down page repainting.
and alternative solutions seam bloated