25 Amazing CSS3 Experimentations and Demos

CSS3 is opening up a lot of possibilities for designers and developers. Things that used to require images, JavaScript or Flash can now be done with the power of CSS. Unfortunately, in most cases these developments are more useful for experimentation and learning at this point since they are not supported by all of the major browsers. However, if you’re interested in learning more about the capabilities of CSS3 it can be a valuable use of your time to see what is being done.

In this post we’ll feature 25 experimentations and demos from various designers/developers using CSS3.  Some have more practical real-world uses than others, but all of them demonstrate what can be done with CSS3 and some creativity.

Look Ma, No Flash!

Look Ma, No Flash!

Old School Clock with CSS3 and jQuery

Old School Clock with CSS3 and jQuery

A Colorful Clock with CSS & jQuery

A Colorful Clock with CSS & jQuery

AT-AT Walker

AT-AT Walker

Pure CSS Social Media Icons

Pure CSS Social Media Icons

Pure CSS3 Page Flip Effect

Pure CSS3 Page Flip Effect

Recreating the OS X Dock

Recreating the OS X Dock

Use CSS3 to Create a Dynamic Stack of Index Cards

Use CSS3 to Create a Dynamic Stack of Index Cards

Experiment: Realistic iPod with CSS3

Experiment: Realistic iPod with CSS3

CSS3 Loading Spinners without Images

CSS3 Loading Spinners without Images

CSS Posters

CSS Posters

CSS3 Background-Clip & @Font-Face

CSS3 Background-Clip & @Font-Face

CSS3 Button Maker

CSS3 Button Maker

Create a Vibrant Digital Poster Design with CSS3

Create a Vibrant Digital Poster Design with CSS3

Multi 3D Cubes with Animation Using CSS

Multi 3D Cubes with Animation Using CSS

Sliding Vinyl with CSS3

Sliding Vinyl with CSS3

Animations Using CSS Transforms

Animations Using CSS Transforms

Easily Turn Your Images into Polaroids with CSS3

Easily Turn Your Images into Polaroids with CSS3

jQuery DJ Hero – CSS3 and jQuery Fun

jQuery DJ Hero - CSS3 and jQuery Fun

CSS3 Animations Demonstrated with Snow

CSS3 Animations Demonstrated with Snow

How to Create Depth and Nice 3D Ribbons Only Using CSS3

How to Create Depth and Nice 3D Ribbons Only Using CSS3

Apple’s Navigation Bar Using Only CSS

Apple's Navigation Bar Using Only CSS

Pure CSS Coke Can

Pure CSS Coke Can

Our Solar System in CSS3

Our Solar System in CSS3

Rotating Image Gallery Using CSS Transform and Transition

Rotating Image Gallery Using CSS Transform and Transition

For more web development resources please see:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

39 Responses

