Digital Design

Better looking website images with Instagram style CSS filters

InstaCSS

In any modern web set-up, clients will inevitably want to upload content themselves and this will usually include images. In my experience, this is pretty much a nightmare from a design point-of-view. If a client doesn’t have an in-house content person or team, they will invariably upload a bunch of photos that look like they’ve been taken using a camera phone from 2002.

Recently I was asked to tidy up several web pages, each with around 20 images on them. Lots were poorly cropped and not high enough resolution but the biggest issue was the jarring mixture of badly lit amateur shots, vibrant professional pictures and random stock images. I needed a quick and easy way of neatening things up and creating some kind of consistency without uploading hundreds of new photos.

Introducing InstaCSS…

Instagram has a unique ability of making pretty much any picture look half decent. Also, if the same filter is used on every image, you can start to establish some kind consistent art-directed style to a web page.

CSS filters have been widely supported by all modern browsers (except IE) for while now so I set about combining these to create some Instagram inspired effects. I quickly realised that the addition of some JavaScript to add extra overlayed elements could bring even more interesting results — colour washes, vignette effects and the like — but I opted to stick with just CSS for the time being.

There are of course other ways to do this type of thing. There are WordPress plugins such as InstaFX but do you really want to give users all that power?! A better option could be using PHP and ImageMagick but it’s a bit more involved.

Anyway take a look at the SCSS file I’ve hosted on GitHub. It’s a simple mixin which you can include, passing the name of the effect (five so far) and a number between 0–1 to define the intensity of the filter.

View the project on GitHub