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.
Show HN: CSS Filter Effects
11–20 of 27 posts
Re: Show HN: CSS Filter Effects
#12Pretty cool.
It's simple way to test effects.
Re: Show HN: CSS Filter Effects
#13I 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.
This could be the new blink tag!
Re: Show HN: CSS Filter Effects
#14In 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.
Re: Show HN: CSS Filter Effects
#15I'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.
Re: Show HN: CSS Filter Effects
#16In 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.
There 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.
Re: Show HN: CSS Filter Effects
#17Is there any difference between opacity and filter: opacity ?
As 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.
Re: Show HN: CSS Filter Effects
#18Earlier quoted context omitted.
Works on ff 37.0.2
And on Firefox for Android. Blur is very slow, though.
Could 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.
Re: Show HN: CSS Filter Effects
#19CSS filters are cool! I also made something similar few months back: http://lalwanivikas.github.io/image-editor/
Re: Show HN: CSS Filter Effects
#20These 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.