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:
- 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!
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.
Meagan,
Great compilation and nice resource for me to add to my arsenal. Thanks for taking the time to write this up!
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.
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/
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
Thanks for the list, always fun to see new css3 techniques
Appreciate the shoutout, but can you correct @limedarling to @limedaring? Thanks!
[...] Owltastic — by Meagan Fisher A great collection of CSS3 articles. (tags: css3 css webdev) [...]
thank for the list. i need that.
Thank you so much for your very convenient collection.
Thanks for taking the time to put this together- it’s a great reference and source of inspiration, for sure.
[...] Great list. [...]
Very nice and useful collection of links, thanks for posting.
Great Resources. Bookmarked and visited often I am sure.
Thanks.
you see this one yet? this is pretty cool for getting things going as of TODAY
http://css3please.com/
Also:
CSS3 Transitions
http://trentwalton.com/2010/03/22/css3-in-transition/
Butter Label:
http://butterlabel.com/
It does not even work in FF. Crap!
This post definitely inspired me to get moving on my own Neat-o CSS3 Thing. Just finished it:
http://tylergaw.com/lab/themanfromhollywood
Hi! Great post
I just signed up for mediatemple with your domain as referral, since I’m a huge fan of your work!
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/
bookmarked! thanks..
owltastic.com’s done it again. Superb article!
i posted a quick cardflip demo (webkit only atm)
http://travisjbeck.com/files/css3cardflip
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.