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
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).
Comments
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
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 =)
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).
Though I found a use for the "kill sticky" bookmarklet. https://news.ycombinator.com/item?id=42902395