How CSS filters are changing the face of web design

I was only vaguely familiar with css filters, until writing a section on them for my book CSS Visual Dictionary. I used them before, but couldn’t get them to work cross-browser, so I gave up trying.

Grab your copy of CSS Visual Dictionary incl. diagrams of all CSS properties.

Image for post
Image for post
Actual CSS animation recorded with GIF screen capture software.

Recently, I saw an example of its use on kris_anfalova instagram post and was completely blown away by the results.

It inspired me to start experimenting with blur and after about 3 hours of coding last night I came up with an imitation of the effect you see above.

I am not a professional web or graphic designer, so her original animation is a lot more polished. But I wanted to create this tutorial primarily to see the current state of CSS filters and what they’re capable of.

How It Was Made

First — make sure that jQuery and jQuery UI are included in your script.

Now that we have jQuery and jQuery UI added we need to write a function to set css to a target blur value. This will help us get cross-browser blur out of the way so we can focus on animation design. This function utilizes jQuery’s .css method that lets us set css properties of a selected element.

Note: I borrowed code from this StackOverflow thread.

// * Function to set blur to an element using a blur radiuslet setBlur = function(E, radius) {
$(E).css({
"-webkit-filter": "blur(" + radius + "px)",
"filter": "blur(" + radius + "px)"
});
}

But we don’t want to simply set a blur. We want to animate it. So the next function uses jQuery’s .animate method. It works similarly to CSS transitions or animations but using JavaScript. It can be called tweenBlur:

// * Function to animate blur dynamically from start to end valueslet tweenBlur = function(E, startRadius, endRadius) {    $({blurRadius: startRadius}).animate({blurRadius: endRadius}, {        duration : 500,
easing : 'swing', /* change easing effect here */
step: function() { /* step through each frame... */
setBlur(E, this.blurRadius);
},
complete: function() { /* make sure target is accurate */
setBlur(E, endRadius);
}
});
};

We are not actually animating the element itself by using a standard call to .animate. We’re only taking advantage of the utility of .animate to step values manually on each frame using custom function written earlier: setBlur.

You can replace setBlur with any other custom function to execute on each frame of animation. In other words… we’re using a special version of .animate just to get to the animation counter. But provide our own function to actually set the animation.

There is a known bug in jQuery animate function that sometimes ends up with values that are only close to target value. To remedy the situation when animation is 100% completed setBlur function will reset it to the target value.

Setting Things In Motion

Finally we’re ready to execute the blur animation!

// * Set initial value range to blur between (0px and 10px)
let
a = 10;
let b = 0;
// * Set things in motion --
// * Continuously blur and unblur the element every 2 seconds
window.setInterval(function() {
let swap = a;
a = b;
b = swap;
tweenBlur('.item', a, b);
}, 2000);

The HTML and CSS for stretching a checkered background across the screen:

.fixed-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('checkered.png') center center;
}
<div id = "blur"
class = "item">
</div>

This is the image for the background so we can witness the blur first hand:

Image for post
Image for post
checkered.png — 3kb

I used this checkered background pattern and saved it as checkered.png

The Results

The blur will change back and forth between a and b values every 2 seconds.

Image for post
Image for post
Plain and simple. Animating blur on a background image.

This gives us a nice blur effect. It can be applied to any element via the tweenBlur function.

In the next example, it was applied to a separate element.

Image for post
Image for post
How filter:blur together with jQuery and PNG ransparency creates a production quality animation.

Excuse color artifactsbut this won’t actually happen in browser. It’s just the way Medium reduces the quality of gif animations.

I keep learning over & over again that the use of different tech in combination can create production-quality results. It’s never any one thing by itself.

Images

I used random images of birds I found on Google Images.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

A single image could have been used. But I didn’t have enough time to get the visual effect I wanted quite right. So I created two separate images. The one for background wallpaper I used a smaller bird. Larger one goes on the card.

Source Code

I won’t clutter this article with more source code.

But I created a jsFiddle with full source code.

The only other different thing that I added to the code I’ve already shown you above, was the bird switching function, that also changes some of the basic elements of the card.

Blur will also automatically blur text selection. I don’t know if there’s a practical purpose to this — but it surely does look intriguing:

Image for post
Image for post
filter: blur(10px) animated using jQuery and some custom JavaScript code.

Other Stuff I Made

If you wish to support my work CSS Visual Dictionary is my book.

See my other comprehensive CSS Grid tutorial right here on Medium.

Discover everything about flex in my other tutorial.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store