Articles by

Chris Coyier

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

#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 …

(Updated on )

Rotating Feature Boxes

Three boxes: a main feature box and two sub features. Click on the sub feature boxes and the whole shebang rotates to make that the main feature. The animations happen via CSS3 (the future) and the clicks and class shuffling is done by JavaScript (its forte).

JavaScript MD5

var MD5 = function (string) {

   function RotateLeft(lValue, iShiftBits) {
           return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
   }

   function AddUnsigned(lX,lY) {
           var lX4,lY4,lX8,lY8,lResult;
           lX8 = (lX & 0x80000000);
           lY8 = (lY & 0x80000000);
           lX4 = (lX & 0x40000000);
           lY4 = (lY & 0x40000000);
           

WebKit Gradient Syntax

Direct Link

… is now the same as the Mozilla / Official spec version, which is great because 1) it’s easier to write and technically more powerful and 2) yay standards!

It’s only in the WebKit nightlies, but I’m sure will be …

Five Questions with Nicolas Gallagher

Nicolas has one of those web design blogs that everybody should subscribe to. He explains things with a thoroughness and understanding that we all should strive for. I caught up with Nicolas to ask him some questions about the future …

(Updated on )

Google Dropping H.264

Direct Link

Google Chrome is dropping support for the video codec H.264. Kinda feels like an Apple vs. Google pissing match as H.264 is so heavily used by Apple and WebM was developed by Google.

For HTML5 video, this is how it …

What’s the Difference?

Reader Paul writes in:

What’s the difference between .container div { } and div.container { }?

It’s great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very …

Moving Highlight

I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. …

Fix Select Dropdown Cutoff in IE 7

Run (at least the “Usage” part below) after you’ve loaded jQuery and either at the end of the page or in a DOM ready statement. Note that this fix does create a clone of the select, which will submit itself …