An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Navbar with background blur! Aesthetic look in 2 lines of code .
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!
The Chrome Dev Tool you are missing : FEAT Recorder
Shrihari Mohan Jul 31 2 min read
Original Link: https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To