TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: CSS Filter Effects

63 pointsby naeemnurabout 10 years ago

13 comments

viggityabout 10 years ago
I've used the filter effects for a lot of really useful applications. I'm always surprised though that sepia is an offered filter. It seems pretty kitsch and not that useful, it is effectively grayscale with an additive color overlay of only one color. I don't mind that it is there, but it doesn't seem like a primitive operation like the rest. Perhaps if you could change the overlay then it'd be a lot more useful.
ErikHuismanabout 10 years ago
These css effects are pretty cool. But front-enders beware, they can be supersuper slow when trying to animate or even scroll (especially on mobile). If you want to use blurred images let a server do the burring for you.
评论 #9504325 未加载
评论 #9506736 未加载
Thizabout 10 years ago
In Safari, the blur effect should not extend over the boundaries of the object.<p>Is that a bug or a feature?<p>Btw, there are some interesting ideas for sliding captchas.
评论 #9505082 未加载
评论 #9509334 未加载
评论 #9505665 未加载
UUMMUUabout 10 years ago
I had way too much fun sliding the Hue Rotation back and forth to create Disco Kitty. Thanks for sharing, I knew about blur and opacity but the rest of these were new to me.
评论 #9504971 未加载
lalwanivikasabout 10 years ago
CSS filters are cool! I also made something similar few months back: <a href="http:&#x2F;&#x2F;lalwanivikas.github.io&#x2F;image-editor&#x2F;" rel="nofollow">http:&#x2F;&#x2F;lalwanivikas.github.io&#x2F;image-editor&#x2F;</a>
andrewmuabout 10 years ago
I&#x27;m wondering why the greyscale and saturation filters were both necessary. greyscale(0) == saturation(1.0) and greyscale(1.0) == saturation(0.0), with afaik a linear scaling between either.
sebnukem2about 10 years ago
Now what would be really cool is the ability to define a filter function in JS callable from the CSS. Of course one can do that with canvas.
leni536about 10 years ago
Cool stuff. Alternatively you could embed images in SVG and apply SVG filters, but it&#x27;s quite more complicated.
atkayeabout 10 years ago
Small typo on &quot;Hue Roatate&quot; FYI
评论 #9504585 未加载
kylelibraabout 10 years ago
These are cool, but seems like in cases where you want to blur something out on an image you should do so in photoshop on the actual image and not with css. Otherwise someone could just use element inspector to delete the blur effect.
评论 #9505586 未加载
audessuscestabout 10 years ago
Is there any difference between opacity and filter: opacity ?
评论 #9505088 未加载
polygonplanetabout 10 years ago
Pretty cool. It&#x27;s simple way to test effects.
mikkomabout 10 years ago
Doesn&#x27;t seem to work with firefox&#x2F;linux.
评论 #9505625 未加载
评论 #9504514 未加载