Articles by

Chris Coyier

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

@chriscoyier · chriscoyier.net

Corner Ribbon 

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>​
.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green
…
(Updated on )

BarCamp Tour 2012

Direct Link

I’ll be representin’ Wufoo at a bunch of BarCamps again this year. Super fun. We need to figure out exactly what (U.S.) cities we are going to go to this year, so if you are organizing one, hit us up …

Video Screencasts

#100: Let’s Write Semantic Markup
Running time: 01:02:07
We look at a Photoshop design and write HTML5 markup that describes it as semantically as we can.
#99: Overview of HTML5 Forms Types, Attributes, and Elements
Running time: 38:33
We’ll talk
…

tab-size

The tab-size property in CSS is used to adjust the amount of spaces that display for the tab character.

pre {
  tab-size: 8; /* default. Pretty big! */

  tab-size: 2;
  tab-size: 13px; /* you can set a width-per-tab also */
…
(Updated on )

Turn on WordPress Error Reporting

Comment out the top line there, and add the rest to your wp-config.php file to get more detailed error reporting from your WordPress site. Definitely don’t do this live, do it for local development and testing. 

// define('WP_DEBUG', false);

define('WP_DEBUG',
…

Musings on Preprocessing

I’ve been using Sass for pretty much everything I do recently. Here’s some musings on the journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax.…

(Updated on )