Gentleman wearing a steampunk gasmask and top hatGentleman wearing a steampunk gasmask and top hat

Previously I’ve discussed the concept of CSS filters, and stepped you through converting an image to black and white using CSS, without needing to create a new version. We can use the same approach to sepia-tone an image, for an old-timey photographic effect.

The HTML for this example is an image with an attached class, using a self-portrait photograph of Daniel Proulx, licensed under Creative Commons:

<img src="steampunk-man-in-gasmask.jpg" alt="Gentleman wearing a steampunk gasmask and top hat" class="sepia">

Using CSS filters is the easiest approach:

img.sepia {
	-webkit-filter: sepia(1);
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
}

That covers Chrome 18+, Firefox 35+, Safari 6+, Opera 15+ and the latest versions of all other mobile browsers. To cover earlier versions of Firefox, we write a separate SVG filter:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<filter id="old-timey">
		<feColorMatrix values="0.14 0.45 0.05 0 0
			0.12 0.39 0.04 0 0    
			0.08 0.28 0.03 0 0
			0 0 0 1 0" />
		</filter>
</svg>

Saving this code in a file with the name sepia.svg allows us to reference it in our CSS:

img.sepia {
	filter: url(sepia.svg#old-timey);
	-webkit-filter: sepia(1);
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	background-color: #5E2612;
	filter: alpha(opacity = 50);
	zoom:1;
}

Unfortunately there’s no explicit sepia filter for Internet Explorer, so we must fake it by placing a sepia color behind the image and making the image slightly transparent, restricting these changes to IE 9 and earlier (as I've discussed in previous articles, IE 10 and 11 are currently in an impossible situation regarding CSS filters):

img.sepia {
	filter: url(sepia.svg#old-timey);
	-webkit-filter: sepia(1);
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	background-color: #5E2612;
	filter: alpha(opacity = 50);
	zoom:1;
}

Next, we’ll look at blurring images.

Photograph by Daniel Proulx, licensed under Creative Commons.