Like many css enthusiasts I enjoy trying new techniques especially when it simplifies other timely processes.
 
So while reading material from Smashing Magazine i found out that CSS Image Filters is possible, with minimal effort and maximum impact.
 
The implementation is quick, easy and has a multitude of amazing effects.
 
As my portfolio homepage features rollover images, from a desaturated state to full color state on hover, i thought this was the perfect chance to experiment and see could this save me time, especially impacting on my blogging cycle.
 
The CSS Filter can be used for lots of effects, for example:
 
The Structure:
- filter: filter(value);
 
The Values:

filter: blur(3px);
filter: brightness(0.5);
filter: saturate(30%);
filter: hue-rotate(13deg);
filter: contrast(100%);
filter: invert(60%);
filter: grayscale(80%);
filter: sepia(40%);

 
The only lapse of this amazing features is that, these effects are only truly usable within safari and chrome which use’s -webkit.
 
Although with the use of an svg file, the filter:greyscale can become effective within other browsers.
 
Below is the code, that i have used within my website, and the svg file. The code is courtesy of Demosthenes
 
SVG File
 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0  0  0  1 0"/>
 </filter>
 </svg>

 
CSS
 

img{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); filter: gray; -webkit-filter: grayscale(1);}

img:hover{ filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); -webkit-filter: grayscale(0); filter:none;}
© Copyright of Alexandra Milne 2013 | Privacy Policy | Disclaimer | Disclosure