CSS filter effects

CSS filter effects
 
CSS filter effects
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


CSS filters were created to achieve various visual effects when applied to DOM elements. In this article we will talk about the history of filters, what they are capable of and how to apply them. Also we will discuss their effect on performance of desktop and mobile devices.

Filters were created as part of SVG specification. Their task was to apply effects, based on the pixel grid, to vector graphics. Over time, web browsers were provided with the support of SVG filters and their usefulness became apparent. Robert O'Callahan Mozilla's distinguished engineer proposed the idea of using SVG filters to DOM elements by encoding them in CSS. He created an example that shows how much easier it is to implement SVG effects in combination with CSS. CSS and SVG working groups combined their efforts and created a new CSS property dubbed filter.

By looking at CSS code of any page on the web from time to time you come across this property. But in most cases, this property is written for older versions of IE, to control some effects used in the browser. In general, this property was omitted in favor of the standard that is already a part of the CSS3 specification.

How filters work

So what do filters do? One can describe this as a post-process, which makes wonders with the elements, in the page after the elements have been processed.

When downloading a web page, the browser creates its layout, applies styles and as a final stage it renders the page. Only after all these operations the filters are applied, but before the rendered page gets on the screen. They process the page pixel by pixel using defined effects and render the result which overlaps the original. Thus applying multiple filters can achieve different effects, they sort of overlap each other. The more filters, the longer it takes the browser to render the page.

How to use –°SS filters

There are several ways to define and apply filters. SVG is actually an element in which the filters are defined using XML syntax. Defining filters using CSS styles gives the same result, but thanks to CSS syntax, this method is much simpler.

Most of the regular CSS filters can be defined using SVG, in turn, CSS also allows to refer to the filters defined in SVG format. Here we'll talk only about the filters available in CSS.

Filters can be applied to any visible elements on the page.

div {
  filter: grayscale(100%);
}

This example changes the content color, contained inside the tag to black and white.

filter: grayscale(100%)

Each filter has an option that allows you to change the strength of the filter.

div {
  filter: grayscale(50%);
}
filter: grayscale(50%)

You can use several filters simultaneously.

div {
  filter: grayscale(100%) sepia(100%);
}
filter: grayscale(100%) sepia(100%)

Which filters are available for use in CSS

grayscale(definition)

Converts color to B/W. The value is specified either in percentage (0% - 100%) or in decimal number (0 - 1).

filter: grayscale(100%);
filter: grayscale(100%)
sepia(definition)

Creates a sepia effect. The value is specified either in percentage (0% - 100%) or in decimal number (0 - 1).

filter: sepia(100%);
filter: sepia(100%)
saturate(definition)

Controls color saturation. The value is specified either in percentage (0% and more) or in decimal number (0 and more).

filter: saturate(200%);
filter: saturate(200%)
hue-rotate(angle)

Changes colors depending on the given angle. Rotation angle determines the change in color from red to violet in the color wheel. The value is given in degrees (0deg - 360deg).

filter: hue-rotate(90deg);
filter: hue-rotate(90deg)
invert(definition)

Inverts colors. The value is specified either in percentage (0% - 100%) or in decimal number (0 - 1).

filter: invert(100%);
filter: invert(100%)
opacity(definition)

Sets the transparency of the element. The value is specified either in percentage (0% - 100%) or in decimal number (0 - 1).

This filter works the same way as CSS property opacity. The only difference is that this filter supports hardware acceleration, and the property doesn't. Thus the use of the filter provides better performance.

filter: opacity(50%);
filter: opacity(50%)
brightness(definition)

Changes brightness. The value is specified either in percentage (0% and more) or in decimal number (0 and more).

filter: brightness(50%);
filter: brightness(50%)
contrast(definition)

Changes contrast. The value is specified either in percentage (0% and more) or in decimal number (0 and more).

filter: contrast(50%);
filter: contrast(50%)
blur(radius)

Creates blur effect. The value is specified in pixels (px).

filter: blur(2px);
filter: blur(2px)
drop-shadow(x, y, radius, color)

Creates shadows similar to those created by CSS property box-shadow, but only filter supports hardware acceleration. The values are set in a similar manner to the values in the CSS counterpart.

filter: drop-shadow(10px 10px 10px blue);
filter: drop-shadow(10px 10px 10px blue)

You can create your own filters using SVG element filter and refer to them from CSS. Each filter has its own id.

SVG:

<filter id="example">...</filter>

CSS:

div {
  filter: url(#example);
}

Performance

CSS filters provide excellent visual effects, but at the same time have an adverse effect on your website performance. It is important to understand what they do and how it affects performance.

Most filters work pretty fast on any device that supports them. However, filters blur and drop-shadow, both use blur effect, and are much slower than the rest. How exactly do they work?

When you apply filter blur, it mixes the colors of pixels around each pixel, thus creating a blur. Example, if we have 2 pixel radius, the filter will select two pixels in any direction and mix their colors, then this technique is applied to every pixel. The larger the radius, the more number of times are needed to render the effect. Since the filter selects pixels in every direction, if you increase the radius of the blur by 2, the number of pixels will be increased by four. This means that the time required for the calculations is 4 times as intensive. Filter drop-shadow contains in it filter blur.

You can safely use these filters on platforms that support hardware acceleration, but not every browser supports it. In this case it is necessary to experiment and try to achieve the desired result of reducing the radius of the blur as much as can be done without compromising the visual effect.

When using custom SVG filters ensure that they don't contain the effects that may have an adverse effect on the performance.

Compatibility

As for today, most CSS filters are supported by the browser FireFox and browser engine WebKit. Soon we hope to see support in browsers like Opera and IE10. Since the specification is still in development, we have to use vendor prefixes. For WebKit -webkit-filter, for FireFox prefix is not required.

Currently, only filter: url() function is supported by FireFox browser.

All examples presented in this article were made in Chrome browser with -webkit-filter CSS property.


 

Read also

CSS3: multiple backgrounds

CSS3: multiple backgrounds

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation