macOS High Sierra site Navbar effect

I was curious if anyone could give any guidance around how to achieve the navbar effect on the high sierra site…

It appears to be a blurred transparency - is this incredibly simple and I’m just missing something?

Thanks in advance.

CSS filters

Remember that if your added CSS code is added using the Custom code element (and not the site wide custom code or page custom code), you’ll see the effects right in the designer.

Hey @vincent,

but webflow doesn´t support “backdrop-filter” or?

Greetings,
Maurice

No but it’ easy to add it as custom code on a defined class, then add the class to any element within webflow.

Yeah thats true, but native support is always nicer.

Everything comes at the right time :slight_smile:

Let’s say Webflow natively supports appearance of the effect of custom CSS right in the designe,r which is… super cool.

1 Like

Yeah that would be pretty sick. Also “:before” and “:after” support would be really nice.

I can’t wait for pseudo elements support yes.

I´m hoping the most for multilingual support :grin:

1 Like

I’m actively lobbying for that! I’m actually struggling with a multilanguage structure right now, prevents me to use the CMS templates, oblige me to use an overcomplicated structure for CMS dates translated with JS…

Seems we have the same priorities :slight_smile:

2 Likes

Hi @allergicto, I made a little sample site using IX 2.0 and some opacity changes, is this something what you are trying to achieve? In this example, I have a couple of layers of the home image and I am changing the opacity of the divs from one div having the sharp image to another div having the blurred image.

https://webflow.com/website/High-Sierra-Nav-Effect

I hope this helps to give some ideas

2 Likes

You guys are awesome! I’ll post my project here when I’m done. Thank you all!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.