The Next Big Thing in CSS
Contributed by: John Barreiros
Ah, WebKit, you've done it again.
Last couple of weeks, you may have come across a post or two discussing downloadable fonts. This came about after Apple WebKit announced support for the CSS @font-face rules.
While I agree that custom typefaces will be great for enhancing the web experience, I want to remind everyone about another WebKit first; CSS multiple background images.
A little over two years ago, WebKit announced support for multiple backgrounds and sadly, today, WebKit/KHTML based browsers (Safari, Omniweb, etc) are still the only ones offering support. Lame!
Across the board support for multiple background images will change the face of web design as we know it. Effects that are tedious or hacky at best will become a breeze and fluid layouts will be easier to implement and become more visually intricate.
Take for example the infamous rounded corners box. There certainly isn't a shortage on the number of ways to achieve the effect. Almost every method shares one thing in common, the addition of extraneous markup in the form of extra divs and/or spans.
In contrast, using multiple background images removes the need for extra markup. Check out the syntax!
The HTML
The CSS
#mybox {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
Quite simple, no? The syntax allows you to layer as many images as you want.
Mozilla, IE and Opera, what are you waiting for? Stop waiting! Usher in the next big thing by adding support for CSS multiple backgrounds.
Comments
Post new comment