
CSSgram: CSS library for Instagram filters - gotchange
https://github.com/una/CSSgram
======
thekevan
How about that!
[https://news.ycombinator.com/item?id=10451365](https://news.ycombinator.com/item?id=10451365)

~~~
yask123
That post didn't catch attention. I wonder why?

~~~
thekevan
I wonder if Github posts catch more attention than web site posts. Funny since
in the comments, someone asked for a demo, which is the website I submitted.
Oh well.

However, let's not lose focus of the fact that while it's fun to watch them,
you really cannot spend these internet points we earn here.

------
krick
Probably I'm just left behind in terms of front-end stuff and just need to
catch up, while for everyone else "it's not a big deal", but for me it's
really impressive. I mean, I understand that instagram filters are not a
rocket science, but CSS filters, really? In real time, just like that?

And the whole github profile is pretty nice, I gotta say. Nothing special, but
inspiring somehow.

------
lalwanivikas
Nice! I made a similar thing last year to play around with CSS filters:

[https://github.com/lalwanivikas/image-
editor](https://github.com/lalwanivikas/image-editor)

It's not exactly an editor as the original image is not 'edited'. I don't know
why I decided to call it that :) Filter is the right term.

~~~
lalwanivikas
If anyone interested in learning how I built it: (my guest post on SitePoint
about it)

[http://www.sitepoint.com/build-simple-image-editor-with-
css-...](http://www.sitepoint.com/build-simple-image-editor-with-css-filters-
jquery/)

------
Sir_Cmpwn
I honestly could use this for something I'm working on at work. Thanks!

------
widgetic
What a great contribution to the open source space! We'll to get our hands
dirty with this library! Thanks! :-)

------
mtw
Nice! Meanwhile Instagram added new filters: Clarendon, ludwig, moon etc.
Would love to have a guide on how to recreate filters with CSS if we want to
have those new filters as well

~~~
unakravets
Hey! This is the library author :) I wrote a bunch of blog posts about blend
modes, filters, and gradients on [http://una.im](http://una.im) if you wanted
to learn more about them. I also did a conference talk on the subject (its
linked in the page for CSSgram)

Thanks for checking it out :)

------
juddlyon
Very cool! Wondering if there are any performance implications?

Too bad there's no IE support, but defaulting to a regular image isn't a big
deal.

------
leni536
Nice! Note that using SVG one can pretty much create any kind of filter, sure
it's not as simple as adding a class attribute and I'm not sure about
transitions (SVG can be animated though).

------
Calvein
They should really be in data-attributes instead of classes imo. And not
having issues on Github is quite a weird, especially when the first rule for
contributing is: > Create an issue

~~~
freshyill
Why on earth would someone want to apply CSS via data attributes instead of
classes? That's the kind of statement you need to justify.

~~~
Nadya
Structural purposes.

Personally, I hate moving/changing/adding classes with Javascript. classList
is hacky. Stuff like this is exactly what data-attributes are for. [0]

    
    
      img.dataset.filter // "instagram filter type"
    

The CSS would need slight changes, accordingly:

    
    
      img[data-filter="filter_type"] { /* styles */ }
    

[0] [https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Usin...](https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Using_data_attributes)

~~~
lucideer
Why does everyone here seem to be assuming the primary use-case is some kind
of interactive on/off filter?

Surely the common setting for this to be applied is in a web page where the
author/photographer/designer has already selected a fixed filter and the
visitor is just looking at it applied. A UI allowing someone to toggle or
select filters on an image is the exceptional case here.

~~~
Nadya
There are better ways to accomplish this if you just want a fixed filter...
such as displaying the image with the filter already applied instead of
relying on user's (non-IE) browser to do it. Unless you plan to not support IE
users _at all_ , which is a rather big "don't do this" for front-end dev.

So a UI to select filters to apply in FF/Chrome as progressive enhancement
seems to be the best use case I can see for this, if I can be frank.

~~~
lucideer
"Better" from an infrastructural perspective maybe, for performance reasons,
etc. but for many people quickly dropping in a bit of frontend magic is very
often opted for in practice over more performant server-side setups.

As for not supporting IE users at all, it's a filter - you don't lose image
display.

------
MasterScrat
No demo?!

~~~
amenghra
there's a link at the top of the repo page:
[http://una.im/CSSgram/](http://una.im/CSSgram/)

~~~
MasterScrat
Oh yes thanks, I scrolled down to read, then ctrl+F for "demo" and missed it.

