Art Direction For The Web Using CSS Shapes — Smashing Magazine

Designer and author of “Art Direction for the Web”, Andy Clarke, has never been afraid of pushing boundaries when using CSS to create exciting new designs. In this tutorial, he goes beyond basic CSS Shapes and shows how you can use them to create five types of distinctive and engaging layouts for your art-directed designs.

HTML Includes That Work Today

Despite the fact that this markup starts out as an iframe, if you inspect the graphic above using developer tools, you’ll see the SVG markup for the icon, inlined right in the HTML DOM, with no iframe element to be found. This is because the code uses an iframe to load the file, and an onload event to inject the iframe's content just before the iframe in the HTML, before deleting the iframe itself.

Clever Code

This week, Chris Ferdinandi examined a clever JavaScript snippet, one that's written creatively with new syntax features, but is perhaps less readable and performant. It's a quick read, but his callout of our industry's fixation on cleverness is worth... calling out.

CSS Subgrid News and demos

A couple of weeks ago I spoke at Frontend NE in Newcastle, a big part of my talk was explaining what the CSS Grid Subgrid feature from Grid Level 2 would contain. I was given access to a Try build of Firefox Nightly, which has an early implementation of the feature. Here are a few screenshots. These include links to my CodePen examples so you can see the code for the subgrid elements.

CSS masonry with flexbox, :nth-child(), and order

Very clever technique!

Flexbox has no easy way of rendering items with a column layout while using a row order, but we can build a masonry layout with CSS only—no JavaScript needed—by using :nth-child() and the order property. In a gist, here’s the trick to create a row order while using flex-direction: column.