10 Interesting CSS3 Experiments and Demos

Jul 25 2010 by Jacob Gube | 15 Comments

You’ve heard it plenty of times before: We’re at the precipice of a transition in the way we, as developers, do things. Leading the way are future standards like CSS3 and HTML5, both already partially implemented in 4 out of the 5 major web browsers, with IE9 promising support, empowering us with new ways of making interactive and rich user experiences.

Just how awesome is CSS3? Find out by checking out these 10 experiments and demos that push the capabilities of the specs.

1. Our Solar System

This experiment presents our solar system’s planetary orbits (fast-forwarded, of course) by utilizing CSS3′s border-radius, transform, and animation. Additionally, hovering over the names of each planet on the right displays an animated tooltip using CSS (learn how to make CSS3 animated tooltips). You can read about how this experiment was developed from this walkthrough by Alex Girón, the creator of this stellar CSS3 demonstration. The animation, at the moment, only works on the WebKit browsers (Google Chrome and Safari).

2. CSS3 Ads Versus Flash Ads

Flash animated web banners are notorious for being intrusive in the user’s experience. Ad-blocking apps can turn these off by looking for all embedded Flash objects on a web page and hiding them. However, using CSS3 animation, these Flash ads can be mimicked in functionality, but will be harder to disable with third-party software. In this experiment, several ads were recreated using CSS3, and the results are almost identical to their Flash-constructed counterpart.

3. CSS3-Man

This is a robust animation sequence inspired by the Spider-Man animated television series in the 60′s. Making the sequence work involved using CSS3′s transform, @key-frame and rotate; a bit of jQuery was used to preload the images as well as HTML5 for the audio. The creator wrote an explanation of how the CSS3-Man animated sequence works, which will give you a general idea of the level of effort involved in this amazing experiment.

4. The Man From Hollywood

This demonstration is an animated sequence (based on kinetic typography) that explores a way in which we can replace rich animation components such as Flash or After Effects. This proof of concept chiefly utilizes advanced CSS selectors and CSS3 animation, however, it’s not purely CSS since JavaScript was used to toggle element classes on and off.

5. Anigma

We often use Flash (or Silverlight) for rich and interactive web-based video games. This CSS3 demonstration is a puzzle game and a proof-of-concept of how we can use open standards to create games — though admittedly, not as facile as Flash yet if you compare it to Flash games on sites like Kongregate. HTML5′s <audio> element was used to embed the sound.

6. Animated Polaroids

This demonstration is of stacked images that look like Polaroids. Hovering over a photograph transitions it smoothly to the front of the stack, making for an interesting interaction for presenting your photo gallery. The demo was made by leveraging transition, transform, dynamic psuedo-selectors (to animate the target element), as well as stylistic properties such as box-shadow for visual effects. Read the tutorial on how this was constructed if you’d like to learn how this was developed.

7. CSS3 Music Player Menu

With HTML5′s <audio> and <video> APIs, which will enable us to utilize multimedia without dependence from proprietary plugins, we’ll eventually have a need for GUIs that provide our users with controls for the media we serve them. Though we could use static images in conjunction with other HTML elements (such as buttons) to build these interfaces, using just HTML and CSS to render media controls mean we’ll have a more malleable solution. This user interface for a music player was built using only CSS3 (gradient, border-radius, box-shadow and all that good stuff). Read the explanation on how this was contructed in this tutorial.

8. Sliding Vinyl with CSS3

This demonstration, found in the ZURB Playground, takes vinyl album covers that, when hovered on, animates the sliding out of a vinyl record that contains additional controls ("more information" and "play"). This proof of concept could one day be used as an elegant web-based interface for a site that plays music when combined with HTML5′s <audio> API.

9. Gabriel Sharp’s Small Planet

This animated cartoon sequence depicts a fast-forwarded cycle of day and night. It works on WebKit browsers (Safari and Chrome) using the @keyframes CSS3 property for moving and transitioning PNG images.

10. Falling Leaves

WebKit presents the capabilities of CSS3′s animate property with a spectacularly smooth demonstration of falling leaves. Tip: Use your browser’s "view source" feature to read the source code of the demonstration — the code’s well documented with explanations of how it works. Read WebKit’s blog post about the animate property to get a better feel for all the possibilities.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

15 Comments

SJL

July 25th, 2010

Don’t get me wrong, I think that CSS3 and HTML5 are awesome…

