CSS3 eye candy for 2014

01.23.2014 : by David Nuon
CSS3 eye candy

With the new additions to CSS3 we have the ability to do more than just change the size and color of the element. Now, you can do things like add rounded corners and drop shadows without having to make a bunch of images for the effect. And since nearly all current browsers support this, you will be able to use these effects without much worry about cross-browser compatibility.

In 2009, Google announced at the annual I/O event their backing of new fangled web technologies, like HTML5 and CSS3, and all of the pretty web goodness they would bring. And of course, others weren't shy to follow.

It's the year 2014. What are some cool things an intrepid web designer do with all this? Well, quite a bit!

Achieve effects without images

With the new additions to CSS3 we have the ability to do more than just change the size and color of the element. Now, you can do things like add rounded corners and drop shadows without having to make a bunch of images for the effect. And since nearly all current browsers support this, you will be able to use these effects without much worry about cross-browser compatibility. Here's an example.

Use image filters without complex code

CSS3 introduced image filters and they sure are handy. They allow us to do things like sepia tone, blur, and change the saturation of images with just a line of CSS code. Now, some might argue that using a canvas element would do the same thing. Well, they're right. However, you (or someone else) will have to write the filter and it can be a bit of a mess. So if something is already built in, why not just use that? Here's a demo of CSS3 filters in action.

Unfortunately, it's a feature that is only available for WebKit (e.g. Safari, Opera) and Chrome so use them with discretion.

Animation and Transitions

A little bit of animation goes a long way. Not too long ago, we would have had to use other technologies like Flash that were not accessible or may not even be installed on certain devices. But now that CSS has capability for animation, we can do some pretty neat things.

Some examples:

Now, there's more where that came from. Here are some places where you can see the what CSS3 is capable of:

Author photograph: David Nuon

David Nuon

David is a developer at Zuno who's talents include everything from complex javascript to Android dev to amazing doodle covered notes.