Comments on: Icon Glassmorphism Effect in CSS

By: Lola McKissen

Lola McKissen — Wed, 10 Nov 2021 23:32:48 +0000

In reply to Ahem. Android 12 as well. Fine when opening the codepen in a new tab.

By: Ana Tudor

Ana Tudor — Wed, 10 Nov 2021 15:25:43 +0000

In reply to Dougal Graham. Because this allows me to change multiple property values (both on the link itself and on the spans inside) by only changing that one highlight flag. It keeps things DRY and logical, it allows me to easily see what properties are modified on hover/ focus for the selected element(s) without having to look for a :hover/ :focus block and then struggle to somehow have both the normal state and the :focus/ :hover state on the screen at the same time to compare how the properties of interest are modified. Which makes debugging a lot faster. I detailed this in an article a while back.

By: Dougal Graham

Dougal Graham — Wed, 10 Nov 2021 09:43:11 +0000

Very cool effect! I have a question: why use a CSS variable flag rather than just nesting the active state under the :hover and :focus selectors?

By: Álvaro Antonio

Álvaro Antonio — Tue, 09 Nov 2021 17:28:19 +0000

In reply to Ahem. Yes, I can confirm the full box blur in Android 11 Chrome, but only when interacting with the embedded codepen. Once I open the codepen I'm it's own tab the effect works as intended.

By: Ana Tudor

Ana Tudor — Tue, 09 Nov 2021 11:29:58 +0000

In reply to Ahem. What OS and what browser?

By: Ahem

Ahem — Tue, 09 Nov 2021 10:11:08 +0000

Still has the full-box-blur effect on mobile.