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:

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

Using CSS filters is the easiest approach:

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

That covers all modern browsers on desktop and mobile. To cover versions of Firefox prior to v35, 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. At the same time, I'll write in support for other older browser versions:

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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/zbdvE