But somehow I don’t see CSS3 ads coming anyday soon. Specially because large corporations are always coming behind on browser updates.

and even a thought of having flash ads as fallback …

Zlatan Halilovic

July 25th, 2010

Just recently, I managed to find some free time in order to kid around with the newest iteration of css and I was quite impressed with all the new, cool features added to it. I also did quite a bit of a research on all the wicked implementations of css3 code all over the web, and then I found the spiderman example, which absolutely blew my mind and made me supper dupper excited :D about the future of the web.

I’m pretty sure I’d seen many of these, if not all of the experiments presented out here, but not until yesterday did I stumble upon this great experiment that utilizes the CSS Transforms 3D feature, which is currently only supported in the latest version of the safari browser.

http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation

btw, what do you guys think of the new project, CSS3 PIE, that makes it possible to easily implement some of most important css3 features in internet explorer versions 6 through 8? I read an article a while ago that says that this is possible, but that the negative impact on the browser (IE) performance was too big to ignore. I wonder if progressive enhancement is a better solution when developing for the web today, with the use of a javascript library like Modernizer to detect the available features of the user’s browser. If anyone has an opinion on that, I would be more than glad to hear it.

Peace out, fellow web devs and designers :)

Ly3s

July 25th, 2010

I love <3

Thank's for this post :)

Aubrey

July 25th, 2010

You forgot this amazing one,

iPhone icons entirely with css3
http://graphicpeel.com/cssiosicons

Charlie

July 26th, 2010

Great post as usual, thanks! :D

Adam

July 26th, 2010

CSS is starting to be able to do some really cool things, i was impressed with the examples you posted.

There is still a long way to go however.

Not only is the presentation much better in flash, in the ads for example (text anti aliasing, subtle motion, etc), but it renders more smoothly (jagged edges in the CSS pictures, choppy animation in the solar system) and flash content appears the same in every browser.

I tested them with several versions of opera, safari, IE, chrome, and FireFox, and the CSS ads for example, were slightly different, and in some cases, just plain broken, in different browsers.

Because flash doesn’t require a browser update to have the lasted support, i think it’s going to have a major edge for some time.

Peter

July 26th, 2010

I swear, as good as CSS3 is – I’m getting sick and tired of having to worry about x-browser compatibility. Sure Webkit does a wonderful job of rendering crazy advanced effects, but since less then 10% uses Safari & Chrome – I can’t see a reason for using it (especially when JS does it right now.)

adrian

July 26th, 2010

I have a css “plugin” that makes images have that same polaroid effect, but it also doubles a lightbox when the user clicks on it— no javascript, the click is found by css a demo is at http://adrusi.com/css3-lightbox/

Jennifer

July 27th, 2010

I have a brand spanking new computer, learning CSS at the junior college and looking at these lessons on IE. However, no matter where I clicked (lesson and blog post) I saw no animations.
I loved the Polaroid ideas.

NT

July 27th, 2010

Thats pretty cool. But what I like about flash is the the animation is smooth. Even if you have an a little bit older browser. But how smooth is the animation with css?

Jason

July 28th, 2010

I think like most designers I’d love to be able to take the chains of IE off… but all these CSS3 articles leave me frustrated. I can’t get my clients to stop bugging me about IE6 and these demos don’t even work in IE8. Even IF IE9 turns out to be the star we all hope it will – it will literally be years before CSS3 will ever be ‘safe’ to use.

Dave

August 2nd, 2010

I must agree that CSS3 is a long way off for real world internet users. Sometimes I think that the designer world that tends not to use any version of IE, for obvious reasons, is lightyears ahead in web usability. For the average person out there that doesn’t hardly even know what a browser is won’t even get there for many years to come.

Mayme Biedekapp

August 10th, 2010

Hi there
Talking about HTML games I believe you might be interested in this link: the best HTML5 games to play at the office :)

Check it out and help me to grow this list. Feel free to add your comments.

Note that those games can also be played on the iphone or ipad.

xzhaoyang

August 22nd, 2010

Great!!!

leaflette

August 24th, 2010

i’ve played with the game up there, and i do think that, even css3 is an opportunity to actually replace the flash,
but still, there still leggings, i dont actually know what was that, cause i still didnt catch up the the current trend and issue yet.
But yes, you did a very awesome job! love them all :)

Six Revisions