filter effects

by Richard Hunter

HTML

<img class="foo1" src="http://www.nme.com/images/gallery/0932_145951_fionaapple_PA.jpg"/>

<img class="foo2" src="http://www.nme.com/images/gallery/0932_145951_fionaapple_PA.jpg"/>

<img class="foo3" src="http://www.nme.com/images/gallery/0932_145951_fionaapple_PA.jpg"/>

<img class="foo4" src="http://www.nme.com/images/gallery/0932_145951_fionaapple_PA.jpg"/>

CSS

img { float : left; }
.foo1 {
    -webkit-filter : blur(1px) sepia()
}

.foo2 {
    -webkit-filter : grayscale(100%) blur(1px);
}

.foo3 {
    -webkit-filter : saturate(5);
}

.foo4 {
   -webkit-filter : contrast(200%) sepia() blur(1px); 
}