Intermediate Articles

Receding Background Modal Boxes

In which we reverse engineer the really cool effect of Hakim El Hattab's Avgrund demo. Visually pleasing, but also an effective and clear design pattern for modal/dialog boxes.

Don’t Overthink It Grids

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid.

If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated.

Here's how I build grids. It's not hard or complicated. Even making them flexible is no big deal.

(more…)

Crazy Town Selectors

I recently used this selector as an example in a blog post:

.article #comments ul > li > a.button {
  /* Crazy town */
}

There was a few comments to the effect that this seemed perfectly reasonable. I think if we step through it backwards the craziness comes out more clearly.

(more…)

On :target

The :target pseudo selector in CSS is both pretty cool and pretty limited in what it can do. In this article we discuss some things it can be helpful with, its limitations, and some work arounds.

Minimum Paragraph Widths in Fluid Layouts

In fluid width environments, the text that wraps around floated elements can get awkwardly narrow and trap bits of text orphaned away from the rest of the paragraph. This article explains that problem in more details and offers a few solutions.

(Better) Tabs with Round Out Borders

A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag