Hi, I'm Meagan Fisher, a designer living in Brooklyn. I make websites, eat food & love owls.

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!

•Posted Tuesday, January 26th, 2010

• Tagged CSS3

• 30 Comments

30 Responses

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 :D

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

[...] Owltastic — by Meagan Fisher A great collection of CSS3 articles. (tags: css3 css webdev) [...]

links for 2010-01-29 | Lorissa Shepstone

thank for the list. i need that.

Thank you so much for your very convenient collection.

TuNG

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

[...] Great list. [...]

A collection of CSS3 awesomeness | wplover

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!

nono

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.

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

[...] posted this great list of articles showing some of the new features of [...]

Great list. Thanks for sharing!

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

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

Lynsey

[...] Owltastic — by Meagan Fisher [...]

links for 2011-02-11 « urbandesire

Leave a Reply

A quick overview

Raised in Florida, a new New Yorker via Boston. When not making websites, I try to write and speak about making websites.

Read more about me

What I'm working on

Believe & Achieve owltastic February 02, 2012

Follow owltastic on dribbble

Latest Tweet

Can I take out a restraining order on @LinkedIn? It's been over a year since I closed my account, but I still get weekly emails. Stalkers!

Follow owltastic on twitter

Follow me

Categories