A Web Design Community curated by Chris Coyier

Latest Articles RSS

Commas Before

Marc Grabanski brought up and interesting idea on Twitter yesterday.

Commas before or after the line on json objects and multi var definitions?

Posted on: 10/26/2010 with 40 Comments Read on! →

Garage Door Style Menu

Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo’ betta.

A garage door style menu is where an image (the “door”) slides up to reveal something behind it. We’ll do this in two ways, with CSS3, and with jQuery. Then we’ll combine them into a progressive enhancement way to handle it.

Posted on: 10/25/2010 with 95 Comments Read on! →

Parent Selectors in CSS

Let’s be clear here, just in case someone is finding this from a search engine: there are no parent selectors in CSS, not even in CSS3. It is an interesting topic to talk about though, and some fresh talk has surfaced.

Back in 2008, Shaun Inman suggested the syntax:

a < img { border: none; }

[Corrected the following sentence]: In this example, it would select a tags but only if they contained an img tag. (Aside: this…

Posted on: 10/21/2010 with 59 Comments Read on! →

Fluid Width Equal Height Columns

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.

If a design is NON-fluid width, this task becomes considerably easier. The best technique to use is Dan Cederholm’s Faux Columns where…

Posted on: 10/18/2010 with 33 Comments Read on! →

Make a ‘View Source’ Button

Remy Sharp’s cool site for HTML5 demos has a “View Source” button on each of the individual demo pages. Click it, and you see the entire source code for the page you are looking at. It’s not a popup or a new tab, it just shows the source right there on the page. I thought that was cool so I set out to recreate it my own way.

Posted on: 10/8/2010 with 40 Comments Read on! →

Browse the Archives →

Latest Screencast

#92: Code Walkthrough of Drawing Table

The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy and useful as possible. In this screencast we walk through the existing code looking at the finished example, the markup, and the JavaScript powering that it – feature by feature.

Links from Video:

Latest Snippets

Formalize CSS Direct Link →

Framework by Nathan Smith for nice looking, HTML5 ready, progressively enhanced, cross-browser forms.

Boilerplate CSS3 Media Queries Direct Link →

A collection of media queries from Andy Clarke to get you started building responsive sites. Responsive is the new word for sites that react to the space they have available to restyle their content the best they can in that space.

Digging Into WordPress v3 – Back in Print Direct Link →

Version three of my book, co-authored by Jeff Starr, has been revised from cover to cover ensuring everything is up to date and featuring a new chapter on WordPress 3. Now the print version is back in limited quantity sporting a new fancy black glossy cover and black spiral bind (lays flat!).

It’s not cheap at $70.00 (+S&H), but that’s what it took to create this full-color beauty. Of course that comes with the PDF and free lifetime…

* This website may or may not contain any actual CSS or Tricks.