Some Good Websites Using Pure CSS3

For those not as quite as chummy with web design lingo as they’d perhaps like to be – CSS stands for ‘cascading style sheets’ and is used to describe the look and formatting of any document written in a markup language. It is most commonly used to style web pages that have been written in HTML or XHTML, but it can also be used to change XML, plain XML, XUL and SVG documents. It is designed to separate document content (user-generated information) from document presentation – things like colour, layout and font.

CSS3 is one of the newer variants of this type of document coding and allows developers to build content rich web pages with relative ease. It provides higher quality effects, faster loading times, cleaner pages and better user interfaces. Needless to say, it’s rather popular with whizz-kid web developers at the moment.

Developers like Vasiliy Zubach, the man who last year rendered the iPhone 4 using nothing but CSS3 and JavaScript code – 3,395 lines of CSS3 code and 335 lines of JavaScript code to be exact. It’s hard to believe that something as endlessly complex as the iPhone 4 could ever be created and programmed without the use of visual images, but it was. Zubach was the first to achieve this mammoth task and attributes his success to the co-worker who first showed him that images could be made entirely from CSS3.

Zubach said “One day at my current job a co-worker showed me some cool icons made entirely in CSS3. If you know anything about CSS, you would have been amazed just as I was. I decided to go further.”

He’s not the only one who’s been experimenting with the capabilities of CSS3. If you’ve got a hankering to be amazed – check out www.clicktorelease.com and marvel at the fact that some clever clogs developer has managed to make realistically rendered CSS3 clouds! Another website is showcasing a CSS3 Zoetrope animation, designed and rendered using nothing but lines of code. Check it out at www.andrew-hoyer.com

There seems to be no end to the amount of cool things that can be created using onlyCSS3. If you look hard enough, you can find entire web pages crafted from the code – even high profile ones. Clothing brand Lacoste’s website is CSS3 based, as is branding agency Ony’s.

The next step for CSS3 development seems to be the creation of completely digital 3D worlds. There are already several intriguing experiments out there on the web – projects and trials that programmers have undertaken out of curiosity and a desire to push technical boundaries. Casting realistic shadows tends to be one of the trickier problems, as it just doesn’t lend itself to easy programming. It is possible though and it is something that a few talented developers have managed to achieve, by painstakingly calculating and drawing out hundreds of lines of corresponding CSS3code.

Though CSS3 does in theory make web design and development  a much more efficient and manageable process – web developers will be web developers and they usually do find an impressive way to complicate things. Technological marvels like the iPhone 4 don’t have to be rendered entirely from code, but it is a much more useful and expansive way to do build. Who knows what developers will be able to achieve with CSS in another ten or even five years time? If they can create realistic, moveable clouds using nothing but text now – it’s exciting to think about where the industry might be in a decade’s time.

Emily Steves is a tech writer and blogger

Comments