{filter:} Filter CSS Property | CSS: Presentation Layer

The filter is referenceable in css by the svg's file name and the filter id="gaussian_blur" and applicable to html elements:

img {
  filter: url(blur.svg#gaussian_blur);
}

ie Filters

ie's filters were introduced in ie4 introduced Visual Filters and Transitions, which have been deprecated since ie9. Visual Filters and Transitions provide multimedia-style visual effects in web documents, implemented in css properties. combined with filters and transitions and JavaScript.

References and Resources

• CSS Shaders
• Static Filters
• Effects for the Web!
• Visual Filters and Transitions Reference

Functions

filter's are set by specifying a value for one of the following functions. If the value is invalid, the function returns "None".

Note: unless otherwise noted, functions that take a keyword value express with a percentage sign (like 34%) also accept a keyword value expressed as a decimnal, like 0.34.

filter:url(resource) Function

The filter:url(resource) Function .

filter:blur(radius) Function

The filter:blur(radius) Function .

.img-filter-blur-min{-webkit-filter:blur(2px)}

.img-filter-blur-max{-webkit-filter:blur(50px)}

filter:brightness(amount) Function

The filter:brightness(amount) Function accepts percentage key word values to set brightness; filter:brightness(100%) is the same as not applyig a filter; the lower the brightness percentage, the more the image will darken.

.img-filter-brightness-dark{-webkit-filter:brightness(20%)}

.img-filter-brightness-light{-webkit-filter:brightness(80%)}

The example below combines functions for a nice effect:

.img-filter-brightness-sepia{-webkit-filter:brightness(60%) sepia(100%)}

filter:contrast(amount) Function

The filter:contrast(amount) Function .

.img-filter-contrast{-webkit-filter:contrast(200%)}

filter:contrast(100%) is it's default resting position; increasing or decreasing this keyword value will adjust the contrast of the iamge.

Note: according to its spec, filter:contrast(0%) should make the img / entirely black, very similar to the result found when applying filter:brightness(0%), as seen below:

.img-filter-contrast-min{-webkit-filter:contrast(0%)}

Note: the screenshot above shows a screenshot in Chrome on Windows7, when appying filter:contrast(0%);; the img / is supposed to be rendered black, however at this moment (2012-11-07), this is not the case.

image contrast filter example, setting the contrast high:

.img-filter-contrast-cray-cray{-webkit-filter:contrast(2000%)}

combining image contrast filter and css animations:

.img-filter-contrast-matrix{-webkit-animation: bluePill 1s alternate infinite; }
@-webkit-keyframes bluePill {
  0% { -webkit-filter: contrast(2000%); }
  100% { -webkit-filter: contrast(100%); }
}

filter:drop-shadow(<shadow>) Function

The filter:drop-shadow(<shadow>) Function .

filter:grayscale(amount) Function

The filter:grayscale(amount) Function .

The grayscale filter eliminates the need for double-stacking img /'s atop each other, and also using canvas to achieve this effect. Applying the grayscale filter in percentages is as simple as turning a grayscale color wheel, to whatever percentage keyword value desired:

.img-filter-grayscale{-ms-filter:grayscale(100%); -moz-filter:grayscale(100%); -o-filter:grayscale(100%); -webkit-filter:grayscale(100%); filter:grayscale(100%)}

Using grayscale image filters with css3 Animations, achieves a clean hover effect:

.img-filter-grayscale-hoverfx{-ms-transition:filter 1s; -moz-transition:filter 1s; -o-transition:filter 1s; -webkit-transition:filter 1s; transition:filter 1s}
.img-filter-grayscale-hoverfx:hover,.img-filter-grayscale-hoverfx::hover{-ms-filter:grayscale(100%); -moz-filter:grayscale(100%); -o-filter:grayscale(100%); -webkit-filter:grayscale(100%); filter:grayscale(100%)}

filter:hue-rotate(angle) Function

The filter:hue-rotate(angle) Function .

When specifying filter:hue-rotate(angle) Function in degrees, imagine a color wheel; the number of degrees specified determines where the color wheel stops. So filter:hue-rotate(0deg) will do nothing (the color wheel hasn't moved), while filter:hue-rotate(50deg) will turn the color wheel dial 50deg to the right.

/** doesn't work in Chrome/Win7 **/
.img-filter-hr{-ms-filter:hue-rotate(50deg); -moz-filter:hue-rotate(50deg); -o-filter:hue-rotate(50deg); -webkit-filter:hue-rotate(50deg); filter:hue-rotate(50deg)}
/** had to roll with the lame fix on the fly **/
.img-filter-hr{-webkit-filter: hue-rotate(50deg)}

Combining image filter rotations and css animations, the colors of the img / continuously change, like so:

.img-filter-hr-adjust{-webkit-animation: adjustHue 1s alternate infinite}
@-webkit-keyframes adjustHue {  
   0% { -webkit-filter: hue-rotate(30deg)}  
   50% { -webkit-filter: hue-rotate(60deg)}
   100% { -webkit-filter: hue-rotate(90deg)}  
} 

filter:invert(amount) Function

The filter:invert(amount) Function inverts images; invert(100%) is the inverse:

.img-filter-invert-max{-webkit-filter:invert(100%)}

filter:invert(amount) Function

The filter:opacity(amount) Function .

filter:opacity(amount) Function

The filter:saturate(amount) Function .

filter:saturate can achieve a similar effect as setting filter:grayscale(100%), by desaturating the image. filter:saturate(100%) is the property's unchanged (default) state. The further reduced the keyword value of filter:saturate() is, the more color will be removed from the img /. Below, the img / is set to minimum saturation:

.img-filter-saturate-min{-webkit-filter:saturate(0%)}

Setting filter:saturate() on the opposite end of the spectrum, will continously add more color to the img /, like so:

.img-filter-saturate-cray-cray{-webkit-filter:saturate(700%)}

filter: Function

The filter:saturate(amount) Function .

filter:sepia(amount) Function

The filter:sepia(amount) Function .

.img-filter-sepia{-webkit-filter:sepia(100%)}

Combining Functions

Functions can be combined in any number of ways to manipulate rendering. The example below combines image filter functions to enhance the contrast and the brightness of the image:

.img-filters-combined{filter: contrast(175%) brightness(3%)}

Understanding css Filter Effects, Say Hello to css3 Filters, filter

filter Tools

• Abstract Painting with css Filters

References and Resources

• Introduction to Filters and Transitions
• filter Property
• filter