Showcase Of Really Cool Live CSS Demos

Since it received its warm welcome to the web in December of 1996, CSS has completely changed the way in which websites are developed. Thanks to this powerful language, websites have become far more faster, stronger and more importantly flexible.

Now that CSS has grown up and its most recent version CSS3 has made its way onto the scene, several developers are taking full advantage of the language and coming up with some really amazing designs. In this Showcase Of Really Cool Live CSS Demos, we will explore and play around with some great examples of what designers are making happen with CSS, CSS3 and a little cross-breeding of CSS and it’s good friend jQuery.

Live Demos

OpenLaszlo DHTML CSS 3 Demo

A CSS3 text shadow demo making use of the OpenLaszlo DHTML runtime. Raju Bitter, the author, has two demonstrations on this page, one featuring the CSS3 demo and another exact replica using flash. This goes to show that some things that were only capable in flash at one time are now possible with the help of CSS.

A Colorful Clock With CSS & jQuery

Here’s a demo of a unique looking clock made by combining  jQuery and CSS. The team at Tutorialzine also wrote up a nifty tutorial on how to create the effect.

Sproing: An Elastic Thumbnail Menu

Another example of combining CSS and jQuery. The results, a beautiful elastic thumbnail menu that reacts when hovering. Check it out, they have a tutorial as well.

Editable CSS3 Photo Gallery

Photo gallery with click-to-enlarge photos, fancy CSS3 rollover effects, and marked up with HTML5 via CSS-TRICKS. Chris has also included the files available for download along with the demo.

Pure CSS Coke Can

Román Cortés found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image). This has to be one of my favorite demos. Slide the scroll bar and watch the can rotate via our friend CSS.

3D Parralax Background: Starry Night

Parallax is a very cool three-dimensional effect. “Closer” stars will appear to move faster while more “distant” stars move slower. This is achieved with transparent background images and percentage positioning. Downloads include the Photoshop (.psd) file.

jQuery DJ Hero – CSS3 and jQuery fun

By combining CSS3 and jQuery, Marco created two records that you can start spinning (faster and slower) and even scratching is enabled. In a future version, this could be used together with some real sound (this version has no sound). Works on the iPhone too.

CSS 3D Meninas

Here’s another one from Román Cortés. In this example he takes the classic painting The Maids of Hounour (Las Meninas) and uses a CSS pseudo-3D/parallax effect to create a 3D viewable painting. It uses pure CSS, so no javascript or flash is involved.

An Awesome CSS3 Lightbox Gallery With jQuery

Here is a demo and tutorial showcasing an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script is be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

Awesome Overlays

These overlays use a number of new CSS properties, some of which are simple like border-radius and using RGBa colors. The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect they used the border-image property, which is a tricky little addition to CSS. They also explain how to create the effect.

Sliding Vinyl with CSS3

In this demo, they take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for displaying your music. I didn’t have any luck getting this to work in Firefox, but Chrome displayed it quite nicely.

Poster Circle

This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior. The three rings are constructed using a simple JavaScript function that creates elements and assigns them a transform that describes their position in the ring. CSS animations are then used to rotate each ring, and to spin the containing element around too.

Star Wars Opening Crawl

Here’s the Star Wars opening crawl using only HTML and CSS. I didn’t have any luck getting this one to work in Firefox, but it seemed to play nicely in Chrome. Still having trouble viewing it? Here’s a video that is certain to demonstrate the effect.

Animated CSS3 Cube Using 3D Transforms

A 3D cube cre­ated solely in CSS, with all six faces. Using JavaS­cript to detect key presses and update inline styles this cube can be intu­it­ively navigated. Like the effect? They were kind enough to write up a tutorial on the effect.

Halftone Navigation Menu With jQuery & CSS3

This demonstration uses CSS & jQuery to create a halftone-style navigation menu. It allows you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well. Comes with a tutorial as well.

Matrix Animation With CSS3 on WebKit

Here is a demo featuring a Matrix type effect using some CSS3. I didn’t have any luck viewing this one in Firefox, but it worked just fine in Chrome. Find out more about this demo here.

CSS Paper Bird

In this experiment, Román Cortés  took a series of paper bird (crane) photos with different illumination positions and created a pure CSS effect – without Javacript. Slide the scrollbars around to see the effect.

What Did I Miss?

Have you created some awesome demonstrations using CSS? Maybe you know of a few quality examples that I overlooked. Please share your findings below in the comment section. I love playing around with these demos and would appreciate the links.

Written by Shawn Ramsey

When I’m not brewing my own beer or hiking through the local National Forest, I’m busy building a more beautiful web.

@shawnramz → / bitdrips.com →


6 Comments

  1. designi1 January 29, 2010 at 9:29 am #

    ehehe… pretty awesome examples!! i´m not looking atm for this but i´ll save it as usual. “Tomorrow never dies”.

    007 designi1 in action! :D

    • Shawn Ramsey January 29, 2010 at 11:33 pm #

      Glad you liked them Designi1!

  2. Liam McCabe January 29, 2010 at 11:17 am #

    Wow, some exceptional examples here!

    Thanks for sharing Shawn :)

    • Shawn Ramsey January 29, 2010 at 4:19 pm #

      Your welcome Liam! Thanks for commenting.

  3. ben January 16, 2012 at 8:45 am #

    Great list another cool thing I have seen recently is a browser made in just css3 http://dominic-green.com/examples/browser/cssBrowser.html and also an iphone http://tjrus.com/iphone

  4. Mark March 26, 2012 at 12:59 pm #

    Great list. The coke can is pure genius. I aspire.

Leave a Reply