Clown Car Technique for Responsive Images

We can use media queries within SVG to serve up the right image. The beauty of the “Clown Car” technique is that all the logic remains in the SVG file. It’s called the “Clown Car” technique since we are including (or stuffing) many images (clowns) into a single image file (car)…

Better Image Preloading with CSS3

I recently added to my growing library of image-preloading methods with a few new & improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me. Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images…

Screencast: Editable CSS3 Image Gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser Safari or Chrome…