#QUCS ICON ALPHA LAYER HOW TO#
#QUCS ICON ALPHA LAYER CODE#

Unless I don’t understand the above sentence, this appears to suggest that opacity shouldn’t break the effect, even though it does in both Chrome and Firefox. MDN says the following in the very first paragraph on the backdrop-filter page:īecause it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent. Is that a bug? Is that what’s supposed to happen? Bug or not? It looks like we found the problem! For some reason, making the top layer semitransparent using opacity breaks the backdrop-filter effect in both Chrome and Firefox. We generate the nav bar with the following Pug: - let data = The result ( live demo) when the top layer is made semitransparent using opacity instead of a hsla() background.

#QUCS ICON ALPHA LAYER CODE#

Now, having read the intro, you’ve probably figured out that didn’t go as planned, but let’s see what it looks like in code and what issues there are with it. Then, I’d make the top one semitransparent with an opacity value smaller than 1, set backdrop-filter: blur() on it, and that should be just about enough. My first thought was to stack the two pseudos (with emoji content) of the navigation links, slightly offset and rotate the bottom one with a transform so that they only partly overlap. Liquid navigation.Īlright, so this is going to be our starting point: using emojis for the icons. A lot of time because it’s detail work.Īnd if all I want is to quickly code a menu concept with icons, I resort to using emojis, applying a filter on them in order to make them match the theme and that’s it! It’s what I did for this liquid tab bar interaction demo - those icons are all emojis! The smooth valley effect makes use of the mask compositing technique. So, I cannot just use them as I find them on the internet - I have to redo the code to make it super clean and compact. Long answer: because I lack the artistic sense of just drawing them in an image editor, but I’m familiar with the syntax enough such that I can often compact ready-made SVGs I find online to less than 10% of their original size. Short answer: because SVG takes too much time. And also the things I still don’t understand. However, getting a glassmorphism effect for irregular shapes like icons, whether these icons are emojis or proper SVGs, is a lot more complicated than I expected, so I thought it would be worth sharing the process, the traps I fell into and the things I learned along the way.

#QUCS ICON ALPHA LAYER HOW TO#

It turns out that, while there are resources on how to CSS such an effect, they all assume the very simple case where the overlay is rectangular or at most a rectangle with border-radius. I couldn’t have been more wrong about those “few minutes” - they ended up being days of furiously and frustratingly scratching this itch! My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time on SVG-ing them. I recently came across a cool effect known as glassmorphism in a Dribble shot.

Qucs icon alpha layer