CSS3 Weekly Roundup #3: 4/30/11

Alt Text


Here are some fresh CSS3 tutorials and snippets that were released recently. I will continue to release similar roundups on the subject of CSS3, jQuery, and WordPress. Check here for all the current Weekly Roundups.

Weekly Roundup

39 Ridiculous Things To Do With CSS3 Box ShadowsView Demo

This wildly creative demonstration of the power of CSS3 uses Box Shadows to create 39 unique effects. Unfortunately, you must use Chrome 11 or better to view every effect fully.

Ring a Bell with CSS Keyframe AnimationsView Demo

This tutorial by InspectElement shows you how to realistically animate a ringing bell. Using the CSS3 transform rotate, the bell rings every 8 seconds and realistically slows down to a stop.

V for Vendetta Kinetic Typography with HTML5 & CSS3View Demo

Inspired by kinetic typography youtube videos done in Adobe After Effects, this great demonstration of kinetic typography for the movie V for Vendetta was made purely with HTML5 and CSS3.

Fun With Pulsing Background Colors in CSS3View Demo

DesignShack teaches how to create a pulsing color background with CSS keyframe animations. Currently keyframe animations are only supported by webkit browsers.

Create a CSS3 Image Gallery with a 3D Lightbox AnimationView Demo

This CSS lightbox gallery uses CSS3 to create great hover effects and an animated lightbox transition.

IE9 Is Here! 7 Cross-Browser CSS Tricks You Can Now Use

This is a great article on celebrating the arrival of IE 9 and its new CSS3 capabilities.

CSS Card Flip using Webkit TransitionsView Demo

In this tutorial by iLoveColors, we will learn how to use both to create a product card that flips to reveal more information that also includes a fallback for browsers that don’t support Webkit transitions and transform.

CSS3 TooltipsView Demo

This tutorial teaches how to create your own CSS tooltips with no images and no javascript.