24 Impressive CSS3 Experiments

I think that these CSS3 experiments have some value, and would encourage people to continue to pursue them for strictly educational purposes – though hopefully in a semantic and well-coded fashion. Let’s just not make the mistake of assuming that these experiments should be used in real, production situations.

umbrUI

umbrUI is a demo of HTML input elements made with CSS3. So far they include a range slider, checkbox and radio button. I’m pretty happy with the outcome. They just use minimal markup, no JavaScript and thanks to the Pictos Font Icons, no images.


I Twitty the Fool!

iTwitty The Fool is a very well animated CSS3 experiment featuring a cartoon B.A., a Twitter feed, and a Twitter bird. Details like the changing facial expression and the manipulated


CSS3 - Zoom...zoooom...zoooooom!

This demo uses webkit keyframes to animate 26 images which result in a stunning continuous zoom effect.


CSS3 Rainbow

The rainbow, the clouds and every image in this page made by HTML object that styled by CSS. I tell you that this page doesn't look good on Internet Explorer because it don't support some CSS3 features like border-radius, text-shadow and box-shadow that i used it when making this page.


CSS3 Card Trick: A Fun CSS3 Experiment

This is a great example of how CSS3 and HTML5 will take over Flash’s more simple applications.


Our Solar System

An experiment with CSS3 border-radius, transforms & animations.Animation properties currently only work on -webkit browsers (Chrome or Safari).


Pure CSS Twitter Fail Whale

Twitter ‘Fail Whale’ fully rendered using CSS. If you’re using a Webkit browser (Safari or Chrome), it should also be animated using the webkit-animation CSS functions. If you are viewing in IE8 or below, well, this isn’t an experiment for you.


dock itunes

This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.


CSS3 Analogue Clock

Exper­i­ment works in Safari 4 Beta and Google Chrome. A work­ing clock that option­ally resorts to JavaScript to grab the cur­rent time (can be achieved by other means).


iPhone CSS3

Creating iPhone without using image !


CSS3 Music Player Menu

CSS Music Player Menu using only CSS3 properties instead using images.


CSS Poster: Three Laws of Robotics

Another experiment in CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa, and maybe some more stuff.


CSS3 Tilt-Shift Text experiment

Where are the trees is an experiment trying to create a Tilt-Shift effect on Text using CSS3.


Anigma

Anigma is a test of various features that are proposed in CSS3. In particular this was his own way of trying out the new css3-transitions and css3-animations. Anigma was tested on Arora, Safari and Google Chrome.


Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.


CSS3 glass text effect

ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3.


Stereoscopic 3D effect with CSS3



CSS typography experiment

This is a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS 2.1, and modern browser implementations of a couple of CSS3 properties.


CSS3 Trans­forms & @font-face Experiment



CSS3 Background-Clip & @Font-Face



Curtis CSS Typeface



CSS 3 Transform Experiment

Transform is a pretty exciting feature that’s been implemented in CSS 3. So why haven’t we used more of it in our designs?


Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications.


Flashlight

FLASHLIGHT is another CSS3 experiment. Again the text color is set to transparent and text-shadow is added. For the hover effect a rotateY transition is used with a low perspective.Works in Safari only. Booo!