This content originally appeared on DEV Community 👩💻👨💻 and was authored by Shrihari Mohan
The one thing I always do when I begin a project is to add a navbar with background blur. Just got obsessed with it.
My Personal Website. View
PvZ2PlantsVsZombies
We will see how to do this in your website too! Just add this to your navbar container.
.bg-blur {
background: transparent;
backdrop-filter: blur(10px);
}
Code Review
background: transparent; - If you are having background color make sure you remove color and add this. This is what allows the background content to be visible on the navbar.
backdrop-filter: blur(10px); - This creates that smooth transition of navbar over background with that blur. Play with that values. 10px works good for me.
For more information. MDN Docs
Peace 🕊
If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more, contribute open source.
You can make a drink Buttermilk 🥛. Small support comes a long way!
Subscribe If you want to receive these blogs in your mail from @Medium for free!
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Shrihari Mohan
Shrihari Mohan | Sciencx (2022-10-29T17:14:58+00:00) Navbar with background blur! Aesthetic look in 2 lines of code .. Retrieved from https://www.scien.cx/2022/10/29/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.