Category: filter

Filtering and Chaining in Functional JavaScript

One of the things I appreciate about JavaScript is its versatility. JavaScript gives you the opportunity to use object oriented programming, imperative programming, and even functional programming. And you can go back and forth among them depending on your current needs and the preferences and expectations of your team...

Distorted Button Effects with SVG Filters

View demo Download source Following our latest web experiment by Lucas Bebber where we created realistic heat and water distortion on images and text, we’d like to share some inspiration for these kind of effects on buttons. Applying SVG filters on HTML elements give us some great opportunity to get creati...

Animated Animals in CSS and SVG

View demo Download source Today we want to show you how the clever use of HTML, CSS sequenced animations, and SVG filters can bring to life one of the most unlikely (yet adorable) things to be seen on a web page – animals. We’ll explore two techniques for drawing the animals: one with plain HTML and...

3 More Joins You Should Be Familiar With

There are many ways to JOIN data from two database tables and filter the information you require. Craig Buckler wrote a popular piece on understanding JOINs; namely INNER, LEFT, RIGHT, and FULL OUTER. This article is an extension of that one. Let’s recap these real quick. Picture two tables, one for customers and one...

Using the RulerZ Rule Engine to Smarten up Playlist Building

I can give iTunes a few rules, and it will update the list of playlist tracks based on those rules, without me having to think about how it is doing that.But how does it do this? How does it build my simple rules into a filter for tracks? When I tell it things like; “give me everything from The Glitch Mob, produced...

Color Extraction Effect

View demo Download source Today we’d like to share a fun little color extraction experiment with you. The idea is to create a color palette from an image with a subtle effect on the image itself and some fanciness on the palette. We are using Vibrant.js by Jari Zwarts to extract the colors from the images, and C...

Motion Blur Effect with SVG

View demo Download source Today we are going to show you how to make a motion blur effect and apply it to regular JS or CSS animations of HTML elements. Motion blur is a technique widely used in motion graphics and animation in general to make movement seem more smooth and natural.Motion blur is the apparent strea...

Creative Gooey Effects

View demo Download source Today we are going to show how to use SVG Filters to apply a gooey-like effect to HTML elements. We’ll first cover some basics of the technique and then we’ll demonstrate several creative use cases for common website elements, like menus, apps, selections, paginations and more. Pl...