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.