Articles by

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

@chriscoyier · chriscoyier.net

Masonry CSS

Direct Link

Simple and damn clever idea by Radu Chelariu. Use multiple columns and inline-block elements to create that “masonry” / staggered block layout that is hugely difficult to do otherwise.

This link is offline now, so I’m changing it to this …

(Updated on )

Case Study: jQuery Fixer Upper

We'll look at some jQuery code that a CSS-Tricks reader posted in the forums. We'll suggest ways to improve the code to make it more efficient and more extensible. We'll also make some guesses about the HTML that it goes with and discuss improvements there.
(Updated on )

Window Inactive Styling

Using some non-standard pseudo selectors, you can change the styling of things when the browser window is inactive. The only "practical" use right now is text selection colors, which automatically do this unless you override it. But we'll fix that!

Outer Border Radius Tabs

Direct Link

Imagine a real-life tabbed folder. The tabs on those aren’t only rounded at the top of the tab, but they also connected to the folder with a rounded edge. Top corners, easy, just border-radius. Bottom corners, not so easy. …

(Updated on )

Border Radius on Images

Direct Link

If you ever tried to use border-radius on <img>‘s, you know that it doesn’t always work (even if the browser supports that CSS3 property, like Firefox 3 and Opera 11). The root of it is that the image is …

(Updated on )

Browser Support for :before/:after Pseudo Elements

The exact (pretty much) browser support levels for these style of pseudo elements. It's pretty darn deep, folks, and you can do really cool things with them while keeping your markup clean.
(Updated on )

Font Sizing with REM

Direct Link

One of the problems with using “em” as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em; CSS3 now has rem (“root em”) to prevent that issue. …

Custom Radio Buttons 

#foo:checked::before,
input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}

#foo:checked,
input[type="checkbox"] + label::before {
    content: url('checkbox.png');
}

input[type="checkbox"]:checked + label::before {
    content: url('checkbox-checked.png');
}

#foo doesn’t reference any particular element, it’s there purely to prevent browsers from …

Custom Scrollbars in WebKit

You can customize scrollbars in WebKit browsers. Here's the CSS you need to know about to get it done, with examples.
(Updated on )