Webmasters Gallery

CSSgram is a tiny CSS library that allows you to apply 15 filters that you already know from Instagram to any image you want. If you like this type of image modification, you can grab it without hesitating. Using neat image effects doesn’t get easier than that.

CSSgram: 1kb Small Powerhouse for Your Images

Una Kravets from Austin, Texas is responsible for the small image effect powerhouse. CSSgram is distributed under the liberal MIT license, which means it’s free for private and commercial use and can be downloaded on Github. The CSS library is in active development that is, however, currently slowing down due to a small attack on the repository. This only affects the future perspectives, though. The CSS library as is works really well and reliably with its current equipment of 15 filters.

You already know the provided filters from Instagram. If you like the vintage look of the default Instagram filters, CSSgram is the flexible filter engine for your website images. CSSgram uses CSS Filters and CSS Blend Modes, so you can already imagine that it doesn’t work with all browsers. It does work perfectly fine on Chrome starting from 43, Firefox from 38 and up, Opera from 32 and Safari starting from 8. The Internet Explorer is excluded. However, this is no big deal, as the worst case scenario is that a filter is not applied to the image and the image is displayed in original state.

On the project website, you can view the filters in all their glory and see the difference between original and filter instantly on hover. Here are some of the available effects applied to an example image:

CSSgram: It’s This Easy to Apply a Filter

Even when your are not a webdesigner but more of an ambitious site operator, you won’t face any problems when using CSSgram. First you need to integrate the library into your project. It works like this:

1

<link rel="stylesheet" href="css/vendor/cssgram.min.css"/>

That’s almost it. Now all you need to do is equip the respective image with a class that defines the filter, like this:

1
2
3
4

<!-- HTML -->
<figure class="aden">
<img src="../img.png" alt="" />
</figure>

Or Easier:

1

<img class="aden" src="../img.png" alt="" />

When you want to restrict yourself to one effect only, you can use an even smaller CSS library that only provides this one effect, e.g.:

1

<link rel="stylesheet" href="css/vendor/aden.min.css"/>

CSSgram also offers another flavour for those that prefer Sass. Here, effects are defined via @extends. The Sass variant also offers single files per effect.

In the end, I cannot bring forward anything against using CSSgram for pretty image effects. Let Photoshop be Photoshop and filter a couple neat images. This is easy, fast and non-destructive. Have fun!

(dpe)