I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Astrophotograph of globules in the Running Chicken Nebula by Fred Vanderhaven

More Resources For Free (And Nearly Free) Legal Images

tools / images

Estimated reading time: 4 minutes

Yesterday there was a massive shake-up in the world of free image resources. Getty Images – one of the world’s largest photographic rights holders – made most of its 35 million images available free of charge for non-commercial, editorial use.

Getty allows you to embed the images it provides through <iframe> elements, as YouTube does its videos. Unfortunately <iframe> elements are not responsive by default, making Getty’s standard fare of limited use in modern websites. In this article I’ll show you how to change that, together with a list of even more resources for free images.

Photograph of a woman model in a strained handstand, shown upside-down

Resources For Free, Legal Web Images

tools / images

Estimated reading time: 2 minutes, 45 seconds

In an ideal world, every website would entirely consist of its own, original content. But back in the real world, deadlines and budgets rarely make that possible. Web designers and developers find themselves under increasing pressure to illustrate pages with diminished art budgets, even as they try to avoid bland stock photography. Completely free images, whether used for comps or the final product, are usually associated with poor quality, but that’s no longer necessarily true… so long as you know how and where to look.

Photograph of a Chinese model dressed as a princess reclining on a wooden bench
A single image element enhanced with CSS framing effects

Sophisticated Image Matting Effects With CSS

css / images

Estimated reading time: 3 minutes

When creating image framing effects most designers opt for one of two choices: create the result entirely in , or draw “boxes inside boxes” that are then manipulated with . In a previous article I demonstrated how to create complex framing effects by using border-image; in this article, I’ll approach the more subtle art of matting.

“Matting”, as referenced in the art framing industry, is the separation of artwork from its frame by a series of mounts. These mounts are often made from cardboard in different colors and textures. The goal of this article to recreate that visual effect on a web page without adding any elements around an image; the only markup will be:

<img class="mat" src="chinese-princess.jpg" alt="Photograph of a Chinese princess reclining on a wooden bench">

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.