Tom Davenport - 

CSS might sound like a language that only geeks can decipher, but its accessibility and power has turned the web into a beautiful playground. This is the language of design, and it’s about to blow your mind.

We all know there’s something called HTML that powers the internet, but it only represents the content on a page like words and pictures. Alone it looks ugly as sin, but a few lines of CSS and simple HTML can be transformed into any style you like — and crucially, can be changed with ease in the future.

What is it about CSS that is fuelling the digital design revolution, and what cutting-edge techniques are on the way?

Let’s start with responsive web design, a technique which figures out the best way to display content depending on the size of your browser window. Perfect for the era of tablets and smartphones.

A chap called Ethan Marcotte came up with the concept and brought it to the mainstream with his influential book. His live example of responsive design that accompanies the book remains one of the most impressive examples available — try dragging the window size from full-screen all the way down to mobile-width. Nifty stuff.

In a world with thousands of different devices, screen sizes and aspect ratios, this matters. Harry Roberts who runs csswizardry.com says responsive design has changed the way developers build websites. “It’s accessibility at its most basic; making sure anyone in any situation can access your content,” he said. “Responsive web design is relatively new, and people are still honing their approach, but it’s been quite the game changer.”

Here’s a couple of examples from Media Queries, a blog that documents the best of responsive design. The left image is how the same content will appear on a smartphone, with tablets in the middle and desktop on the right:

Image credit: Stephen Caver

Image credit: Sasquatch Festival

Another subtle but oh-so-pretty development is transitions, better known to you and me as animations.

A good showcase of simple transitions is by Dan Cederholm who literally wrote the book on CSS3 for Web Designers. Try the sample site and hover your cursor over images and links. Notice how menu items are softly highlighted, or how the newsletter signup box radiates a blue glow when you select it.

As a more striking example, recent experiments by Kesuke resulted in these live demos — try hovering over the buses on their site to see the whizzing animations in action.

CSS filters could reduce the need for web designers to photoshop images before posting them online. Sure, it might prompt a wave of sites that look like Instagram, but at least CSS allows designers to make up for it by just tweaking the code.

Developer Jenn Lukas is overjoyed at the potential for CSS filters. “They keep you out of image editors and let you tweak effects right with CSS. In this example, I examined the images for a site that did all the image production in Photoshop and recreated them in the browser.”

It’s not all about sepia-toned cats. Try this gallery by Code Player and hover over the images. Some transitions might look darn ugly for now, but designers will find a way to be tactful with these new effects — and some of them, particularly the ‘blur’ sample, look classy already.

These 2D effects might help make the web a prettier place, but newer techniques will take design literally into a new dimension. Examples of 3D CSS vary from the discreet to outlandish, but they’re all impressive.

Web developer Peter Gasston described the forthcoming wave of depth-inducing techniques at a conference last year:

“The web’s going to change quite a lot. It’s no longer going to be ‘documents’ that look flat and don’t do anything. A lot of people want the web to feel like the stuff they use in real life. Obviously you can go overkill with this … but the opportunity’s going to be there to create some amazing stuff.”

Be aware that the following links might not work in your browser, but if you’re running the latest Safari or Chrome you should be fine.

The best example — and I really mean the best website I have ever seen on the internet — is this spectacular page-shifting design by Steven Wittens. It combines CSS 3D with Javascript to make something so original that every other blog in the world should hang its head in shame:

As a more modest example, the Reeder homepage spins a 3D cube to reveal content:

This brilliant pop-up invite to Beercamp 2012 opens and folds while hovering in space like a real book:

And this demo concept of a first-person shooter by Keith Clark, rendered entirely in the browser, hints at some pant-wetting possibilities for the future of online gaming:

There’s one big problem with using brand-new CSS techniques: they only work on the latest browsers. If half your site visitors don’t even know how to run a software update, your designer needs to think twice about what they use.

“People are starting to realise that you can’t design for one version of the medium any more, and that there is no ‘normal’,” said Harry Roberts, but he’s positive, and thinks a variety of devices and browsers “lead to a much more considered approach to building websites.”

There are workarounds, of course. Developers talk of a need for features to ‘degrade gracefully’, which means that visitors running an old browser still see a functional site, sans effects.

Designer Sacha Grief says there’s no need to fret over giving every visitor the same effects. “Not every browser needs the same experience, and I firmly believe it’s better for a site to look awesome in [Safari and Chrome] and suck in Internet Explorer than be average everywhere,” he said. “So as long as the site is usable in every browser, I think it’s perfectly acceptable.”

But compatibility is constantly improving, and even Internet Explorer has caught up with the times. If anything, Microsoft’s inescapable ad campaign for IE 10 was nothing more than an expensive bid to bring its users out of the dark ages and push the whole internet forward a few steps. It might work.

Eventually the compatibility issues will fade away. The community of designers and developers, whose collaborative culture puts other industries to shame, will find new ways to define beautiful design, and anyone with a browser will be able to appreciate their efforts

It’s surprisingly easy to learn too — try starting with this free HTML & CSS course by Tutsplus and see where it takes you.

Thanks to Harry Roberts, Bruce Lawson, Jenn Lukas, Sacha Grief, Peter Gasston, Syd Lawrence, Chris Mead, and Adam Howard for their contributions to this article.

This week, we’re celebrating the many facets of modern design on Gizmodo UK, with a design theme week. Bookmark this page for all related stories, features, interviews and competitions, or contact us here with tips.