CSS3 filters are a very interesting offshoot of SVG, allowing you to modify HTML elements and images by applying blur, brightness and many more filters. In this tutorial, we'll take a quick look at exactly how they work.

How it works?

With just CSS, we can create some pretty complex effects. They can be applied to both images and HTML elements. The property that is used to control all of these effects is filter.

filter: filter (value);

As you would expect, this property requires the use of a browser prefix. But for now, only -webkit-(Chrome and Safari) is the only browser engine to support this property.

Webkit-filter: filter (value);
-moz-filter: filter (value);
-o-filter: filter (value);
-ms-filter: filter (value);

Filtration

There are a number of filters available, so let's take a look at each one individually to get a better understanding of each one. Several filters can be applied to one element (separated by a space), for example, brightness and blur:

filter: blur (5px) brightness (0.5);

There are several filters that will not be covered below, but they can be easily implemented with pre-existing CSS (transparency and shadows). Here's the original image we'll be using to demonstrate how the filters work:

I will show a photo with the filter applied (first photo) and the result of the filter as a static image (second photo) if you are using a browser that does not support filters and cannot see the result.

Blur

Ever wanted to do a gaussian blur on an image or text with just one CSS? With filters, you can! Blur is measured in pixels, so you can do something like this:

filter: blur (5px);
// Browser Specific
-webkit-filter: blur (5px);
-moz-filter: blur (5px);
-o-filter: blur (5px);
-ms-filter: blur (5px);

Brightness

Brightness is measured from zero to one, 1 is full brightness (white) and 0 is initial brightness.

filter: brightness (0.2);
// Browser Specific
-webkit-filter: brightness (0.2);
-moz-filter: brightness (0.2);
-o-filter: brightness (0.2);
-ms-filter: brightness (0.2);

Saturation

Saturation is measured as a percentage.

filter: saturate (50%);
// Browser Specific
-webkit-filter: saturate (50%);
-moz-filter: saturate (50%);
-o-filter: saturate (50%);
-ms-filter: saturate (50%);

Rotate tone

This filter allows you to change the tone by turning it (imagine a wheel of colors that you then turn). It is measured in degrees.

filter: hue-rotate (20deg);
// Browser Specific
-webkit-filter: hue-rotate (20deg);
-moz-filter: hue-rotate (20deg);
-o-filter: hue-rotate (20deg);
-ms-filter: hue-rotate (20deg);

Contrast

Contrast is, again, measured as a percentage. 100% is the default, 0% will create a completely black image. Anything over 100% adds contrast!

filter: contrast (150%);
// Browser Specific
-webkit-filter: contrast (150%);
-moz-filter: contrast (150%);
-o-filter: contrast (150%);
-ms-filter: contrast (150%);

Inversion

Also measured as a percentage. Values ​​from 0% to 100% are available. Oddly enough, at the moment, webkit does not support inversions if they are less than 100%.

filter: invert (100%);
// Browser Specific
-webkit-filter: invert (100%);
-moz-filter: invert (100%);
-o-filter: invert (100%);
-ms-filter: invert (100%);

Bleaching

Again, specify the percentage you want to desaturate the image by. Values ​​from 0% to 100% are available.

filter: grayscale (100%);
// Browser Specific
-webkit-filter: grayscale (100%);
-moz-filter: grayscale (100%);
-o-filter: grayscale (100%);
-ms-filter: grayscale (100%);

Sepia

I suppose this is very useful if you want to post something on Instagram. Although I also assume you won't be using CSS for this. Anyway, these shades of gray and negative, combined, will allow you to add sepia to the image. 100% - this will be the finished sepia, 0% - the original image.

filter: sepia (100%);
// Browser Specific
-webkit-filter: sepia (100%);
-moz-filter: sepia (100%);
-o-filter: sepia (100%);
-ms-filter: sepia (100%);

Browser support

If you have any questions, we recommend using our

The invert () function inverts the colors in the image. In its effect, it is similar to turning a photograph into a negative.

Syntax

filter: invert (<значение>);

This can be done using CSS without any scripts or preprocessing. Yes, technologies do not stand still :) The implementation is very simple and does not even require the use of any kind of popular SVG in our time.

How to recolor the font color in the photo

If you read the MDN carefully, you can roughly understand the blend modes and see the differences between them, although they are almost all the same. Having white text above the image gives us a result which is an inverted image where the text overlaps it. For simple black and white images, the black in the original image becomes white where we have white text above it, and the white in the original image becomes black when there is white text above it.

Let's take a primitive HTML code as an example:

And add some more primitive CSS to it:

