CSS-Tricks*

A Web Design Community curated by Chris Coyier

Latest Articles

Stacking Order of Multiple Backgrounds

2/25/2011
3 Comments

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it’s easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn’t obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The…

Read on! →

Letter Flipper

2/20/2011
22 Comments

Randomly, I made a letter flipper thingy the other day. I saw a similiarish effect on a Flash site and tried doing it with JavaScript instead. You can view source on that page to see the simple code. It’s just recursively calling a function to change the letter with a slight delay until the letters stored in a Array are up, then changing back to it’s original letter.

Read on! →

How Should We Calibrate Monitors for the Web?

2/15/2011
72 Comments

When designing for print, having a properly calibrated monitor makes all the sense in the world. If done perfectly, what you see on the monitor should look like what you get on paper from a printer. No surprises.
When designing for the web, there is no physical byproduct in which to match color. We designed it on a screen, for a screen. So what does calibration matter?

Read on! →

Latest Screencast

#94: Intro to Pseudo Elements

Pseudo elements are visible elements on a web page that aren't "in the DOM" or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo elements are CSS 2, so browser support for them is pretty good!

Links from Video:

Latest Snippets