A collection of CSS3 awesomeness

Today I tweeted asking my lovely followers to send the best examples they could find of CSS3 effects, and as always they were super helpful. I thought it’d be useful to publish the list I’ve got so far, and ask for comments to help this list grow. If you’re looking for neat examples of CSS3 effects that happen on hover, multiple background images, forms that use CSS3, killer CSS3 buttons, or scale and rotate transforms, then here’s a few sites that may inspire you:

Smashing Magazine has done some great articles about CSS3 effects lately.

Here’s a collection of other sites that either demonstrate how to use these effects, or are already using them in a beautiful way:

Okay, that’s what I’ve got for now! Please add a comment if you come accross any more Neat-o CSS3 Things™, you never know when I’ll get more Dribbble invites!

30 Responses

  1. Marc says:

    It’s not very pretty, but I tossed up a quick demo-page for both CSS2.1 and CSS3 selectors, properties, values, etc.; it gets a bit more advanced and ‘showy’ towards the bottom of the page: http://www.bostonwebstudio.com/presentation/intro-css2.1-css3/demo/

    Rock on.

  2. Rogie King says:


    Great compilation and nice resource for me to add to my arsenal. Thanks for taking the time to write this up!

  3. Ryan Merrill says:

    Didn’t see your tweet, but I am subscribed to your blog. Thought I’d throw up my just-launched CSS3-enhanced Web site up there:

    Nice list, thanks for the inspiration.

  4. Steve W says:

    Hey Meagan,

    I’ve one more for you:

    The Panic Blog randomly tilt their posts to give an organic look to the page – http://www.panic.com/blog/

  5. Ryan says:

    I did a demo a while back showing how to determine a devices orientation using CSS3, works on devices that support CSS3 media queries (iPhone, Android, Opera Mobile):

  6. Thanks for the list, always fun to see new css3 techniques :D

  7. Tracy Osborn says:

    Appreciate the shoutout, but can you correct @limedarling to @limedaring? Thanks! :D

  8. Om Ipit says:

    thank for the list. i need that.

  9. TuNG says:

    Thank you so much for your very convenient collection.

  10. Kristin says:

    Thanks for taking the time to put this together- it’s a great reference and source of inspiration, for sure.

  11. Maha says:

    Very nice and useful collection of links, thanks for posting.

  12. Great Resources. Bookmarked and visited often I am sure.


  13. Alex Newman says:

    you see this one yet? this is pretty cool for getting things going as of TODAY


  14. nono says:

    It does not even work in FF. Crap!

  15. Tyler Gaw says:

    This post definitely inspired me to get moving on my own Neat-o CSS3 Thing. Just finished it:

  16. Victoria says:

    Hi! Great post :) I just signed up for mediatemple with your domain as referral, since I’m a huge fan of your work!

  17. Ben says:

    Really cool stuff here… I love the one from Tyler Gaw Above.

    I did a write up on some of the practical (and cool looking) aspects of CSS3 a couple of weeks ago:


  18. Mr.Bintang says:

    bookmarked! thanks.. :)

  19. owltastic.com’s done it again. Superb article!

  20. Travis Beck says:

    i posted a quick cardflip demo (webkit only atm)


  21. Jeremy says:

    Thanks for the list.

    There are some great CSS3 browser support grids at http://www.standardista.com/css3/. They show what browsers currently support which CSS3 properties, and which support properties with a prefix.

  22. Justin says:

    A little late to the party, but I recreated some em based logos in CSS3. There’s no animation, but they do contain quite a bit of CSS3ness.


  23. Great list. Thanks for sharing!

  24. Nice post, some nice links in there, currently trying to pick up HTML5 and CSS3 skills.

  25. Lynsey says:

    I think the SXSW 2010 BeerCamp’s css3 is bananas. http://beercamp.com/2010/ Seems like they tried a little of everything.

Leave a Reply