Archive for the ‘filter’ Category

Filtering and Chaining in Functional JavaScript

Posted on: No Comments
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 ...

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 f...

Animated Animals in CSS and SVG

Posted on: No Comments
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 exp...

3 More Joins You Should Be Familiar With

Posted on: No Comments
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 r...

Using the RulerZ Rule Engine to Smarten up Playlist Building

Posted on: No Comments
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...

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 Vi...

Motion Blur Effect with SVG

Posted on: No Comments
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 movemen...

Creative Gooey Effects

Posted on: No Comments
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 webs...