Thanks to CSS3, our design and development options have grown a lot. In this tutorial I will how you how to make a transparent glass menu bar with CSS3.
The demo can be seen below.
See the Pen Colorful glass menu concept by Creative Punch (@CreativePunch) on CodePen.
For this demo, I wanted to have a background with some variation. I used a colorful gradient for this, but you could also use a nice image. A flat color as background would not look as good with a glass menu.
I made use of a CSS reset, and prefix-free
The HTML for the glass menu bar
The CSS for our glass menu bar will be much the same as with any menu bar. We will place a nav tag, containing an u list with links.
<nav> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Blog</a> <li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav>
The CSS for the glass menu bar
The CSS for the glass menu bar is really simple, but uses a few nice CSS3 features!
nav { max-width: 960px; mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%); margin: 0 auto; padding: 50px 0; } nav ul { text-align: center; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%); width: 100%; box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); } nav ul li { display: inline-block; } nav ul li a { padding: 20px; font-family: "Roboto"; color: rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); font-size: 25px; text-decoration: none; display: block; } nav ul li a:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); color: rgba(0, 0, 0, 0.7); }
Let’s look at some of this in a bit more detail.
nav ul { text-align: center; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%); width: 100%; box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); }
I styled the ul tag with a background gradient that is white and transparent. I also added a two box-shadow values, one for an outer, dark shadow and one for an inner, light edge. Sadly the box-shadow’s sides don’t fade into the background like the gradient does. Luckily we can solve this by using the mask-image property. We apply this property on the parent element (in this case the nav). We do this so that we can apply a padding to the top and bottom. If we don’t do this, our shadows will get cut off by the mask.
nav { max-width: 960px; /* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */ mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%); margin: 0 auto; /* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */ padding: 50px 0; }
We also use the same gradient technique for the hover event, only rotated by 90 degrees like this:
nav ul li a:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); color: rgba(0, 0, 0, 0.7); }
This adds an extra “overlay” of glass when you hover over a menu item.
That’s pretty much all there is to it! I hope this inspires you to create some beautiful glass menus.