3 ms·

Show HN: CSS Photo Filter Playground

35 points by ent101 7y ago

ebg13 7y ago
I always see cutesy names attached to photo filters, but do they actually mean anything?
- katsura 7y ago
  Usually these try to replicate the Instagram filters. For example, here is the description of some of them: https://www.hollywoodreporter.com/news/instagram-filters-history-names-explained-910720 https://www.hollywoodreporter.com/news/instagram-filters-his... https://www.seventeen.com/life/tech-social-media/news/a36748/heres-the-story-behind-5-of-your-favorite-instagram-filter-names/ https://www.seventeen.com/life/tech-social-media/news/a36748...
technotarek 7y ago
Would be nice to somehow display or directly link to the caniuse entry for each applied filter setting.
chiefalchemist 7y ago
I should probably know this but are those filters usable with animation / transition. For example, color photo (no filter) to b&w filter? Or b&w filter to color photo (no filter)
- katsura 7y ago
  Sure they are: figure { filter: grayscale(1); transition: filter .3s ease; } figure:hover { filter: none; }
- _bxg1 7y ago
  They do, although the image processing can get sluggish on some devices so your mileage may vary when it comes to smoothly transitioning it.
  - mceachen 7y ago
    And by sluggish, it may mean no transition, as the time to compute one frame exceeds the transition time. This is especially true for larger images on older hidpi devices (like mid-range or flagship Android devices from a couple years ago).
soylentcola 7y ago
FYI, I get a row of broken images along the top. Looks like Unsplash API endpoints are blocked as trackers in Privacy Badger (I assume due to the way they use it to track views/downloads).
MaximumYComb 7y ago
I was taught to avoid inline CSS, like the CSS used to apply these filters. Was I taught wrong or does this site use less than ideal practices?
- jake-low 7y ago
  I grepped the minified source code included in the page, and it looks like the project was built using React. React isn't opinionated on how you should handle component styling, and so the community has experimented a lot [0] with different solutions to managing CSS for components. One approach is to have the component set its own inline styles in the render function. This makes it easy to have the component's styles to be "reactive" to its props (arguments), e.g.: function MyButton({ importance }) { return ( <button style={{ color: importance === "high" ? "red" : "grey" }}> Click me! </button> ); } In my opinion, Christopher “vjeux” Chedeau makes the most cogent argument [1] for why this way makes sense. It's worth a read; even if you end up disagreeing with the conclusion. A related solution is to use classes, not inline styles, but to use a CSS framework such as Tachyons [2] where the included classes are small, single-purpose styling utilities like "serif" (applies font-style: serif) and "br-pill" (adds rounded borders). [0]: https://github.com/MicheleBertoli/css-in-js#features https://github.com/MicheleBertoli/css-in-js#features [1]: https://speakerd.s3.amazonaws.com/presentations/2e15908049bb013230960224c1b4b8bd/css-in-javascript.pdf https://speakerd.s3.amazonaws.com/presentations/2e15908049bb... [2]: https://tachyons.io/#style https://tachyons.io/#style
inmate4587 7y ago
It would've been nice if I could download the photo after applying the effect.
chaz6 7y ago
If you have disabled referer headers, the site does not work ("Your request did not contain a Referrer header."). In Firefox the preference is network.http.referer.defaultPolicy.

35 points by ent101 7y ago

ebg13 7y ago

I always see cutesy names attached to photo filters, but do they actually mean anything?

katsura 7y ago
Usually these try to replicate the Instagram filters. For example, here is the description of some of them: https://www.hollywoodreporter.com/news/instagram-filters-history-names-explained-910720 https://www.hollywoodreporter.com/news/instagram-filters-his... https://www.seventeen.com/life/tech-social-media/news/a36748/heres-the-story-behind-5-of-your-favorite-instagram-filter-names/ https://www.seventeen.com/life/tech-social-media/news/a36748...

technotarek 7y ago

Would be nice to somehow display or directly link to the caniuse entry for each applied filter setting.

chiefalchemist 7y ago

I should probably know this but are those filters usable with animation / transition. For example, color photo (no filter) to b&w filter? Or b&w filter to color photo (no filter)

katsura 7y ago
Sure they are: figure { filter: grayscale(1); transition: filter .3s ease; } figure:hover { filter: none; }
_bxg1 7y ago
They do, although the image processing can get sluggish on some devices so your mileage may vary when it comes to smoothly transitioning it.
- mceachen 7y ago
  And by sluggish, it may mean no transition, as the time to compute one frame exceeds the transition time. This is especially true for larger images on older hidpi devices (like mid-range or flagship Android devices from a couple years ago).

soylentcola 7y ago

FYI, I get a row of broken images along the top. Looks like Unsplash API endpoints are blocked as trackers in Privacy Badger (I assume due to the way they use it to track views/downloads).

MaximumYComb 7y ago

I was taught to avoid inline CSS, like the CSS used to apply these filters. Was I taught wrong or does this site use less than ideal practices?

jake-low 7y ago
I grepped the minified source code included in the page, and it looks like the project was built using React. React isn't opinionated on how you should handle component styling, and so the community has experimented a lot [0] with different solutions to managing CSS for components. One approach is to have the component set its own inline styles in the render function. This makes it easy to have the component's styles to be "reactive" to its props (arguments), e.g.: function MyButton({ importance }) { return ( <button style={{ color: importance === "high" ? "red" : "grey" }}> Click me! </button> ); } In my opinion, Christopher “vjeux” Chedeau makes the most cogent argument [1] for why this way makes sense. It's worth a read; even if you end up disagreeing with the conclusion. A related solution is to use classes, not inline styles, but to use a CSS framework such as Tachyons [2] where the included classes are small, single-purpose styling utilities like "serif" (applies font-style: serif) and "br-pill" (adds rounded borders). [0]: https://github.com/MicheleBertoli/css-in-js#features https://github.com/MicheleBertoli/css-in-js#features [1]: https://speakerd.s3.amazonaws.com/presentations/2e15908049bb013230960224c1b4b8bd/css-in-javascript.pdf https://speakerd.s3.amazonaws.com/presentations/2e15908049bb... [2]: https://tachyons.io/#style https://tachyons.io/#style

inmate4587 7y ago

It would've been nice if I could download the photo after applying the effect.

chaz6 7y ago

If you have disabled referer headers, the site does not work ("Your request did not contain a Referrer header."). In Firefox the preference is network.http.referer.defaultPolicy.