Articles by

Chris Coyier

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

@chriscoyier · chriscoyier.net

Blurry Text

Make the text color transparent but add a shadow:

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Blurry

More browsers support color than text-shadow though, so you might want to do feature detection. Or, leave the color …

(Updated on )

CSS3 Loading Spinner

A WebKit-only demo of a loading animation. Loading text slowly reveals itself over and over while a spinner rotates around in a circle over and over infinitely.
(Updated on )

Custom Database Error Page

Put a file called “db-error.php” directly inside your /wp-content/ folder and WordPress will automatically use that when there is a database connection problem. 

<?php // custom WordPress database error page

  header('HTTP/1.1 503 Service Temporarily Unavailable');
  header('Status: 503 Service Temporarily Unavailable');
…

“Stitched” Look 

.stitched {
   padding: 20px;
   margin: 10px;
   background: #ff0030;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
…
(Updated on )

Rein In Fluid Width By Limiting HTML Width

You can set a max-width on the html element which helps keep fluid width sites under control with zero extra markup. Plus it's got pretty good browser support with a No Big Deal™ fallback.
(Updated on )

Output Buffering 

<?php
 
  // Start buffering
  ob_start();

  // Output stuff (probably not this simple, might be custom CMS functions...
  echo 'Print to the screen!!!';

  // Get value of buffering so far
  $getContent = ob_get_contents();

  // Stop buffering
  ob_end_clean();

  // Do stuff to
…

Variable Variables 

<?php

  $var1 = 'nameOfVariable';

  $nameOfVariable = 'This is the value I want!';

  echo $$var1; 

?>
…

WebKit Adjacent/General Sibling & Pseudo Class Bug

Good news everyone! This is fixed in both stable releases of the WebKit browser Safari (5.1) and Chrome (13)

It’s not every day you come across a solid bug in WebKit, which it seems to me leads the pack in …

(Updated on )

Different Transitions for Hover On / Hover Off

In other words, “Different transitions on mouseenter and mouseleave” as those are the DOM events that happen, but we’re not using JavaScript here, we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself …

HTML5 Article Structure with hNews

The spec for hNews.

<article class="hentry">
  <header>
    <h1 class="entry-title">But Will It Make You Happy?</h1>
    <time class="updated" datetime="2010-08-07 11:11:03-0400" pubdate>08-07-2010</time>
    <p class="byline author vcard">
        By <span class="fn">Stephanie Rosenbloom</span>
    </p>
  </header>

  <div class="entry-content">
      <p>...article text...</p>
      <p>...article text...</p>
   
      <figure>
        <img src="tammy-strobel.jpg" alt="Portrait of
…
(Updated on )