9 Useful CSS3 Filter

Yesterday opened the blog Park blog, thank you here. Although the attention here for several years, but also with my growth has given me a lot of help, but has not opened a technical blog itself, feel wasted a lot of good time ah.

The first day to open a blog to copy someone else's article, ashamed ... Feel good articles or to stay good, whether it is copied, will often come to see.

First, preface

IE-specific filters are often added as CSS3 for various new features, and Adobe has moved to HTML5 with Chrome to launch the CSS3 filter feature, so currently only webkit the kernel's browser supports CSS3 filter, and FF and ie10+ You will need to use the SVG filter (SVG effects for HTML) or canvas as an alternative, while ie5.5~9 uses IE filters, js+div, or VML processing! This article is to occupy a pit, after slowly fill ^_^!!!

CSS3 Filter Compatibility table

SVG effect for HTML compatibility table

The following filters are explored below!

Speia Filter Grayscale Filter Gaussian blur filter Inverse color filter saturation filter

Contrast filter Brightness filter hue rotate filter Shadow Filter

First P Zhang Yuantu as a reference system (pure mm Oh!!) ）

Second, Speia filter (Speia)

The Speia filter is the whole sepia treatment of a picture or element, which is the effect of an old photo. See the curative effect directly below!

Look, the traces of the years ah, is not the feeling of Mother's age?!

1. CSS3 Filter Implementation

<style type= "Text/css" >  . sepia{    /**  format, Filer:sepia (Effect range)     *  effect range, with a value range of 0-1 or 0-100% ; 0 means no effect, 1 or 100% means maximum effect     */    -webkit-filter:sepia (100%);      -moz-filter:sepia (100%);    -o-filter:sepia (100%);    -ms-filter:sepia (100%);    Filter:sepia (100%);    } </style><div class= "Sepia" style= "Background:url (./mm.jpg)" ></div>

2. Ie5.5~9 treatment Method (pending study)

Have tried IE filter filter:progid:XDImageTransform.Microsoft.MaskFilter (color= color), only can use GIF picture (other format of picture will cause the whole element disappears), And the part of the mask layer that overlaps the picture becomes blank, and the filter is invalidated in the IE11 browser document mode 5.5~9 (the element is rendered as if no filter was set). Conclusion: IE filter cannot handle sepia effect.

And through the JS pits aspect, Idea 1: Attach a layer of translucent tan on the element surface, but the effect and CSS3 filter is far apart, the failure ended ....

3. How FF and ie10+ are handled

You can use canvas for processing, the following is a simple implementation of the code, the target element

Define the processing method var sepia = function (EL) {  var canvas = document.createelement (' canvas ');  var w = Canvas.width = el.offsetwidth,        h = canvas.height = El.offsetheight;  var ctx = Canvas.getcontext (' 2d ');  Ctx.drawimage (el, 0, 0);    Processing of the pixel  var imgdata = ctx.getimagedata (0, 0, W, h), d = imgdata.data;  for (int i = 0, len = d.length; i < Len; i+=4) {    var r = d[i],         g = d[i+1],         b = d[i+2];    D[i] = (R * 0.393) + (G * 0.769) + (b * 0.189);    D[I+1] = (R * 0.349) + (G * 0.686) + (b * 0.168);    D[I+2] = (R * 0.272) + (G * 0.534) + (b * 0.131);  }  Ctx.putimagedata (imgdata, 0, 0);  Export  var img = new Image ();  IMG.SRC = Ctx.todataurl ("image/*");  Return img;};/ /Call var img = Sepia (document.getElementById (' sepia '));d Ocument.body.appendChild (IMG);

Third, grayscale image filter (grayscale)

Gray-scale graphic art fan!

1. Implementation of the CSS3 filter

<style type= "Text/css" >  . grayscale{    /**  format, Filer:grayscale (Effect range)     *  effect range, Values range from 0-1 or 0-100%;0 for no effect, 1 or 100% for maximum effect     */     -webkit-filter:grayscale (100%);     -o-filter:grayscale (100%);     -moz-filter:grayscale (100%);     -ms-filter:grayscale (100%);     Filter:grayscale (100%);    } </style><div class= "grayscale" style= "Background:url (./mm.jpg)" ></div>

2. Implementation of IE5.5~9

Using IE filter: filter:gray;

3. How FF and ie10+ are handled

How to use SVG effect for HTML:

grayscale.svg:

