5 ms·
Show HN: CSS Filter Effects
- ErikHuisman 11y agoThese 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.
- TazeTSchnitzel 11y agoOr blur with canvas, so you only do the client-side operation once?
- leppr 11y agoYea, they seem to be too expensive to use for full page effects, but I haven't found them to impact performance if used with parsimony on a few select elements with no children.
- mikkom 11y agoDoesn't seem to work with firefox/linux.
- fougerejo 11y agoWorks on ff 37.0.2
- Brakenshire 11y agoAnd on Firefox for Android. Blur is very slow, though.
- nness 11y agoCould be that the blurring isn't being handled by the GPU. CSS 3D-transforms are usually added as a work-around when we want a smoother performance for certain elements by forcing that extra rendering step.
- sebnukem2 11y agoIt does. FF 36 on CentOS 6.6.
- leni536 11y agoCool stuff. Alternatively you could embed images in SVG and apply SVG filters, but it's quite more complicated.
- audessuscest 11y agoIs there any difference between opacity and filter: opacity ?
- talmand 11y agoAs far as I know, there's no difference in the outcome. Opacity is handled by most browsers through hardware and I would imagine the filter method does the same. I would hope they are handled the same because it would seem wasteful to have two methods that do the same thing. Somewhat useless thought, opacity and the opacity filter can be combined on the same element. If one is set to zero it makes the other irrelevant. If one is set to 100% then it makes itself irrelevant.
- atkaye 11y agoSmall typo on "Hue Roatate" FYI
- naeemnur 11y agoFixed it, thanks!
- UUMMUU 11y agoI 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.
- monk_e_boy 11y agoThis could be the new blink tag!
- polygonplanet 11y agoPretty cool. It's simple way to test effects.
- Thiz 11y agoIn Safari, the blur effect should not extend over the boundaries of the object. Is that a bug or a feature? Btw, there are some interesting ideas for sliding captchas.
- nness 11y agoThere overflow: hidden; on one of the its parents, so you'd assume that it shouldn't blur outside of the parent container. I'd call that a bug.
- dschep 11y agoFirefox behaves the same way AFAICT. http://i.imgur.com/YCygCb7.png http://i.imgur.com/YCygCb7.png
- SimeVidas 11y ago[Spec](http://dev.w3.org/fxtf/filters/#filter-region-for-shorthands http://dev.w3.org/fxtf/filters/#filter-region-for-shorthands) hints at this being expected behavior: “Furthermore, if a shorthand filter expands this visible area like it is the case for <blur()> or <drop-shadow()> the filter region must cover this area as well.”
- viggity 11y agoI'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.
- lalwanivikas 11y agoCSS filters are cool! I also made something similar few months back: http://lalwanivikas.github.io/image-editor/ http://lalwanivikas.github.io/image-editor/
- kylelibra 11y agoThese 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.
- wmeredith 11y agoIn those cases you are correct, but what if you're building a cloud based SAAS that lets users manipulate photos, then save the result? This stuff has a lot of uses.
- andrewmu 11y agoI'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.
- sebnukem2 11y agoNow 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.