top | item 42916245

(no title)

jak6jak | 1 year ago

Very pretty website. I really like the transparency for the nav bar. I would like to emulate this style in my own website. I wish I knew how to add texture to a website that makes it feel unique and not flat. Perhaps I should look into 3d postprocessing effects and how to apply that to a 2d website

discuss

order

esquevin|1 year ago

Go look at the code! it's just a right click > inspect away.

And you'll see you just needs a single CSS property `backdrop-filter: blur(8px);` to achieve this effect nowadays =)

chrismorgan|1 year ago

To do it properly, you need a bit more than just `backdrop-filter: blur(8px)`; see <https://www.joshwcomeau.com/css/backdrop-filter/#the-issue-2> for a clear demonstration of the problem, and the rest of that article for the solution (with further relevant details and discussion in <https://news.ycombinator.com/item?id=42302907>; in this particular case, the backdrop blur needs to be able to access 15px more of the backdrop than it can unless you go out of your way to give it that).