Flipboard CSS buttons
Flipboard creates a series of CSS buttons that flip horizontally on themselves when the mouse rolls over them, creating an elegant, eye catching effect. It employs CSS3 transform and transitions to do the heavy work.

Grayscale Image Gallery
This CSS image gallery renders the thumbnails initially in grayscale until clicked on to reveal a larger version of an image. You can quickly cycle through the thumbnails using the "Tab" key. The grayscale treatment is made possible thanks to CSS filters.

Image frames using CSS3 border-image
CSS3 makes it possible to specify an image as an element's border, instead of just a solid color. It takes a single image and then slices and dices it before using the end pieces to make up the border. Very cool!

Image with sliding description panel using CSS3 transitions
This CSS example shows how to add an animated description panel to images that slides open when the mouse rolls over the image using CSS3 transitions.

Mobile full screen expand menu
Full screen menus are quite the rage these days, as they work out of the box across devices big and small with their large footprint. This elegant mobile full screen menu expands itself to fill the whole page when activated.

Mobile full screen expand menu II
An alternate rendition of Mobile full screen menu, this one uses CSS3 scale() to collapse the full screen menu initially, expanding to fill the screen when expanded.

Pull out image using CSS3 keyframe animation
CSS3 animation can be fine tuned and broken up into "frames", thanks to the @keyframes rule. Currently supported in FF5+, Safari, Chome, and possibly IE10, the following uses CSS3 keyframes to create a pull out image that is revealed when the mouse rolls over an image. In IE, it degrades well in both IE8 and IE9.