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:
- http://farukat.es/: Faruk’s site does has some awesome CSS3 effects — check out the sidebar where the social networks are. (via @KuraFire)
- http://csswizardry.com/css3/: Demo and tutorial of various CSS3 effects. (via @SeanHood)
- http://demo.marcofolio.net/jquery_dj/: Spinning records with CSS3. (via @sea)
- http://analog.coop/#is: Analog’s “About Us” section has rotate and scale. (via @jakeprzespo, @limedaring, and @CreativityDen)
- http://forabeautifulweb.com/buy/dvds: For a Beautiful Web’s awesome DVD action. (via @visualpro, @SteveKubrick, and @jakeprzespo)
- http://sam.brown.tc/: Button-y links, also animations on the social networking stuff. (via jakeprzespo)
- http://outsideapp.com/: Outside app has all kinds of awesomeness. (via jakeprzespo)
- http://inspectelement.com/: Logo, blog post images. (via visualpro)
- http://chirp.twitter.com/: Polaroids rotate, fun spinning shape here: http://chirp.twitter.com/speakers.html. (via urbenkeach)
- http://archivr.com/: Animation on cards. (via meirish)
- http://www.gesteves.com/experiments/starwars.html/: Star Wars opening crawl. (via brookr)
- http://neutroncreations.com/blog/: Totally sweet rotate / transform. (via mindnumbing)
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!
RSS
Dribbble
Twitter
Flickr
Marc on January 26, 2010 at 2:04 pm
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.
Rogie King on January 26, 2010 at 2:05 pm
Meagan,
Great compilation and nice resource for me to add to my arsenal. Thanks for taking the time to write this up!
Ryan Merrill on January 26, 2010 at 2:16 pm
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:
http://ryanmerrill.net/
Nice list, thanks for the inspiration.
Steve W on January 26, 2010 at 3:48 pm
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/
Ryan on January 26, 2010 at 4:43 pm
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):
http://www.thecssninja.com/css/iphone-orientation-css
Chris Pacheco on January 26, 2010 at 8:58 pm
Thanks for the list, always fun to see new css3 techniques :D
Tracy Osborn on January 27, 2010 at 11:12 am
Appreciate the shoutout, but can you correct @limedarling to @limedaring? Thanks! :D
Om Ipit on February 7, 2010 at 1:05 am
thank for the list. i need that.
TuNG on February 7, 2010 at 10:08 am
Thank you so much for your very convenient collection.
Kristin on February 26, 2010 at 2:10 pm
Thanks for taking the time to put this together- it’s a great reference and source of inspiration, for sure.
Maha on March 16, 2010 at 5:59 am
Very nice and useful collection of links, thanks for posting.
Sean Sullivan on March 16, 2010 at 6:32 am
Great Resources. Bookmarked and visited often I am sure.
Thanks.
Alex Newman on March 23, 2010 at 1:27 pm
you see this one yet? this is pretty cool for getting things going as of TODAY
http://css3please.com/
Shane on March 23, 2010 at 10:15 pm
Also:
CSS3 Transitions
http://trentwalton.com/2010/03/22/css3-in-transition/
Butter Label:
http://butterlabel.com/
nono on April 6, 2010 at 4:48 am
It does not even work in FF. Crap!
Tyler Gaw on April 7, 2010 at 6:17 am
This post definitely inspired me to get moving on my own Neat-o CSS3 Thing. Just finished it:
http://tylergaw.com/lab/themanfromhollywood
Victoria on April 30, 2010 at 9:43 pm
Hi! Great post :) I just signed up for mediatemple with your domain as referral, since I’m a huge fan of your work!
Ben on May 13, 2010 at 3:23 pm
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:
http://blog.darkcrimson.com/samples/css3/
Mr.Bintang on May 17, 2010 at 6:57 am
bookmarked! thanks.. :)
Stephen Hutton on May 27, 2010 at 9:55 pm
owltastic.com’s done it again. Superb article!
Travis Beck on June 18, 2010 at 4:38 pm
i posted a quick cardflip demo (webkit only atm)
http://travisjbeck.com/files/css3cardflip
Jeremy on June 27, 2010 at 10:03 am
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.
Justin on July 24, 2010 at 3:26 pm
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.
http://robustnessiskey.com/csslogos
Brett Widmann on November 1, 2010 at 7:36 pm
Great list. Thanks for sharing!
Adam Huxtable on December 22, 2010 at 11:17 am
Nice post, some nice links in there, currently trying to pick up HTML5 and CSS3 skills.
Lynsey on January 12, 2011 at 10:38 am
I think the SXSW 2010 BeerCamp’s css3 is bananas. http://beercamp.com/2010/ Seems like they tried a little of everything.