This Week in CSS—October 21, 2013

Here are some nice links that we’ve gathered for you this week:

Tutorials & Articles

Dudley Storey image animation with css and javascript.

Media queries are all the rage these days, and here’s a useful write up on 7 Habits of Highly Effective Media Queries by the mighty Brad Frost.

Here’s a handy article on the uses of Flexbox, which is getting [URL=“http://caniuse.com/flexbox”]close to being a viable layout option these days.

Whether or not you are a fan of CSS frameworks, you might find this post on one of their flaws interesting.

Need a laugh? Check out this article on how to keep all stakeholders happy by putting all your content in a carousel.

Demos

Have you ever wanted to create a book icon in CSS? Check out this cool example at CodePen.

Many people are ceating icons with CSS. Here are some nice examples:
Pure GUI icons
iOS icons
Rather Splendid
Peculiar
Emoticons
Here’s an amazing example of Twitter’s Fail Whale in CSS
Here’s a collection of amazing CSS3 images
And perhaps you’d like to create a browser logo? Try this example of Internet Explorer
How about Apple Mice

Resources

If you like the idea of a CSS framework but shy away from getting tangled in the likes of Bootstrap or Foundation, you might like to check out InuitCSS, which is described as “a powerful, scalable, Sass-based, BEM, OOCSS framework.” It gets out of the way of the important things while offering a lot of useful options.

Another framework similar to Inuit is the Cascade Framework, which “puts the C back in CSS”.

CSS Values is a handy little online app that provides an easy way to view all the values associated with the various CSS properties. It’s still in development, but a handy tool even as is.

For all you 50 Shades of Gray fans, you can now enjoy the CSS version.

Real World CSS is a handy resource of CSS3 snippets for must-have things like blink text, marquees and the rest.

If you’d like to explore CSS3 buttons in more depth, have a look at some of these tools:
BonBon
Hello Happy CSS3 Buttons

If you find web design is getting too serious, let your hair down and spend some time with That’s a Funny Joke:

Old MacDonald had a link farm, SE SEO

Tips

And once again, some lighthearted tips for the week, courtesy of @H9RBSjs

If anyone ever accuses you of “coding like it’s 1999”, kindly tell them you’re writing CSS3 and direct them here → http://goo.gl/WLZX1

source

Hey, check it out – using this modular CSS code you can make a square: “border-radius: 0”

source

Hey, did you guys know that there’s a battle raging between flat and skeuomorphic design and people with brains don’t care who wins?

source

[rule=100%]orange[/rule]

Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue. :slight_smile:

You can also view a list of previous posts here.

Another great round up Ralph. I’ll have to give up work now to study all this :slight_smile:

A new thread has been posted here: http://www.sitepoint.com/forums/showthread.php?1174920-This-Week-in-CSS�October-28-2013

Thanks for this awesome post. There’s a lot of useful and interesting information on here. Keep up the top work!