Articles by

Chris Coyier

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

WebKit Native Asynchronous Script Loading

Direct Link

WebKit nightlies are now supporting this. The syntax looks like this:

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to

Blockquote Bulge

In HTML, a block of text being quoted from elsewhere is marked up like this:

<blockquote>Hey, I'm a block of text from elsewhere.</blockquote>

In your CSS, you’ll likely have special styling for these. Perhaps a bit of a background and …

Group Design Project: List with Functions

Hey folks, let’s design something together! I think it will be interesting and fun to try and tackle a simple design pattern as a group.

The Premise

The design pattern we are going to tackle is a list with functions

Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

You …

(Updated on )

Tuts+ Marketplace

You already know that Envato runs marketplace sites like ThemeForest, GraphicRiver, and CodeCanyon that help designers and developers get a jumpstart on projects through buying themes, graphics, and code to help out. You also already know that Envato runs tutorial …

htmlEntities for JavaScript

htmlentities() is a PHP function which converts special characters (like <) into their escaped/encoded values (like &lt;). This allows you to show to display the string without the browser reading it as HTML.

JavaScript doesn’t have a native version of …

HTML5 Pack for Illustrator CS5

Direct Link

Via Real World Illustrator:

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to “reskin” or modify the art

(Updated on )

Style Placeholder Text

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties.

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder 
(Updated on )

Need a Font Identified?

Direct Link

Stephen Coles of Typographica has a new Twitter account:

Rapid, human, independent type research. Send an image, get the font name and link. Alternatives too.

WhatTheFont! is cool, but you can’t beat professional human identification. Like the story of John …

(Updated on )

Adding Stroke to Web Text

Fonts on the web are essentially vector-based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, …

(Updated on )

Unzip Files

<?php
$zip = zip_open("zip.zip");
if (is_resource($zip)) {
  while ($zip_entry = zip_read($zip)) {
    $fp = fopen("zip/".zip_entry_name($zip_entry), "w");
    if (zip_entry_open($zip, $zip_entry, "r")) {
      $buf = zip_entry_read($zip_entry, zip_entry_filesize($zip_entry));
      fwrite($fp,"$buf");
      zip_entry_close($zip_entry);
      fclose($fp);
    }
  }
  zip_close($zip);
}
?>