Grow your CSS skills. Land your dream job.

Intermediate Articles

CSSĀ Gradients

This article was originally published on March 2, 2010. It was updated April 1, 2011, July 20, 2011, and again March 3, 2014, each time to clarify and correct browser prefixes and best practices.

Just as you can declare the …

How To Deal With Vendor Prefixes

There are plenty of different ways to deal with vendor prefixes in CSS as part of your workflow. It depends on if you hand-author CSS or preprocess, and even then there are choices.

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 …

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 …

HTML for Icon Font Usage

Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best.…

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.

*May or may not contain any actual "CSS" or "Tricks".