Articles by

Chris Coyier

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

A proposal to drop browser vendor prefixes

Direct Link

Interesting idea by Felipe G on using a new at-rule, @-vendor-unlock, to tell the browser to use it’s experimental implementation of any particular property, rather than using a vendor prefix on that property. Unfortunately at this point, even if …

Digging Into WordPress 3.3

Direct Link

Digging Into WordPress (the book) is now updated to v3.3. Includes new chapters specially on what’s new in 3.2 and 3.3, all the rest of the chapters tightened up and refreshed, better internal hyperlinking (in the PDF), and more. It’s …

ShopTalk Episode 4

Direct Link

Dave, Jonathan Longnecker, Nate Croft and I talk shop. Topics include website building apps, where to start designing, when not to design for modern browsers, and more.

Sponsored by LessAccounting. …

(Updated on )

Real-World CSS

Direct Link

A very serious not at all tongue-in-cheek gallery of CSS3 techniques that poo-poos the fancy in favor of the practical.…

Better Box Sizing

Direct Link

Paul Irish suggests the universal selector (*) to apply border-box box-sizing to every element. I’ve been wanting to try this forever because this box model is, in my opinion, just better. Imagine: elements with percentage widths and pixel padding without …

(Updated on )

Firefox 10

Direct Link

…is now a stable release. It’s notable because it’s the first release with it’s own built in developer tools (video overview). It’s all HTML/CSS for now (not a Firebug replacement) but they are nicely designed and a great …

Poll Results: Internet Connection Speed

In this latest poll, I asked people to test their own internet connection speed then vote in the poll based on their result. The speed choices ranged from (what I would consider) blazingly fast, to mediocre, to nearly unusably …

(Updated on )

Twitter Bootstrap 2.0

Direct Link

If your web app doesn’t look or work as well as Bootstrap does out of the box, it’s time to have a pretty serious discussion with your team about why.…

Layered Paper

<div class="layered-paper">
    Howdy
</div>
.layered-paper {
    background: #eee;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
        0 10px 0 -5px #eee, /* The second layer */
        0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */