Show HN: Image Effects with CSS

by bennettfeely • 10 years ago

203 18 10 years ago

TuringNYC2• 10 years ago

This is impressive and the documentation is nice. But it would be nice to get the 30-second pitch -- is the rationale to push processing onto the client side? When I think of such effects, I would usually imagine them being on the server side, perhaps on a dedicated image processing server.

jonespen• 10 years ago

Client side image editor is the first thing I thought of.

FlorianRappl• 10 years ago

But how would you then download the edited image? Either browsers support taking screenshots via an API (no browser extension) or you would need to render it on the server side again. Maybe I am missing something?

jonnyscholes• 10 years ago

One advantage is designers having more control to art direct content that's managed by the client (eg make all the images higher contrast and sepia). Sure it can be done on the backend - but that's more out of reach for designers than css. Css also has the advantage of being animatable.

iamahacker2• 10 years ago

Impressive.

visarga• 10 years ago

It's like PhotoShop. I used to play with pictures and obtain those effects 10-15 years ago. But I think we can do many more special effects with HTML5 Canvas.

jaimex2• 10 years ago

Its good to see stuff we were doing with java applets and Flash now just are part of our web frameworks. Its a weird process flow but its slowly getting there.

MrQuincle• 10 years ago

Slightly related question: Does the carbon footprint increase with all this client side rendering?

I would think just rendering something charcoal on the computer of the designer should be enough, rather than repeating it on the machines of thousands of visitors?

snarfy• 10 years ago

It's a good question. What about the network transmission? What's the carbon footprint of transmitting a 50k image to thousands of visitors vs a handful of bytes in css? I agree it does push more energy usage to the client, but I'm not sure how total energy usage adds up.

In any event I don't like it because it kills my battery.

onion2k• 10 years ago

Yes, and if your website is using CSS effects to change the same image for every user then you're making a mistake. Just render the modified image to a static asset and serve that.

However, if you want to use a pencil effect on an image that you don't have control over (eg a user's image before they upload it, or something from an API-driven service like Unsplash) then the technique still has a lot of value.

andybak• 10 years ago

Are these really that CPU intensive? It's a very basic transform. Probably a rounding error in terms of overall rendering energy usage.

leni536• 10 years ago

Nice. I consider this a hack though, I think that SVG filters are more suitable for this task.

mgalka• 10 years ago

Awesome resource. I've spent a lot of time looking for CSS image effects and found the info out there to be really lacking. Thanks for putting this together.

thenormal• 10 years ago

Will gladly use, but what is the code's license?

Show HN: Image Effects with CSS

Related Stories