CSS trick using backdrop-filter for a frosted glass effect on a navigation bar, giving it a modern, sleek look that's trending in web design:
<nav class="frosted-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<style>
body {
margin: 0;
height: 100vh;
background: url('https://via.placeholder.com/1920x1080?text=Background') no-repeat center/cover;
font-family: Arial, sans-serif;
}
.frosted-nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.1); /* Semi-transparent base */
backdrop-filter: blur(10px); /* Frosted glass effect */
-webkit-backdrop-filter: blur(10px); /* For Safari support */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.frosted-nav ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 15px 0;
}
.frosted-nav li {
margin: 0 20px;
}
.frosted-nav a {
color: white;
text-decoration: none;
font-size: 18px;
transition: color 0.3s ease;
}
.frosted-nav a:hover {
color: #ff0066; /* Pop of color on hover */
}
</style>
Top comments (1)
Oh no why π