Skip to main content

Chris Coyier

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

Link

ProCSSor

Link

WebKit Native Asynchronous Script Loading

Article

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 padding:

blockquote { padding: 10px; background: #eee; }

If the quote is multiple paragraphs, there may be paragraphs nested within the blockquote (both are block-level elements so that's fine). Quotes are also likely to be within larger areas of … Read article

Article

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. Think of a list of five names. The primary function of this list is to click the names. The secondary function of the list is that the list needs to be manageable. There needs to be some kind of … Read article

Article

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 might think it would be as simple as this:

#lightbox {
   background: white;
   border: 20px solid rgba(0, 0, 0, 0.3);
}

However, setting a transparent border on an element will reveal the elements own background underneath the border.

In the … Read article

Article

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 blogs like Nettuts+, Phototuts+, and Psdtuts+ which also help designers and developers through teaching.

In a brilliant-in-its-simplicity move, Envato has combined these two worlds into the Tuts+ Marketplace. Now their premium tutorials are available à la carte. I think … Read article

Snippet

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 it. If you just need the very basics to so that the browser won't interpret as HTML, this should work fine (via James Padolsey and I got a a similar idea from David Walsh).

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, 
Read article
Link

HTML5 Pack for Illustrator CS5