seo Using CSS3 Filters to Image 2013

on Saturday, November 23, 2013 | 0 Comment

Seo Master present to you:

Filter effects are a way of processing an element's rendering before it is displayed in the document. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer (such as a raster image) and then that buffer is composited into the elements parent. Filters apply an effect before the compositing stage. Examples of such effects are blurring, changing color intensity and warping the image. Although originally designed for use in SVG, filter effects are a set a set of operations to apply on an image buffer and therefore can be applied to nearly any presentational environment, including CSS. They are triggered by a style instruction (the ‘filter’ property). This specification describes filters in a manner that allows them to be used in content styled by CSS, such as HTML and SVG. It also defines a CSS property value function that produces a CSS <image> value.

CSS3 Filters are a pretty exciting prospect for us Web Designers as they make effects that we typically associate with Photoshop, possible to apply in the browser with ease. Assuming across-the-board support eventually arrives, we can wave goodbye to countless annoying sprites for simple hover effects and instead, replace this tedious process with a single line of simple CSS.
The basic filters as listed in the W3C Draft are as follows: grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast,blur, drop-shadow, custom.

Code: apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

Grayscale

img {
    -webkit-filter:grayscale(1);
}

img:hover {
    -webkit-filter:grayscale(0);
}

Saturate

img {
    -webkit-filter:saturate(4);
}
img:hover {
    -webkit-filter:saturate(1);
}

Sepia

img {
    -webkit-filter:sepia(1);
}

img:hover {
    -webkit-filter:sepia(0);
}

Hue Rotate

img:hover {
    -webkit-filter:hue-rotate(360deg);
}

Invert

img {
    -webkit-filter:invert(1);
}

img:hover {
    -webkit-filter:invert(0);
}

Brightness

img {
    -webkit-filter:brightness(-0.5);
}

img:hover {
    -webkit-filter:brightness(0);
}

Hue-rotate and Animate

@-webkit-keyframes hue { 
    100% { -webkit-filter:hue-rotate(360deg); }  
}

img:hover {
    -webkit-animation:hue 1s linear infinite;
}

Grayscale and Brightness

img { 
    -webkit-filter:grayscale(1) brightness(-0.4);
}

img:hover {
    -webkit-filter:grayscale(0) brightness(0);
}

Demo

Grayscale

Grayscale is a very basic effect that I think we would see a lot more of if we could achieve it with a single line of CSS rather than having to use a sprite image.

DEMO