12 ms·
CSSgram: CSS library for Instagram filters
- thekevan 11y agoHow about that! https://news.ycombinator.com/item?id=10451365 https://news.ycombinator.com/item?id=10451365
- yask123 11y agoThat post didn't catch attention. I wonder why?
- thekevan 11y agoI 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.
- CharlesFloate 11y agoProbably because HN <3s the word library a bit too much.
- ianphughes 11y agoYeah, I'm in agreement with previous posters. "Library" + "Github" equals more attention. This is somewhat of a lesson in crafting a headline here.
- MasterScrat 11y agoNo demo?!
- amenghra 11y agothere's a link at the top of the repo page: http://una.im/CSSgram/ http://una.im/CSSgram/
- MasterScrat 11y agoOh yes thanks, I scrolled down to read, then ctrl+F for "demo" and missed it.
- juddlyon 11y agoVery 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.
- mtw 11y agoNice! 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 11y agoHey! 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 :)
- Calvein 11y agoThey 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 11y agoWhy 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 11y agoStructural 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/Using_data_attributes https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Usin...
- awhitty 11y agoHm, this is an interesting case where stylesheet design principles and application logic aren't so loosely coupled. The data attributes almost seem to be a way to invoke CSS styles as functions themselves.
- goldenkey 11y agoThe main difference is that using classes, is misusing them. Because enum values as classes pollutes the namespace. Enum values should map to attribute values. It makes logical sense. Attribute values don't go into a namespace. They just exist as things to query by. It is possible many CSS engines optimize this fact. By not caching attribute values until there is a selector that uses them. Classes on the other hand are inherently saying 'I will query by this at a later time - I give no hints as to whether it is mutually exclusive with other class values. I merely have a list of class values which apply.'
- Sir_Cmpwn 11y agoI honestly could use this for something I'm working on at work. Thanks!
- lalwanivikas 11y agoNice! 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 11y agoIf 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-filters-jquery/ http://www.sitepoint.com/build-simple-image-editor-with-css-...
- krick 11y agoProbably 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.
- widgetic 11y agoWhat a great contribution to the open source space! We'll to get our hands dirty with this library! Thanks! :-)
- leni536 11y agoNice! 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).