Articles by

Chris Coyier

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

Window load event with minimum delay

window.load can fire super duper fast if the page is cached. If you want to use that event but make sure a minimum amount of time has passed until it does…

(function fn() {

  fn.now = +new Date;

  $(window).load(function() {

     

outerHTML jQuery Plugin

innerHTML() is native and returns the contents of a DOM node (e.g. <span>I live inside a div.</span>. outerHTML() is not, which would include the current DOM node (e.g. <div><span>I live inside a div.</span></div>). This is a chain-able jQuery …

Slide In Image Captions

Reader Jason Lucchesi send me in a neat demo of image captions sliding in overtop an image on rollover. The effect used a bunch of nested divs to get it done, so I thought I’d do my own version of …

(Updated on )

CSS Pivot

CSS Pivot allows you to apply your own CSS to a site and then share the results (you get a unique URL which opens up that site in a top-bar/iframe dealy). Pretty clever stuff. If you saw a tweak of …

Hover on “Everything But”

Hover states are easy, but what if you want to apply a hover state to every element besides the one you are hovering over? We can do it with a little trickery.
(Updated on )

Converge SE 2011

Direct Link

June 24-25, 2011 in Columbia, South Carolina. It was awesome last year and this year should be ever better as it’s at a nicer venue and I’ll be speaking at it! $150 bucks for both days = super affordable as …

Comma Separated WebKit Animation Keyframes

Another little thing I learned from Estelle at the SXSW 2011 CSS3: Beyond The Basics panel was that you can comma separate the keyframe values in a WebKit animation declaration. Let’s say you wanted to create a pulsing effect as …

(Updated on )

ZEN Audio Player

Direct Link

Really cool audio player by simurai using HTML5 <audio, jPlayer (jQuery plugin), and CSS3 for the fancy animations. This made the rounds a few months back but I decided to wait until it was on GitHub, which then happened …