Authored by Primate

A rather awesome, informative
and witty blog about all things web

In the future, CSS shaders will rule the web

Image of chameleon

Did that chameleon just change colour or am I on mushrooms? (webkit only)

Welcome to 2013! The future has finally arrived and I couldn’t imagine a better time to write and speculate about what amazing things might happen soon in the realm of visual web development. And what does the future have in store for all of us web developers and designers? Well, say hello to CSS filters and shaders!

CSS filters

CSS filters let developers apply visual effects to elements of websites with the use of the handy filter property. Doesn’t that sound great, eh? Well, how many times have you seen a website design with black and white images that turn into colour ones on mouse hover? What use to required creating sprites with different images and some CSS background trickery (or even bits of Javascript) is as simple as it gets in the new era of CSS filters!

img { filter: grayscale(100%); }
img:hover { filter: grayscale(0%); }

In CSS, the filter property has a set of convenient predefined effects, grayscale being one of them whilst others include blur, saturate, and brightness. And if that didn’t blow your mind then let me just tell you this: imagine being able to recreate everything that a designer can do in Photoshop straight in a web browser. I’m not only talking about blurring, changing saturation, creating cool emboss effects or whatever it is designers do these days either.

Frankly, I don’t think there’s any limit to what can be done with CSS filters and that is thanks to CSS shaders.

CSS shaders (or the ultimate pixel manipulation tool any programmer might ever want)

Shaders are pieces of code which describe how pixels are processed by graphics hardware. They let programmers manipulate pixels directly and create any visual effect one could ever imagine. They are what lies at the very heart of modern computer graphics and their uses include cinema post-processing, video games and simulations (just to name a few things).

Shaders met the web for the first time with the introduction of WebGL, which allows for embedding of 3D graphics on websites. Whilst it was a really exciting step and opened up a lot of new possibilities (3D games directly in the web browser, 3D previews of products in e-commerce sites, nicer street view on Google maps etc.), it wasn’t actually that revolutionary as real-time 3D graphics had existed on the web in a stand-alone form for a long time thanks to Java applets and even Flash plug-ins. This time however, shaders will become an integral part of the process of website creation, not only a huge evolutionary step but also something that, in my opinion, should earn the status of revolutionary.

The evolution

I remember the days when any sophisticated designer’s whim involved a tedious amount of work with images and various types of trickery. A box with rounded corners would provide a full day’s work; add drop shadow to that and most developers would say something along the lines of “that’s impossible and certainly not doable in the budget”. These days seem to be long gone now (although they happened not so long ago!) and at Primate especially we embrace new technologies and CSS3 goodies.

Now a box with rounded corners is as much work as typing a line of CSS box-radius code whilst adding a drop shadow to it is equally as simple. We use less and less bitmaps and try to recreate all effects using what browsers give us. The first release of the Harviestoun Brewery website, for instance, comes in handy as a great example of this – the entire site used only two bitmaps, one for the top logo and another for the background. All of the gradients, shadows and highlights (even that animated navigation!) are pure CSS.

Granted, the site had quite a minimal design but with shaders even more complicated sites are equally as simple. Say your designer wants a navigation panel to look like it’s made of glass – not a problem! You can write a shader that will do exactly that and you don’t even have to ask him to provide you with any graphics.

The revolution

Let’s take another example. Say your client wishes that when you delete a message from an inbox system you are developing, the container (which is designed to look like a piece of paper) will burn and leave a pile of ash at the bottom of the screen. Maybe this sounds a bit over-the-top and has no practical use and can’t be done with existing technologies (to be honest, I’ve heard clients requesting much wilder things) but, in the future however, it will be completely achievable with CSS shaders.

The introduction of custom CSS filters is a bit like when CGI first began to appear in movies – we started to see things on the screen that were simply not possible with the use of traditional special effects. And while the limit for modern computer generated imagery in movies is now non-existent, it’s exactly the same reason why CSS shaders will be a revolution. There will be no limit to what we can do on the visual side of websites as developers will have total control and will be able to do absolutely everything they could ever imagine.

Web apps vs. native apps

Here’s another thing that could be considered a side note although is still important, especially from a technical point of view. We’ve all heard of the battle between web apps and native apps and how the former will always be inferior to the latter because they simply don’t have access to all the hardware resources of the device they are running on. However, what HTML5 started, and what CSS shaders are part of, is giving the power of the actual hardware to the website and the web developer. Shaders are effectively code that is executed by the graphics processing unit of the device. In other words, if someone wrote a shader in a native app it would operate on exactly the same hardware level as a shader from a web app. This allows developers to create much nicer and richer user interfaces in their web applications, completely comparable to their native counterparts.

Problems and challenges

I appreciate this is all a lot to digest and while CSS shaders are a huge leap forward, before everyone gets too optimistic about them let’s face the obvious problems and challenges.

First of all, they really are bleeding edge. As of the time of writing, the only browser that remotely supports them is Google Chrome. On top of that, there’s the classic issue in the world of web development of ‘rate of adoption’. With Microsoft still not supporting WebGL and just recently starting to support CSS transforms and transitions in Internet Explorer 10, there’s a long way to go before we can actually use shaders in everyday situations (although I’d risk saying that implementing them has priority over things like WebGL). General adoption will also have to happen on the developers and designers side. CSS shaders will require knowledge of graphics programming and advanced 3D maths whilst designers will have to be conscious of the new possibilities in order to exploit them. There will have to be a lot of “thinking outside of the box” done in order for the real revolution to happen.

Secondly, we also need to be very careful not to lose sight of what websites are all about: the content. With these new visual horizons it’s tempting to simply forget about it and we’ve seen this happening before – the message getting lost under the visual clutter when websites evolved from simple text pages into rich graphical forms. However, if everything goes right, we can expect the new visual language of the web to emerge and make the Internet more fun and exciting than ever before.

Further reading:

Image credit: Sergiu Bacioiu

If you liked this article then why not subscribe to our RSS feed.

Author: Tymon Zgainski

Tymon was once told he looks like Dracula. He really doesn't.




Showing One Comment

Leave a comment
  1. richardigp June 29, 2013 at 7:14 pm

    Perhaps shaders will make a significant contribution to end user experience. Wind back the “Rule” thing. But I do agree the web of the future will be a visual machine that works with those parts of the cortex that have yet to learn to learn.

Leave a Reply