Table of Contents
Today, we will take a look at this new module of CSS. CSS filters are very powerful tool you can use to create various effect on your website. If you already have any experiences with Adobe Photoshop, you will probably immediately recognize how similar they are to the filters in this graphic editor. Thanks to this, they will become familiar to you in short time. Let’s take a closer look at this amazing technology …
At first, I have to mention that CSS filters are experimental technology and are now available only in state of working draft. This means that there is not proper support by web browsers yet. To be more specific … Internet Explorer doesn’t support CSS filters at all. Firefox offers only partial support – it supports only url() form of this property. Chrome, this is no surprise, offers full support from version 18 – with ‘-webkit-‘ prefix! Safari (6 and up) and Opera (15 and up) also has full support (with ‘-webkit-‘ prefix). When it comes to mobile device, you can use this technology on iOS Safari (6 and up), Android browser (4.4), Blackberry browser (10), Opera Mobile (22) and Chrome for Android (35). All of these mobile browsers requires including ‘-webkit-‘ prefix in order to make filters work. These information were found on Can I Use(caniuse.com).
The whole CSS filters module includes following properties: blur, brightness, contrast, url, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and one that is in preparation – custom. We will examine closely each of these properties along side with some examples for you to see it in action.
Before we start playing with individual properties of CSS filters, we have to set up our working environment. First, the HTML:
<!--doctype html>
<html lang="en">
<head>
<title>CSS Filters Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta name="description" content="These are an examples for tutorial on CSS filters.">
</head>
<body>
<div class="wrapper">
<div class="filter"></div><!-- This is the default picture -->
<div class="filter blur"></div>
<div class="filter brightness"></div>
<div class="filter contrast"></div>
<div class="filter shadow"></div>
<div class="filter grayscale"></div>
<div class="filter hue"></div>
<div class="filter invert"></div>
<div class="filter opacity"></div>
<div class="filter sepia"></div>
<div class="filter multi"></div>
</div>
</body>
</html>
With this structure, we can now focus strictly on our CSS. Just to say, I added couple of lines on codepen just for basic styling the div elements. The style for this tutorial begins bellow them. All the CSS is written in Sass, but you can switch it into plain CSS language by clicking on “eye” icon on the top of CSS panel. I will explain Sass in tutorial which will come soon.
As a value, you can use whole numbers and decimals, pixels, ems and rems. Only some properties – grayscale, sepia, saturate, invert, opacity, brightness, contrast – support percentages. Anything between 0% and 100% are linear multipliers on the effect. Hue-rotate property takes only degree (deg). Default value for every property is 0. if you want to use more of the filters on the same element, you simply write them in one rule and separate by space:
.multi {-webkit-filter: grayscale(40%) sepia(40%);}
So, we can start examining individual filter properties …
Blur
First property is blur(). This will apply Gaussian blur effect on the image. By setting the value, you are defining the amount of pixels that will be blended into each other – higher value = more blur.
.blur {-webkit-filter: blur(2px);}
Brightness
This applies a linear multiplier to selected image. A value of 0% will make image completely black and a value of 100% leaves the element unchanged.
.brightness {-webkit-filter: brightness(30%);}
Contrast
This property adjusts the contrast of the image. A value of 0% will make image completely black and a value of 100% doesn’t change anything. If the value is higher than 100%, the result will be less contrast.
.contrast {-webkit-filter: contrast(60%);}
Url
The url() function is little bit different. It takes the location of any XML file with specified SVG filter. It may also include an anchor to a specific filter element.
Drop-shadow
This function is similar to the more familiar box-shadow property. The difference between them is, that with filters, some browsers provide hardware acceleration for higher performance. This function accepts a parameter of type (more in CSS3 Backgrounds). The “inset” keyword is not allowed.
.shadow {-webkit-filter: drop-shadow(16px 16px 10px black);}
Grayscale
Grayscale converts the selected image to grayscale. Value defines the amount of proportion of the conversion. 100% is completely grayscale and 0% leaves the image unchanged. Negative values are not allowed.
.grayscale {-webkit-filter: grayscale(80%);}
Hue-rotate
This function applies a hue rotation on the selected image. Angle (value) defines the degrees around the color circle the input samples will be adjusted. 0deg has no effect on the image at all. If the angle is missing, a value of 0deg is set. Maximum value is 360deg.
.hue {-webkit-filter: hue-rotate(40deg);}
Invert
Value of defines the proportion of the conversion. Image with invert of 100% is completely inverted. A value of 0% leaves the image as without any change. Values between 0% and 100% are linear multipliers on the effect.
.invert {-webkit-filter: invert(85%);}
Opacity
Does this need any explanation?? Ok, it applies transparency to the selected image. A value of 0% is completely transparent and 100% leaves it completely visible. This is equivalent to multiplying the input image samples by amount. The difference between this property and older opacity is that with filters, some browsers provide hardware acceleration for better performance.
.opacity {-webkit-filter: opacity(20%);}
Sepia
This changes the selected image into sepia colors. 100% is completely sepia and a value of 0 leaves the image unchanged.
.sepia {-webkit-filter: sepia(75%);}
Custom
Custom filters are now only on the horizon. With these, you can use the power of your graphics GPU to perform some awesome effects limited only by your own imagination. This part of the filters is still under discussion and in flux, but as soon as the syntax and support will be set I will write about it.
With this, I close today’s tutorial on CSS filters. Thanks to all of you for your time and have fun with your new CSS skill!
Image used in codepen were found on:
http://www.gratisography.com
Codepen:
https://codepen.io/d3v3r0/pen/ECDkG
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
