This Week in CSS—November 4, 2013

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

Articles

For the more geeky amongst us, here’s a nice article by Paul Irish about how much speedier the latest version of Flexbox is.

Perhaps even more geeky is this analysis of the image resizing algorithms used by popular web browsers.

Resources

If you prefer to write CSS rules as you think of them, your style sheet can end up a bit of a mess. CSScomb is a pretty cool tool for sorting your CSS properties in specific order. You can choose what that order is. It also integrates nicely with a wide range of code editors.

It’s pretty amazing what you can do with CSS3, such as creating patterns. Lea Verou’s CSS3 Pattern Gallery is pretty darned inspiring. (Check out [URL=“http://24ways.org/2011/css3-patterns-explained/”]Lea’s article on patterns if you want to learn how she does it.) You can also [URL=“https://github.com/LeaVerou/CSS3-Patterns-Gallery”]submit a new pattern to her site if you are feeling ambitious. If you’d prefer to have a tool to help you along, check out [URL=“http://www.patternify.com/”]Paternify.

Also take a look at Dudley Storey’s CSS only venetian blind effect.

Not for those who like to write their own code, but Typeform is a pretty cool app for creating pretty cool forms.

For design inspiration, it’s worth checking out Pattern Tap, which features a lot of nice sites, designs and tools on the web.

Features

Icon fonts

There’s a trend away from using images as icons, in favor of icon fonts. These have the advantage of being light weight and yet scalable too. There are some handy tools out there for generating icon fonts, such as:

IcoMoon
Fontello
Fontastic
Pictonic

For more reading, Chris Coyier has a handy intro to icon fonts, and DesignShack also [URL=“http://designshack.net/articles/css/four-custom-icon-font-generators-compared/”]compares some of the services linked above.

SVG images, sprites and imagemaps

Another emerging option for icons is to use SVG. Using a vector program like Illustrator, you can save your files as a .svg and include it in your pages with a normal <img> element:

<img src="logo.svg" alt="site logo">

And if SVG really floats your boat, check out Craig’s cool article on using SVG for sprites.

Or you might like to use SVG to create some awesome patterns.

Or perhaps you’d like to animate your checkboxes and radio buttons with SVG.

“Is that the best you’ve got?” Heck no! Perhaps you’d like to try creating a responsive imagemap with SVG.

“O, but c’mon dudes, SVG isn’t well supported, right?” If that’s what you’re thinking, then take a look at what caniuse has to say about that

Tips

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

If your website is not responsive in browsers that don’t yet exist, you’re doing it wrong.

source

If you’re wondering about the difference between “adaptive” and “responsive”, remember that one is adaptive and the other is responsive.

source

If your personality was a CSS value, I’m pretty sure it would be something other than “normal”.

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.

There are some more nice CSS pattern links on Dudley Storey’s site, such as:

Pop Art Backgrounds
More background patterns