Background (background: url (super_cat.jpg); width: 800px; height: 450px;) h2 (color: #FFF; mix-blend-mode: difference; font: 900 120px / 120px Arial; text-align: center) span (display: block; font-size: 80px)

It turned out great even without Photoshop! Both the text and the image can be changed and the effect is preserved without the need for any JavaScript or any changes to CSS or SV masks. But this is fine for simple images. With more complex filters, you need to apply additional filters and mix them.

For example, we can add the following css filter to our h2 tag to help us:

H2 (filter: invert (1) grayscale (1) contrast (9))

The options for sharing filters are limited only by your imagination and taste of style.

CSS properties have reached such a level of development that they are able to cope with some important functions of graphic editors. An example of this is CSS filters, which can be used to create beautiful effects for images.

If earlier it was difficult even to imagine it, now almost all software filters are implemented in the cascading table, from blur to artistic color models.

However, there is one small flaw in CSS filters - not all web browsers support visual effects. Of course, it's only a matter of time. And by the time "x" hour comes, developers need to be ready. In the meantime, consider what has already been implemented at the moment.

Browser support for CSS filters

Basically, all popular browsers, Firefox, Chrome, Opera, have a "friendly" attitude with filter effects. The same cannot be said about IE, which completely refuses to support effects, even in the most recent versions.

Functions and syntax of CSS filters

All CSS properties have some parameters that combine the order in which the values ​​are written. The filter property is no exception, like the others, it can use a combination of several rules in one application. For example, add a brightness filter for an image, and specify another one after a space - contrast. We'll go over everything in this article with a few examples for a better understanding.

Syntax

Filter: filter name (percentage of value); filter: url (img.svg); filter: blur (10px); filter: brightness (0.9); filter: contrast (150%); filter: drop-shadow (5px 5px 10px black); filter: grayscale (80%); filter: hue-rotate (60deg); filter: invert (80%); filter: opacity (50%); filter: saturate (50%); filter: sepia (40%); / * Apply multiple filters * / filter: contrast (150%) grayscale (80%);

Filter List

CSS filters examples

We have come to an interesting part of the article, in which we will consider each filter separately with examples of its application. Three pictures will be used for clarity. The first will show the starting point, the look of originality. The second will serve as a static example of how to apply the filter, and the third will show the hover effect, the mouse over the image.

Blur filter

In graphic editors, the blur filter is an indispensable tool and is often used in work. He is able to create a blurry image, but to make the effect of focusing on a certain element while the rest of the image falls under the blur. And much more.

In the design of the site (for example, blur) can be used as a lining for better readability of the text located in the picture. Actually, the blur is performed in gaussian from 0 px to complete disappearance.

Original

Filter

Hover effect

/ * static rule * / .efbl1 img (filter: blur (2px); -webkit-filter: blur (2px);) / * for hover effect * / .efbl2 img (transition: all 0.6s ease 0s;). efbl2: hover img (filter: blur (4px); -webkit-filter: blur (4px); transition: all 0.6s ease 0s;)

Filter shadow

The shadow property came to us with the third version of the cascading table. Of course, it is familiar to everyone who is engaged in site building, since box-shadow plays an important role in design. The drop-shadow filter can be called an inferior alternative with similar parameters, and there are only 5 of them, not counting the inner shadow.

The writing order is: 5px / -5px (horizontal offset), 5px / -5px (vertical offset), 15px (shadow blur radius), 5px / -5px (shadow stretch), black (color). The filter supports all syntax except stretching and inset value (inner shadow), as well as adding multiple shadows separated by commas. Despite all this, there are some advantages, for example, the filter takes into account pseudo-elements, which allows you to display the exact shape of the element's shadow.

It is also interesting that when the block does not have a background, but only a border is set, then when using box-shadow, a shadow will be displayed, supposedly taking into account the background, that is, a solid one. And in the case of using drop-shadow, the shadow takes the shape of a stroke without regard to the background.

Original

Filter

Hover effect

/ * static rule * / .efdrswd1 img (filter: drop-shadow (6px 7px 3px rgba (0, 0, 0, 0.4)); -webkit-filter: drop-shadow (6px 7px 3px rgba (0, 0, 0 , 0.4));) / * for hover effect * / .efdrswd2 img (transition: all 0.6s ease 0s;) .efdrswd2: hover img (filter: drop-shadow (6px 7px 3px rgba (0, 0, 0, 0.4)); -webkit-filter: drop-shadow (6px 7px 3px rgba (0, 0, 0, 0.4)); transition: all 0.6s ease 0s;)

Discoloration filter

A classic style of photography for all times in the right direction. The filter allows only one value - positive. Based on the specified percentage, the grayscale will fade into the color of the image. Also, instead of percentages, you can use a fraction to an integer (0.01 / 1).

Original

Filter

Hover effect

/ * static rule * / .efgrays1 img (filter: grayscale (90%); -webkit-filter: grayscale (90%);) / * for hover effect * / .efgrays2 img (transition: all 0.6s ease 0s; ) .efgrays2: hover img (filter: grayscale (90%); -webkit-filter: grayscale (90%); transition: all 0.6s ease 0s;)

Brightness filter

Adding light to the "unknown" black corners of the image. It is often used in photo processing, since amateur photographs, as a rule, are taken in poorly lit places. The brightness of the filter is adjustable from 0% (completely black picture) to the almost complete disappearance of the image. The original point is specified at 100%, and the value can also be specified as a fraction.

Original

Filter

Hover effect

/ * static rule * / .efbrig1 img (filter: brightness (150%); -webkit-filter: brightness (150%);) / * for hover effect * / .efbrig2 img (transition: all 0.6s ease 0s; ) .efbrig2: hover img (filter: brightness (150%); -webkit-filter: brightness (150%); transition: all 0.6s ease 0s;)

Contrast filter

An easy way to make an image more expressive is to experiment with adjusting the brightness of the lightest and darkest parts of the picture. The contrast filter is here to help. Its parameters, like many others, exclude a negative value (-150%), and the initial position is indicated at 100%. In addition to percentages, the fraction (1.5) is also allowed.

Original

Filter

Hover effect

/ * static rule * / .efcontr1 img (filter: contrast (150%); -webkit-filter: contrast (150%);) / * for hover effect * / .efcontr2 img (transition: all 0.6s ease 0s; ) .efcontr2: hover img (filter: contrast (150%); -webkit-filter: contrast (150%); transition: all 0.6s ease 0s;)

Color tone filter

An excellent design technique in the design of the image, under the style of the main design of the resource. The bottom line is to superimpose the shade of the selected color on the original image. The ratios come out depending on the given degree, which indicates the color point on the color wheel.

If the value is specified positive (150deg), then the rotation is clockwise. Accordingly, if negative, then counterclockwise. The two positions start from 0deg to 360deg.

Original

Filter

Hover effect

/ * static rule * / .efhrotai1 img (filter: hue-rotate (180deg); -webkit-filter: hue-rotate (180deg);) / * for hover effect * / .efhrotai2 img (transition: all 0.6s ease 0s;) .efhrotai2: hover img (filter: hue-rotate (180deg); -webkit-filter: hue-rotate (180deg); transition: all 0.6s ease 0s;)

Inversion filter

A specific effect that flips the color of an image upside down. He has a certain role in graphic editors and it so happens that without his participation it is impossible to achieve the desired result. The inverting filter parameter is indicated only in the positive direction from a value of 0% to 100%.

Original

Filter

Hover effect

/ * static rule * / .efinve1 img (filter: invert (100%); -webkit-filter: invert (100%);) / * for hover effect * / .efinve2 img (transition: all 0.6s ease 0s; ) .efinve2: hover img (filter: invert (100%); -webkit-filter: invert (100%); transition: all 0.6s ease 0s;)

Saturation filter

When an image loses its natural color of paints for unknown reasons (something like a burnt-out T-shirt in the sun), then by increasing the saturation, you can instantly restore the previous look. And if this filter is used in combination with other filters, the result will be very satisfactory. The setting is performed from 0, the initial view, to large numbers.

Original

Filter

Hover effect

/ * static rule * / .efsatut1 img (filter: saturate (165%); -webkit-filter: saturate (165%);) / * for hover effect * / .efsatut2 img (transition: all 0.6s ease 0s; ) .efsatut2: hover img (filter: saturate (165%); -webkit-filter: saturate (165%); transition: all 0.6s ease 0s;)

Sepia filter

Imitation of the effect of old photographs (slightly brown tint). Thus, the retro style of the image is achieved, which is especially popular. The sepia filter is adjustable from 0% (home position) to 100%.

Original

Filter

Hover effect

/ * static rule * / .efsepiaa1 img (filter: sepia (100%); -webkit-filter: sepia (100%);) / * for hover effect * / .efsepiaa2 img (transition: all 0.6s ease 0s; ) .efsepiaa2: hover img (filter: sepia (100%); -webkit-filter: sepia (100%); transition: all 0.6s ease 0s;)

Filter transparency

A filter similar to the opacity property from the cascading table of version 3. The syntax is the same, and the transparency value is adjustable from 0% to 100% (home position).

Original

Filter

Hover effect

/ * static rule * / .efopaty1 img (filter: opacity (50%); -webkit-filter: opacity (50%);) / * for hover effect * / .efopaty2 img (transition: all 0.6s ease 0s; ) .efopaty2: hover img (filter: opacity (50%); -webkit-filter: opacity (50%); transition: all 0.6s ease 0s;)

Filter link

A custom filter is created based on SVG elements with a specific identifier, which can then be used in CSS through a link filter. Effects can be very different from standard filters, ranging from overlay masks to commonplace transparency.

Generator CSS filters

It has long been customary to create generators of various CSS properties. , and many many others. They serve as a tool to make work easier. And for novice webmasters, they can be of double benefit. They are very easy to use: move the sliders and you can see the result immediately. And at the end, all that remains is to copy the generated code. It's the same with CSS filter generators. Here are two of them for your reference:

Conclusion

The review turned out to be rather big, but I hope that it will be useful to someone in practice. Also remember to combine filters, one is good and two is better in certain cases.