Frosted Glass Navigation Bar
How do I make an frosted glass navigation bar?
I am trying to replicate IOS 7's frosted glass look, although its not perfect, it's a start.. What is a frosted glass navigation bar? How do you make a frosted glass navigation bar? This script and codes were developed by Collin Chappell on 03 February 2023, Friday.
Frosted Glass Navigation Bar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Frosted Glass Navigation Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav" id="blur"> <ul> <li><a class="first">Home</a></li> <li><a class="first">Portfolio</a></li> <li><a>Blog</a></li> <li><a class="last">Pricing</a></li> <li><a class="last">Contact Me</a></li> </ul>
</div>
<div id="body">
</div>
<script src="//use.typekit.net/wcp4cso.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</body>
</html>
Frosted Glass Navigation Bar - Script Codes CSS Codes
body { background: url(https://hdwallpapers.cat/wallpaper_mirror/purple_harmony_sky_mountains_sunset_nature_hd-wallpaper-1913939.jpg); background-attachment: scroll; background-repeat: no-repeat;
}
#body { height: 64px; width: 100%; padding-right: 16px; margin-left: -8px; margin-top: -8px; transition: left 1.2s ease; background: inherit; /* filter */ filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); z-index: 999;
}
.nav { position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: rgba(255, 255, 255, 0.4); border-bottom: 1px solid rgba(225, 225, 225, 0.5); z-index: 1000;
}
.nav ul { list-style: none; text-align: center; white-space: nowrap; padding-right: 32px;
}
.nav ul li { display: inline-block;
}
.nav ul li a { font-family: soleil, sans-serif; font-weight: 100; font-size: 25px; color: white; padding: 19px 16px; transition: background 0.4s, text-shadow 0.4s; cursor: pointer;
}
.nav ul li a:hover { background: rgba(255, 255, 255, 0.2); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.first { margin-right: -0.17em; border-right: none !important;
}
.last { margin-left: -0.17em; border-left: none !important;
}
Developer | Collin Chappell |
Username | Keubix |
Uploaded | February 03, 2023 |
Rating | 3 |
Size | 2,804 Kb |
Views | 2,024 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Profile Page | 2,900 Kb |
Flip Out Navigation Concept | 3,854 Kb |
DART Website Design | 0 Kb |
A Pen by Collin Chappell | 3,162 Kb |
Info Revealing Hover Effects | 2,877 Kb |
Parallax navigation | 2,505 Kb |
Enjin Navigation Bar Creator | 6,599 Kb |
Minedrix | 0 Kb |
Frosted Glass Panels | 3,134 Kb |
Funny Pet Facebook Concept | 5,087 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Delete Hover | Chungman93 | 2,557 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Reading Grid | Tappily | 4,306 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
CSS Grid Test | Ajaykarwal | 2,377 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!