Comments are now closed on this post.

  • S.M.Karthick, August 19, 2010

    Amazing Collection.Will try it out soon.Thanks!

  • Webstandard-Blog, August 19, 2010

    If you want some more css3-stuff don’t miss the bouncing navigation or the sliding image-gallery!

  • Arshad, August 19, 2010

    We need Safari,Firefox and Chrome:)

    Thanks for the post

  • Teylor Feliz, August 19, 2010

    Thanks for including my “Experiment: Realistic iPod with CSS3″ on the list! I am glad you liked it!

  • Web Design Portfolio, August 19, 2010

    looks great!

  • wahid polin, August 19, 2010

    Man this effects are just awesome to say the least.I need to get into CSS3 quickly .

  • Marco, August 19, 2010

    I’ve just implemented some -transition in my navbar . But, at least IMHO, the coolest effect is the subtle transition on the links hover. It gives the site an overall sense of calm.

  • shell, August 19, 2010

    None of these examples work on my computer … css3 has a long way to go before it works in the real world.

  • Cookieless Domain, August 20, 2010

    Now this is a cool collection, mate.

    Thanks for sharing those beauties :)

  • Humming Bird, August 20, 2010

    Amazing! Nice Collection.

  • wedding planning ideas, August 20, 2010

    I like the spiderman. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.

  • Eko Setiawan, August 20, 2010

    Thanks for share, nice collection…really amazing CSS3

  • manual directory submission, August 20, 2010

    Really amazing, CSS3 is going to redefine webdesign.

  • Jasmin Halkic, August 20, 2010

    Very nice! Really awesome staff.

  • Amy, August 20, 2010

    Great stuff really like these!

  • Broncha, August 20, 2010

    Nice experiments!!

  • Deko Web, August 20, 2010

    Thank you really nice designs

  • Web Designer, Leicester, August 21, 2010

    The CSS3 buttons are fantastic, they are much easier than using image sprites.
    Thanks for posting.

  • Micke Hasselqvist, August 21, 2010

    Some of those are really awesome! Once Internet Explorer 9 arrives, we might actually get the chance to really get to use some of those. :)

  • Amin, August 22, 2010

    Cool, thanks. They all were great, specially “Use CSS3 to Create a Dynamic Stack of Index Cards”

  • Robin Cox, August 23, 2010

    CSS3 is a great thing. I really hope that newer versions of web browsers will implement a lot of support for it.

    I though will probably stick to jQuery for a long time because it works in all browsers, even ie6 and it can do a lot of cool stuff.

  • Webbdesign, August 23, 2010

    Its really great that CSS constantly evolves for the better but lesser browsers such as internet explorer constantly hinders the use of new technology with its poor support. Hopefully ie 9 will support a lot of CSS3 but even if that is the case, ie 6,7 and 8 doesn’t have any support at all for either HTML 5 or CSS3 and it will take a long time until ie8 will be a thing of the past :(

  • Ajay, August 24, 2010

    Looks stunning. HTML has moved to 5 and now its CSS. Great. Need to experiment this as well. Thanks for the article.

  • Greg Bulmash, August 24, 2010

    When some of these only run in Chrome or Safari on a desktop, we find out how limited the adoption of HTML5 and CSS3 really are.

    Most of these are sort of like the news story about the university team that discovered something that will change our lives forever, but right now they can only make a gram of it at a time and it’s really expensive. It won’t actually change everyone’s lives until they can figure out how to make tons of it at pennies a gram, then secure funding to build the factory, deal with environmentalists who want them to build their factory 400 feet to the right of where they’ve planned because it encroaches on a patch of endangered Dickweed, etc., etc.

    It’s just hard to get excited over most of this because it doesn’t have a lot of practical application right now.

    • Vandelay Website Design, August 25, 2010

      Greg,
      For right now, yes, I agree that the practical use is limited. However, in this industry I think it is necessary to be aware of changes and upcoming changes.

  • Webbdesign, August 25, 2010

    @ Greg Bulmash

    You are right. Also think about the large company who “by shady means” has got monopoly on the market and tries to sabotage the new fantastic findings because they fear better competition.

  • Webbdesign, August 25, 2010

    @ Vandelay Website Design

    What do you think about compatibility issues with old or not good enough browsers? What I am getting at is the issue that even if my customer has the best and latest browser installed, a big portion of his or her target audience probably don’t, a lot of them maybe even use an old browser like ie6 for instance.

    I have red that the new coming ie9 lacks in support for HTML 5 for instance. When will it be safe to use HTML 5, CSS 3 and other great new technology? Perhaps first when it already is outdated.

  • rap, August 30, 2010

    Great stuff really like these!

  • Hande, August 31, 2010

    Amazing collection. Thanks

  • deva, September 4, 2010

    HAHA,That is so original , I like it

  • Elgart, September 8, 2010

    I really admire all those designs!

    Amazing works…

  • Biden, September 11, 2010

    Definitely is original work, only wish I was a pro with CSS stuff. CSS was never my forte.

  • You really make the web world more interesting by this cool designs. Truly awesome. Thanks for sharing all these.

  • Sean Boone, October 8, 2010

    This is a great collection, there are so many CSS3 specific articles nowadays… can’t wait until its mainstream. Mostly because of clients being unhappy when they see their website in Internet Explorer… it holds me back from going all out.

    My favorite is the 3d cubes ;)

  • UPS, December 28, 2010

    Thank you for your article. Amazing collection ;)

  • Nikola Arezina, February 3, 2011

    these great article helps me to made some experiment check it out is very experimental
    http://bergb.com/blog/creating-progress-bar-using-css-and-bit-jquery
    sorry for promo it is really awesome :)

  • Toronto Web Developer, June 10, 2011

    I am writing an article on CSS so this is totally helpful!

  • Web Design Liverpool, January 31, 2012

    Thank so much for this great article

  • Niall, February 12, 2012

    Gotta love what you can do with CSS3!