- This topic is empty.
December 16, 2015 at 7:29 am #235903
I’ve been playing around with the frosting glass effect with the approach from https://css-tricks.com/frosting-glass-css-filters/.
I just wanted it to be a little different, so that I can have multiple columns (in my case 5) each with their own “frosting glass”.
I’ve expanded on the original CodePen from adobe:
and created my own with these multiple columns:
My problem now is, that in Chrome, during the transition phase each column has a white glow to it, presumably from the underlaying white tint. It disappears, as soon as the transition is finished, both up and down.
When I expand the CSS transforms to the z-layer as it is proposed in the original article, I have this glow all the time. So like:
transform: translateY(90%) translateY(-5rem) translateZ(0);
In the original codepen, this glow isn’t there at all.
Unfortunately I’m not able to figure out, what I am doing different regarding this transition.
Any help is highly appreciated! Thank you!December 16, 2015 at 10:39 am #235910bearheadParticipant
You’re getting those whiter edges because Chrome renders
filter:blurwith feathered edges, so you’re seeing the white background show through there more.
The demo you based your pen on doesn’t actually use
filter:blurinstead, it uses two different background images. One is normal, and the other has been pre-blurred with image editing software.
If you must use
filter:blurI’m not sure if it is possible to get around the edge feathering effect…December 16, 2015 at 11:27 am #235911
Thank you for the replay. My bad, I pasted the wrong Codepen:
This one uses also blur, but doesn’t show feathering. Also, my Pen only shows the effect during animation, not when the start or end point of the animation is reached.
Edit: Actually, upon reviewing my original post, I realized that the original pen does also use the
filter:blur. It’s only the first example in the original post that uses a pre-blurred version.December 16, 2015 at 1:37 pm #235921bearheadParticipant
The feathering effect is there on the examples that use
filter:blurtoo. If you change the background color to red, you can see it more clearly.
I think it isn’t obvious as it is in your version because:
- You’re using a larger blur (10px vs 5px) which creates more feathering
- You’ve effectively broken the background into segments. The blur being applied to `.glass down` as a whole while not animating, but during animation, the blur is rendered individually for the animating `.slider`.
It just seems to be the way chrome handles the rendering… I’m not sure if that is a bug or by design, but for a work-around I would recommend using the pre-blurred image route if you can…
I hope that made sense…
In your pen, try changing the background color to red to more easily see what is going on.December 22, 2015 at 3:21 am #236086
Thank you for your reply, bearhead.
You’re right, this effect is noticable in chrome, no matter what.
I don’t know, why it isn’t there when the blurred frame is resting and appears only on movement, but that seems to be some chrome issue.
So I went back to a pre-blurred picture, because then it works everywhere. Even on IE, where I had some serious issues in 10 & 11.
It’s a pity, I was hoping to achieve it with CSS only, but it seems that the web is not just quite ready yet ;)
Thank you nevertheless,
- The forum ‘CSS’ is closed to new topics and replies.