This Week in CSS—December 2, 2013

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


How to use CSS filters

A blue box—Chris Coyier’s article on a fun challenge that appeared on CodePen recently, looking at how many ways you can create a blue box with CSS!

Techniques for Responsive Typography

Disabling hover when page scrolling

Here are the results of PPK’s recent Survey on media queries in RWD

Here are some flippin’ awesome CSS Alignment and Sizing Snippets.

For those of you using Chrome, you may be interesting in this quick video demo of a cool CSS feature that’s in the pipeline: Incrementing CSS values under-the-cursor

If this has all been too much code for you, then take a break and read this. Mel Gibson taught us what women want. Now find out What Screens Want.

CSS is nothing without HTML, so here are 8 HTML Elements You’re Not Using (and Should Be). (I was particularly interested in the <menu> element.)

A nice article on Responsive Icons.

A handy video on Putting Flexbox Into Practice.


CSS Raindrops on a Window (You really need Webkit [Safari] or IE11 to get much out of this, but it’s a really cool demo. You can focus either on the rain drops, or the background, or both.)

Cleanest CSS spinner, ever, by Lea Verou.

Play a game in pure CSS. It’s pretty cool: move your cursor to the middle section and it turns into a jet fighter (or something). Simply try to avoid the oncoming traffic!


The Breaq bookmarklet looks like a handy tool for determining breakpoints in your responsive design.

If you really like the idea of icon fonts but don’t know how to create them, Glifo is worth checking out. It’s an add-on for Photoshop. (The intro video is nicely presented and gives a good overview of how this tool works.)

Am I Responsive is a cool tool for getting a quick view of your site live at various screen sizes.

A bit of cheek

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

Hey, you should style your checkboxes and radio buttons with CSS3, that way nobody will be able to use them.


Hey, someone gimme a ribbon – I just discovered that websites don’t have to look the same in every browser. #aintThatOriginal



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.

Oh boy, oh boy, it’s almost the next week of CSS and I didn’t read them all…
With the [U]game in pure CSS[/U] I couldn’t get above a score of zero points. I guess I’ve to set the speed some slower. :smiley:
As always, a lot of interesting things are going on, and you’re providing good study material as well. :slight_smile:

But I have an excuse, I hope: in the [U]Blue Box[/U] responses they dared the next visitors: “I dare someone to merge four triangles.”

No help possible, I had to dive in it! :wink:
As results:

When seeing all other beautiful blue boxes, it’s hard to resist exploring new options…

*) In fact a part of the [U]CSS-only-Direction-aware-hover[/U] topic in the forum over here, so it only had to be adapted.

Nice demos Francky and some good ideas there :slight_smile:

Yes, nice work. :slight_smile:

Thank you both. :slight_smile:
Hard to stop the blue box production. :wink: Here is the last one in CSS this week.

You’ll need a production line now to keep up with all these blue boxes :slight_smile: