Apply a series of filters to images and other elements similar to those that can be applied with graphics programs such as Photoshop, from blurring to shading, from transparency to the sepia effect.
We have seen in another article ( Blend Modes, CSS … like Photoshop ) how it has been recently implemented in CSS one of the fundamental functionality of graphics programs, that is the ability to define and manage the modes of fusion of elements and backgrounds. Along the same lines, there is another module that, for the extended support on the most recent browsers, already provides the web designer with a new interesting tool for the graphics manipulation of the elements. The module in question, Filter Effects Module Level 1, offers the opportunity to apply to images and other elements a series of filters that emulate, even in this case, the potential provided by graphics programs.
Support on browsers
Before analyzing the specification and properties, let’s check what is currently cross-browser support. We rely on Can I Use, from which we get this screenshot of the support table for the property filter:
The latest versions of Chrome, Safari, and Opera support the property with the prefix -webkit. Firefox will extend full support starting with version 35 under development and already available through the Aurora channel. For Internet Explorer, there are waiting for the release of versions after 11.
The CSS filter property
The application of CSS filters with the property filter is simpler. It is about defining the property (today still in the form -webkit-filter for the browsers that support it) and then setting one or more effect types with a value.
Let’s see one by one the options that make the specification available to us.
blur
Allows you to get a blurred image based on the assigned blur factor (radius). This value must be expressed with a unit of measurement, typically in px. The higher the value, the higher the blur will be.
<pre class=”brush: php; html-script: true”>
#img-2 {filter: blur(10px); -webkit-filter: blur(10px);}
</pre>
brightness
Check the brightness of the image. The value must be expressed as a percentage. 100% returns the original image. Lower values darken the element up to black (0%). Higher values increase brightness.
<pre class=”brush: php; html-script: true”>
#img-3 {filter: brightness(200%); -webkit-filter: brightness(200%);}
</pre>
contrast
It acts on the contrast of the image. The value is expressed as a percentage. 100% leaves the item unchanged.
<pre class=”brush: php; html-script: true”>
#img-4 {filter: contrast(200%); -webkit-filter: contrast(200%);}
</pre>
drop-shadow
Adds a shadow behind the element. The setting is identical to that of the property box-shadowalready provided in other previous CSS modules.
<pre class=”brush: php; html-script: true”>
#img-5 {filter: drop-shadow(10px 10px 20px black); -webkit-filter: drop-shadow(10px 10px 20px black);}
</pre>
grayscale
Convert the image to grayscale. The value must be expressed as a percentage, from 0% (element unchanged) up to 100% (grayscale element). Intermediate values gradually desaturate the colors until the complete reduction to the gray tones.
<pre class=”brush: php; html-script: true”>
#img-6 {filter: grayscale(100%); -webkit-filter: grayscale(100%);}
</pre>
hue-rotate
Apply a rotation on an imaginary color wheel. The value must be expressed with an angle (from 0degto 360deg).
<pre class=”brush: php; html-script: true”>
#img-7 {filter: hue-rotate(45deg); -webkit-filter: hue-rotate(45deg);}
</pre>
invert
Inverts the colors of the image. The value must be expressed as a percentage, from 0% (unchanged image) up to 100%.
<pre class=”brush: php; html-script: true”>
#img-8 {filter: invert(100%); -webkit-filter: invert(100%);}
</pre>
opacity
It makes the image semi-transparent. Values range from 0% (totally transparent image) to 100% (image unchanged from the original).
<pre class=”brush: php; html-script: true”>
#img-9 {filter: opacity(10%); -webkit-filter: opacity(10%);}
</pre>
saturated
It acts on the saturation of the image. The values are also in this case in percentage. Starting from 100% (unchanged image), we can desaturate (going down to 0%) or saturate colors (over 100%).
<pre class=”brush: php; html-script: true”>
#img-10 {filter: saturate(200%); -webkit-filter: saturate(200%);}
</pre>
sepia
Apply the sepia effect. The values are in percentage with a maximum equal to 100% (full sepia effect).
<pre class=”brush: php; html-script: true”>
#img-11 {filter: sepia(100%); -webkit-filter: sepia(100%);}
</pre>
In the second part of the article we see how to apply multiple effects at the same time.
Apply more effects
You can apply multiple effects to an image at the same time. Values, in the context of the property filter, should not be separated by commas.
<pre class=”brush: php; html-script: true”>
#img-12 {filter: sepia(100%) blur(5px); -webkit-filter: sepia(100%) blur(5px);}
</pre>
Animations and transitions
The property filter can be animated. It means, for example, that I can apply a transition on the hover to change the value of the filter.
In the first case, we pass from a blurred image to one without blur, like this:
<pre class=”brush: php; html-script: true”>
#img-2 {
filter: blur(10px);
-webkit-filter: blur(10px);
transition: -webkit-filter 0.5s ease-in;
}
#img-2:hover {-webkit-filter: blur(0px);}
</pre>
In the second, we reset the brightness to the initial state:
<pre class=”brush: php; html-script: true”>
#img-3 {
filter: brightness(200%);
-webkit-filter: brightness(200%);
transition: -webkit-filter 0.5s ease-in;
}
#img-3:hover {-webkit-filter: brightness(100%);}
</pre>
In the case of these transition effects, but in general with filters, the performance in the browser is always evaluated.