<svg xmlns= "Http://www.w3.org/2000/svg" >   <filter id= "grayscale" >    <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>  

Index.html:

<style type= "Text/css" >.grayscale{  filter:url (./grayscale.svg#grayscale);} </style><div class= "grayscale" style= "Background:url (./mm.jpg)" ></div>

You can use canvas for processing , the following is a simple implementation of the code, the target element

var grayscale = function (EL) {  var canvas = document.createelement (' canvas ');  var w = Canvas.width = el.offsetwidth,        h = canvas.height = El.offsetheight;  var ctx = Canvas.getcontext (' 2d ');  Ctx.drawimage (el, 0, 0);    Processing of the pixel  var imgdata = ctx.getimagedata (0, 0, W, h), d = imgdata.data;  for (int i = 0, len = d.length; i < Len; i+=4) {    var r = d[i],         g = d[i+1],         b = d[i+2];    D[i] = d[i+1] = d[i+2] = (r+g+b)/3;  }  Ctx.putimagedata (imgdata, 0, 0);  Export  var img = new Image ();  IMG.SRC = Ctx.todataurl ("image/*");  Return img;};/ /Call var img = grayscale (document.getElementById (' grayscale '));d Ocument.body.appendChild (IMG);

Four, Gaussian blur filter (Blur)

Gaussian Blur reminds me of forgetting to wear glasses to the streets *~*!

1. Implementation of the CSS3 filter

<style type= "Text/css" >  . blur{    /**  format, Filer:blur (blur radius)     *  blur radius, value range 0~npx,0 to no effect     */     -webkit-filter:blur (1px);     -moz-filter:blur (1px);     -o-filter:blur (1px);     -ms-filter:blur (1px);     Filter:blur (1px);   } </style><div class= "Blur" Style= "Background:url (./mm.jpg)" ></div>

2. Implementation of IE5.5~9

Using IE Filter: filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=10, Makeshadow=false); , the mode in the IE11 Chinese document pattern for 5.5~9 all functions.

3. FF and ie10+ implementations

How to use SVG effect for HTML:

blur.svg:

<?xml version= "1.0" encoding= "Utf-8"? ><! DOCTYPE svg public "-//W3C//DTD svg 1.1//en" "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" ><svg version= " 1.1 "      xmlns=" http://www.w3.org/2000/svg "     xmlns:xlink=" Http://www.w3.org/1999/xlink "     xmlns:ev=" http ://www.w3.org/2001/xml-events "          baseprofile=" full ">         <defs>        <filter id=" blur ">            <fegaussianblur stddeviation= "Ten"/>        </filter>    </defs>
    <image xlink:href= "./mm.jpg" x= "0" y= "0" height= "$" width= "$" filter= "url (#blur)"/></svg>

Index.html (FF):

<style type= "Text/css" >.blur{  filter:url (Blur.svg#blur);} </style><div class= "Blur" Style= "Background:url (./mm.jpg)" ></div>

index.html (ie10+, ie10+ does not support applying an SVG filter directly to an element in a style sheet):

<style type= "Text/css" >.blur{  background-iamge:url (blur.svg);} </style><div class= "Blur" ></div>

using canvas for processing , Gaussian blur algorithm please refer to: Ruan Teacher's "Gaussian fuzzy algorithm" reference translation, processing library stackblur.js.

Processing Library API: stackblurimage (sourceImageId, Targetcanvasid, radius, bluralphachannel);

• sourceImageIDThe image to be blurred id , the default is to hide the picture;

• targetCanvasIDThat represents the element to display the blurred picture canvas id ;

• radiusRepresents the radius size of the blur. However, according to my comparison test, it seems that the radius blur value of the filter filter in CSS is not a 1:1 match, but it is somewhat similar. that is, the 2:1 20px radius blur is approximate to the blur filter value set in CSS 10px;

• blurAlphaChannelis a Boolean property that indicates aplha whether the transparent channel is blurred, indicating that it true should be blurred.

Five, anti-color filter (Inver)

Experienced the rubber circle of the age of the students are familiar with Oh!

1. Implementation of the CSS3 filter

<style type= "Text/css" >  . invert{    /**  format, Filer:invert (Effect range)     *  effect range, value range 0~1 or 0~100%, 0 is no effect, 1 or 100% means maximum effect     */     -webkit-filter:invert (1);     -moz-filter:invert (1);     -o-filter:invert (1);     -ms-filter:invert (1);     Filter:invert (1);   } </style><div class= "Invert" style= "Background:url (./mm.jpg)" ></div>

2. Implementation of IE5.5~9 (pending study)

3. FF and ie10+ implementations

You can use canvas for processing , the following is a simple implementation of the code, the target element

var invert = function (EL) {  var canvas = document.createelement (' canvas ');  var w = Canvas.width = el.offsetwidth,        h = canvas.height = El.offsetheight;  var ctx = Canvas.getcontext (' 2d ');  Ctx.drawimage (el, 0, 0);    Processing of the pixel  var imgdata = ctx.getimagedata (0, 0, W, h), d = imgdata.data;  for (int i = 0, len = d.length; i < Len; i+=4) {    var r = d[i],         g = d[i+1],         b = d[i+2];    D[i] = 255-r;    D[I+1] = 255-g;    D[I+2] = 255-b;  }  Ctx.putimagedata (imgdata, 0, 0);  Export  var img = new Image ();  IMG.SRC = Ctx.todataurl ("image/*");  Return img;};/ /Call var img = invert (document.getElementById (' invert '));d Ocument.body.appendChild (IMG);

Six, saturation filter (saturate)

The warm bright ~~~!

1. Implementation of the CSS3 filter

<style type= "Text/css" >  . saturate{    /**  format, filer:saturate (Effect range)     *  effect range, value range >= 0 of the number or percentage, 1 is no effect, 0 is a grayscale image     *     /-webkit-filter:saturate (2);     -moz-filter:saturate (2);     -o-filter:saturate (2);     -ms-filter:saturate (2);     Filter:saturate (2);   } </style><div class= "saturate" style= "Background:url (./mm.jpg)" ></div>

2. Implementation of Ie5.5~9 (pending study)

3. Implementation of FF and ie10+ (pending study)

Seven, contrast filter (contrast)

1. Implementation of the CSS3 filter

<style type= "Text/css" >  . contrast{    /**  format, filer:contrast (Effect range)     *  effect range, value range >= 0 of the numbers or percentages, 1 for no effect     *     /-webkit-filter:contrast (2);     -moz-filter:contrast (2);     -o-filter:contrast (2);     -ms-filter:contrast (2);     Filter:contrast (2);   } </style><div class= "contrast" style= "Background:url (./mm.jpg)" ></div>

2. Implementation of Ie5.5~9 (pending study)

3. Implementation of FF and ie10+ (pending study)

Eight, brightness filter (brightness)

Excessive exposure Oh!

1. Implementation of the CSS3 filter

<style type= "Text/css" >  . brightness{    /**  format, filer:brightness (Effect range)     *  effect range, value range >= 0 of the numbers or percentages, 1 for no effect     *     /-webkit-filter:brightness (2);     -moz-filter:brightness (2);     -o-filter:brightness (2);     -ms-filter:brightness (2);     Filter:brightness (2);   } </style><div class= "Brightness" style= "background:url (./mm.jpg)" ></div>

2. Implementation of Ie5.5~9 (pending study)

3. FF and ie10+ implementations

You can use canvas for processing , the following is a simple implementation of the code, the target element

Principle: Make the image brighter or darker, the algorithm will be red channel, green channel, blue channel, plus a positive or negative value. var brightness = function (el, delta) {  var canvas = document.createelement (' canvas ');  var w = Canvas.width = el.offsetwidth,        h = canvas.height = El.offsetheight;  var ctx = Canvas.getcontext (' 2d ');  Ctx.drawimage (el, 0, 0);    Processing of the pixel  var imgdata = ctx.getimagedata (0, 0, W, h), d = imgdata.data;  for (int i = 0, len = d.length; i < Len; i+=4) {    var r = d[i],         g = d[i+1],         b = d[i+2];    D[i] = r + Delta;    D[i+1] = g + Delta;    D[I+2] = b + Delta;  }  Ctx.putimagedata (imgdata, 0, 0);  Export  var img = new Image ();  IMG.SRC = Ctx.todataurl ("image/*");  Return img;};/ /call var img = Brightness (document.getElementById (' brightness ', ten));d Ocument.body.appendChild (IMG);

Nine, Hue rotation filter (hue Rotate)

The Strange Bright ~ ~

1. Implementation of the CSS3 filter

<style type= "Text/css" >  . hue-rotate{    /**  format, filer:hue-rotate (Effect range)     *  effect range, value fan 0deg~ 365deg,0 (default) is no effect     *     /-webkit-filter:hue-rotate (200deg);     -moz-filter:hue-rotate (200deg);     -o-filter:hue-rotate (200deg);     -ms-filter:hue-rotate (200deg);     Filter:hue-rotate (200deg);   } </style><div class= "Hue-rotate" style= "Background:url (./mm.jpg)" ></div>

2. Implementation of Ie5.5~9 (pending study)

3. Implementation of FF and ie10+ (pending study)

Ten, Shadow Filter (Drop Shadow)

Add three-dimensional sense!

1. Implementation of the CSS3 filter

<style type= "Text/css" >  . drop-shadow{    /**  format, Filer:drop-shadow (X-offset Y-offset shadow blur radius shadow color)     *  X-offset and Y-offset are shadows relative to the upper left-hand corner of the element;     * Note:     *     1. The appearance of the shadow is affected by the Border-radius style;     *     2.: After and: pseudo-elements such as before inherit the effect of shadows.     *     /-webkit-filter:drop-shadow (5px 5px 0px #333);     -moz-filter:drop-shadow (5px 5px 0px #333);     -o-filter:drop-shadow (5px 5px 0px #333);     -ms-filter:drop-shadow (5px 5px 0px #333);     Filter:drop-shadow (5px 5px 0px #333);      Rounded corners     border:solid 10px #e00;     -webkit-border-radius:10px;  } </style><div class= "Drop-shadow" style= "Background:url (./mm.jpg)" ></div>

2. Implementation of IE5.5~9

In the real ie5.5~9 can use IE filter (ie10+ Chinese file mode is 5.5~9, the following IE filter is invalid):

/** * Color is a shadow color, shaped like "#ff00cc" * Direction for angle, range 0,45,90,135,180,225,270,315 */filter:shadow (color=color,direction= direction);/** * Color is a shadow color, shaped like "#ff00cc" * offx is a horizontal offset * offy is a vertical offset * Positive is 1 or 0 */filter:dropshadow (color=color,offx= offx,offy=offy,positive=positive);

ie10+ when the Chinese file mode is 5.5~9, it needs to be div+js processed. There is a jquery plugin: http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js

3. FF and ie10+ implementations

by CSS3 New Box-shadow processing , Box-shadow: Projection mode (inset) x-axis offset (x-offset) y-axis offset (y-offset) shadow blur radius (Blur-radius) Shadow expansion radius (Spread-radius) shadow color (color).

projection mode (inset), an optional property (default is an outer shadow), and an inner shadow when set to inset.

x-axis offset (x-offset), positive value indicates that the shadow is on the right side of the object, and a negative value indicates that the shadow is on the left.

Y-axis offset (y-offset), positive value indicates that the shadow is at the bottom of the object, and a negative value indicates that the shadow is at the top of the object.

shadow Blur radius (Blur-radius), optional attribute (default = 0, no blur effect), value range >=0.

Shadow Expansion radius (Spread-radius), optional attribute, positive value for shadow extension, negative for shadow reduction.

color, optional attribute (default is also browser-determined, WebKit kernel is transparent).

Attention:

1. Impact of the appearance of the projection border-radius样式 ;

2. :after and :before equal pseudo-elements do not inherit the effect of the projection.

Xi. Summary

The above content only CSS3 filter and FF, IE alternative solutions for simple introduction, if there are flaws please correct me, thank you!

Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/4127888.html ^_^ Fat Boy John

12. Reference

http://blog.csdn.net/hfahe/article/details/7104496

Http://www.yyjcw.com/html/News/793.html

Http://www.hackbase.com/tech/2014-11-10/69684.html

http://blog.csdn.net/lujunql/article/details/6260643

Http://www.cnblogs.com/shiyangxt/archive/2008/11/16/1334633.html

Http://www.adobe.com/cn/devnet/html5/articles/css3-basics.html

Http://www.educity.cn/jianzhan/630820.html

Http://www.526net.com/blog/qianduan/226.html

http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8% bd%ac%e6%8d%a2%e6%88%90%e6%a8%a1%e7%b3%8a%e6%af%9b%e7%8e%bb%e7%92%83%e6%95%88%e6%9e%9c/

Svg

(applying-svg-effects-to-html-content)--http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html

Canvas

http://www.webclks.com/archives/829

Http://www.w3school.com.cn/tags/canvas_getimagedata.asp

Http://www.webhek.com/convert-canvas-image

9 Useful CSS3 Filter