CSS3 filters: changing images using styles. CSS: How to make a contrasting color for text that lies on a multi-colored background Functions and syntax of CSS filters
CSS3 filters are a very interesting offshoot of SVG, allowing you to modify HTML elements and images by applying blur, brightness, and many other filters. In this tutorial we'll take a quick look at exactly how they work.
How it works?
Using 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 these effects is filter.
filter: filter(value) ;
As you might expect, this property requires the use of a browser prefix. But on this moment, only -webkit-(Chrome and Safari) are the only browser engines that 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, so to get a better understanding of each one, let's look at them individually. Multiple filters can be applied to one element (separated by a space), for example, brightness And blur:
filter: blur(5px ) brightness(0.5 ) ;
There are a few filters that won't be covered below, but they can be easily implemented with existing CSS (transparency and shadows). Here's the original image we'll use to demonstrate how the filters work:
I will provide a photo with the filter applied (the first photo) and the result of the filter in the form 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 using just CSS? With filters you can do it! Blur is measured in pixels, so you could 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 being full brightness (white) and 0 being original 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% ) ;
Tone rotation
This filter allows you to change the tone by rotating it (think of a wheel of colors that you then rotate). 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, again, is measured as a percentage. 100% is the default value, 0% will create completely black image. Anything more than 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. Available values range from 0% to 100%. 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, enter the percentage you want to desaturate the image by. Available values range from 0% to 100%.
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. If anything, these shades of gray and negative will add up to add sepia to your image. 100% will be a complete sepia, 0% will be 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
| Webkit | Mozilla | Trident | Presto | |
| Blur | Experimental | No | No | No |
| Brightness | ||||
| Saturation | ||||
| Rotate tones | ||||
| Contrast | ||||
| Inversion | Full inversion only |
|||
| Bleaching | Experimental | |||
| Sepia |
If you have any questions, we recommend using our
The invert() function inverts the colors in an image. Its effect is similar to turning a photograph into a negative.
Syntax
filter: invert(<значение>);
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of the value. | <размер> |
| A && B | The values must be output in the order specified. | <размер> && <цвет> |
| A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
| A || B | Each value can be used independently or together with others in any order. | width || count |
| Groups values. | [ crop || cross ] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times separated by commas. | <время># |
Values
A value of 0 leaves the image as is. A value of 100% or 1 completely inverts the colors of the picture. Values from 0% to 100% or 0 to 1 partially invert the colors.
A negative value is not allowed. An empty value is treated as 0.
Sandbox
img ( filter: invert((( playgroundValue ))% ); )
Example
The result of this example is shown in Fig. 1.
Rice. 1. Invert color. On the left is the original, on the right is a photo with a filter.
Note
Chrome before version 53, Opera before version 40, and Safari before version 9.1 support the -webkit-filter property.
Specification
Each specification goes through several stages of approval.
- Recommendation - The specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
- Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of a draft that has been discussed and amended for community review.
- Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
- Draft ( Draft specification) - the first draft version of the standard.
Browsers
Browsers
The following notations are used in the browser table.
This can be done using CSS without any scripts or pre-processing. Yes, technology does not stand still :) The implementation is very simple and does not even require the use of any form of SVG, which is popular nowadays.
How to recolor the font color in a photo
If you carefully read MDN you can roughly understand the blending modes and see the differences between them, although they are almost all the same. Having white text above the image gives us a result that is an inverted image, where the text overlaps it. For simple black and white images, black in the original image becomes white where we have white text above it, and white in the original image becomes black when we have white text above it.
For example, let's take a primitive HTML code:
CSS
HTML site
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 programs! Both text and image can be changed and the effect is maintained without the need for any JavaScript or any changes to CSS or SV masks. But this is suitable for simple images. With more complex ones, it is necessary to apply additional filters and mix them.
For example, we can add the following CSS filter to our h2 tag to help:
H2 ( filter: invert(1) grayscale(1) contrast(9) )
Options 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, with which you can create beautiful effects for images.
If earlier it was difficult to even imagine, now almost all software filters are implemented in the cascade table, from blur to artistic color models.
But still, CSS filters have one small drawback - not all web browsers support visual effects. Of course, it's only a matter of time. And when the hour “x” arrives, developers need to be prepared. For now, let’s look at what has already been implemented so far.
Browser support for CSS filters
Basically, all popular browsers, Firefox, Chrome, Opera, have a “friendly” relationship with filter effects. The same cannot be said about IE, which completely refuses to support effects, even in the latest versions.
| Browser | Explorer | Chrome | Firefox | Safari | Opera | Android | iOS |
|---|---|---|---|---|---|---|---|
| Version | no | 31+ | 35+ | 7+ | 18+ | 4.4+ | 6+ |
| filter | — | (-webkit-) | + | (-webkit-) | (-webkit-) | (-webkit-) | (-webkit-) |
Functions and syntax of CSS filters
All CSS properties have certain parameters that combine the order in which values are written. The filter property is no exception, like others, it can use a combination of several rules in one application. For example, add a brightness filter for an image, and after a space specify another one - contrast. We will cover everything in this article with a few examples for 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%);
List of filters
| Filter | Description |
|---|---|
| blur (px) | Filter for blurring the image. The degree of blur is indicated in pixels. If a number is not specified, the default is 0. |
| drop-shadow() | Shadow. An alternative to the box-shadow property with similar parameters and the same order of writing. The exception is the fourth value, “stretch”: almost all browsers do not support it. |
| gray scale (%) | “Decolorize” filter. Applies shades of gray to the image based on the percentage you specify. A negative value is not allowed, and the originality of the picture is 0. |
| brightness (%) | Adjust image brightness. A value of 100% shows the starting point of brightness. The adjustment is made both negatively (-50%) and positively (150%). |
| contrast (%) | Adjust image contrast. As with the previous filter, a value of 100% will show the origin. Changes can be set negative (-20%) or positive (120%). |
| hue-rotate (deg) | Rotary color tone overlay. Depending on the specified degree (from 0deg to 360deg), the image will be adjusted to color, which is determined by the color wheel. |
| invert (%) | Image inversion. A value from 0 to 100% is applied without a negative parameter. |
| saturate (%) | Image saturation. The initial position is determined at 100% and has no negative value. |
| sepia (%) | Sepia effect. The originality of the picture is determined at 0% and is available up to 100% without negation. |
| opacity (%) | Transparency of the picture. Another filter that has a similar opacity property with the same methods of use. The setting is allowed from 0 to 100% without a negative parameter. |
| url() | A CSS link to an SVG element with a specific #id. |
| initial | Sets the default value of the property. |
| inherit | Inherits all property values of its parent element. |
Examples of CSS filters
We have come to an interesting part of the article, in which we will consider each filter separately with examples of its application. For clarity, three pictures will be used. The first will show the starting point, the appearance of originality. The second will serve as a static example of applying a filter, and the third will show the hover effect of hovering the mouse cursor over the image.
Blur filter
IN graphic editors blur filter is an indispensable tool and often used in work. It can easily create a blurry image, but can create the effect of focusing on a specific element while the rest of the image falls under the blur. And much more.
In website design (for example, blur) can be used as a lining for better readability of the text located in the picture. Actually, the blur is Gaussian from a value of 0 px until it completely disappears.
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 involved in website development, 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 order of writing is as follows: 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 values, as well as adding multiple shadows separated by commas. But despite all this, there are some advantages, for example, the filter takes pseudo-elements into account, which allows you to display the exact shape of the element’s shadow.
Also interesting is that when the block does not have a background, but only a border stroke is specified, 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 form of a stroke without taking into account 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 the 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;
Decolorization filter
Classic photography style for all times in the right direction. The filter allows only one value - positive. Depending on the specified percentage, shades of gray will smoothly replace the color of the image. Also, instead of percentages, you can use fractions up to a whole number (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 "unexplored" black corners of the image. It is often used in photo processing, since amateur photographs are usually taken in poorly lit places. The brightness of the filter is adjustable from 0% (a completely black picture) to almost completely disappearing the image. The original point is defined as 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
A simple way to make an image more expressive is by experimenting with the brightness settings of the lightest and darkest parts of the picture. The contrast filter is ready to help with this. Its parameters, like many others, exclude a negative value (-150%), and initial position indicated at 100%. In addition to percentages, fractions (1.5) are 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 image design that matches the style of the main resource design. The idea is to overlay a shade of the selected color onto 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 positive (150deg), then the rotation occurs clockwise. Accordingly, if negative, then counterclockwise. In two positions it starts 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 allows you to turn the color of an image upside down. In graphic editors it has a certain role and it happens that without its participation the desired result cannot be achieved. The invert filter parameter is specified 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 for unknown reasons (something like a sun-bleached T-shirt), increasing the saturation can instantly restore its original appearance. And if this filter is used in combination with other filters, the result will be very satisfactory. The setting is made from 0 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). This achieves a retro style of image, 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 version 3. The syntax is the same, but the transparency value is adjustable from 0% to 100% (original 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 subsequently be used in CSS through a link filter. The effects can be very different from standard filters, from overlay masks to banal transparency.
CSS filters generator
It has long been the custom to create generators of various CSS properties. , and many many others. They serve as a tool to make work easier. And for beginner webmasters they can have double benefits. They are very easy to use: move the sliders and you can see the results immediately. And when finished, all that remains is to copy the generated code. The same goes for CSS filter generators. Here are two of them for your reference:
Conclusion
The review turned out to be quite large, but I hope that it will be useful to someone in practice. Also, do not forget to combine filters, one is good, but two will be better in certain cases.
