A test with CSS-Filters
Based upon: http://vhardy.github.com/presentations/html5-community-meet-up-2012/#/7/8
by Jens Grochtdreis
HTML
<ul class="clearfix">
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/400/kal2008-03.png" id="" alt="" /><span class="info">original</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-grayscale" alt="" /><span class="info">grayscale</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-sepia" alt="" /><span class="info">sepia</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-saturate" alt="" /><span class="info">saturate</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-hue-rotate" alt="" /><span class="info">hue-rotate</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-opacity" alt="" /><span class="info">opacity</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-invert" alt="" /><span class="info">invert</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-brightness" alt="" /><span class="info">brightness</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-contrast" alt="" /><span class="info">contrast</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-blur" alt="" /><span class="info">blur</span></li>
<li><img src="http://grochtdreis.de/fuer-jsfiddle/bilder/kal2008/200/kal2008-03.png" id="img-drop-shadow" alt="" /><span class="info">drop-shadow</span></li>
</ul>
CSS
ul, li {list-style-type: none;margin: 0; padding: 0;}
li {float: left; margin: 0 0 20px 20px;background-color: #fff;border: 1px solid #cecece;padding: 20px;}
li:first-child {margin-left: 0;}
img {display: block;}
span {display: block; text-align: center; margin: 10px 0 0 0;}
/* the filters */
#img-grayscale {-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1);-ms-filter: grayscale(1);filter: grayscale(1)}
#img-sepia {-webkit-filter: sepia(0.8);-moz-filter: sepia(0.8);-o-filter: sepia(0.8);-ms-filter: sepia(0.8);filter: sepia(0.8)}
#img-saturate {-webkit-filter: saturate(0.8);-moz-filter: saturate(0.8);-o-filter: saturate(0.8);-ms-filter: saturate(0.8);filter: saturate(0.8)}
#img-hue-rotate {-webkit-filter: hue-rotate(90deg);-moz-filter: hue-rotate(90deg);-o-filter: hue-rotate(90deg);-ms-filter: hue-rotate(90deg);filter: hue-rotate(90deg)}
#img-opacity {-webkit-filter: opacity(0.2);-moz-filter: opacity(0.2);-o-filter: opacity(0.2);-ms-filter: opacity(0.2);filter: opacity(0.2)}
#img-invert {-webkit-filter: invert(1);-moz-filter: invert(1);-o-filter: invert(1);-ms-filter: invert(1);filter: invert(1);}
#img-brightness {-webkit-filter: brightness(0.25);-moz-filter: brightness(0.25);-o-filter: brightness(0.25);-ms-filter: brightness(0.25);filter: brightness(0.25)}
#img-contrast {-webkit-filter: contrast(0.5);-moz-filter: contrast(0.5);-o-filter: contrast(0.5);-ms-filter: contrast(0.5);filter: contrast(0.5)}
#img-blur {-webkit-filter: blur(6px);-moz-filter: blur(6px);-o-filter: blur(6px);-ms-filter: blur(6px);filter: blur(6px)}
#img-drop-shadow {-webkit-filter: drop-shadow(2px 2px 12px rgba(0, 0, 0, 1));-moz-filter: drop-shadow(2px 2px 12px rgba(0, 0, 0, 1));-o-filter: drop-shadow(2px 2px 12px rgba(0, 0, 0, 1));-ms-filter: drop-shadow(2px 2px 12px rgba(0, 0, 0, 1));filter: drop-shadow(2px 2px 12px rgba(0, 0, 0, 1))}
/* basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%;...
JavaScript
// Based upon: http://vhardy.github.com/presentations/html5-community-meet-up-2012/#/7/8
// see infos:
// http://davidwalsh.name/css-filters
// Testdrive
// http://html5-demos.appspot.com/static/css/filters/index.html