All Articles

Special effects in CSS3

Cascading Style Sheet (CSS) is evolving, and especially from when level 3, know usually as CSS3, has been adopted by the modern browsers, it’s possible to create images, sprites and other “special effects” without the need of PNG files or Javascript.

In this post, I’ll list some interesting and inspiring applications of CSS3, in different contexts, showing how this style language has reached a such expressiveness that was probably unpredictable when the CSS level 1 was published in December 1996. I have seen a lot of nice examples, but most of them use some Javascript.

Images

The Simpons in CSS
The Simpsons in CSS

I noticed this fresh and cool example of how images can be created in pure CSS3, developed by Christopher Pattle, a UK developer: The Simpons in CSS. This is a must-see!

I loved the way Christopher broke up the faces of the Simpsons heroes, and I found it impressively organised. E.g. Marge’s face is compound of 63 different DIV tags, while Ned’s moustache is made with 7 DIV tags.

Sprites

Sprites
Sprites

Another cool technique is to create sprites in CSS3. An approach involves the combination of CSS animation plus the experimental @keyframes at-rule, that controls the frames to be rendered at a certain point of animation.

This is a cool sample on JsFiddle, that is easy to understand as its source code is shown.

Another sample was created by Anthony Calzadilla, and it represents the AT-AT Walker from The Empire Strikes Back. If you click on “View the bones!”, you’ll see how the various components work together.

Animated buttons

Animated buttons
Animated buttons

Would you like your buttons to have animation in pure CSS, without any Javascript? See those buttons. In this case, when the mouse is over the image is rescaled using the transform attribute.

I like the different effects, especially those in the Demo 1 and Demo 4 page. I think that this and other examples available on the Internet can be easily implemented in your website.

What else?

What can we expect? CSS3 is now mature, and it offers a lot of possible applications. Together with Javascript, now we can have games that are played on different devices without any Flash. We can create complex typography effects using web-fonts. We can have the effect of browsing the pages of a book in pure CSS. What else? Well, it depends only on our fantasy: the potential is tremendous!

Read more