Unlock big wins and bonuses at plinko casino, with no-KYC policies and rapid withdrawals. Enjoy mobile play without any lag or limits.
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(https://thenewcode.com/files/533/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(https://thenewcode.com/files/533/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
