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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.