Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Glassmorphism Sidebar in HTML and CSS
Glassmorphism is a design trend that makes elements appear translucent on the user interface. You may have seen on some websites a few components are semi-transparent looks like frosted glass which is an example of glass morphism.
The morph part of glass morphism implies depth to elements, that is, elements appearing higher or lower than others about the view of the user.
Approach to Create Glassmorphic Sidebar
In this article, we are going to build a glass morphic sidebar in HTML and CSS. Let's begin.
- Step 1: In this step, we will create a normal sidebar menu using HTML.
- Step 2: Here in this step we will design each HTML element to make the sidebar menu glassmophic.
You can use internal CSS or External CSS as you want. If you are using external CSS do not forget to add it to your HTML(CSS - Inclusion).
Creating Sidebar Menu Structure
Since we are creating a sidebar and not really focusing on other elements of a website, let's go ahead and create an aside element.
Create a div element and set the class name "sidebar" to select the whole div and create a list of items that you want to render in your sidebar menu in a list.
<body>
<div class="sidebar">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
<li><a>Gallery</a></li>
</ul>
</div>
</body>
Adding Glassmorphic Effect
We will use different CSS properties to design the glassmorphic sidebar.
- Let's reset the default styles that most HTML elements have - such as the bullets on the list.
- Next, let's style our anchor. Right below the ul in your CSS file, add the following code
- We can now style our sidebar. Let's target the nav element and add the following styles to it.
- We need to make the background color translucent. In CSS, we can achieve this by adding an alpha value to our color.
/* Reset the Default Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
}
/* Adding image For Background */
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: url("https://www.tutorialspoint.com/css/images/css.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* Styling list Items */
li {
cursor: pointer;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
background-color: transparent;
color: #fff;
border: none;
outline: none;
padding: 1rem 1.5rem;
}
/* Styling sidebar Class */
.sidebar {
background-color: rgba(255, 255, 255, 0.25);
height: 100vh;
padding: 1.5rem;
width: 25%;
backdrop-filter: blur(10px);
}
.sidebar ul li a:hover {
background: rgba(255, 255, 255, 0.2);
}
Example
Here we have merged both the code to show you the output of glassmophism sidebar.
<!DOCTYPE html>
<html>
<head>
<title>Glassmorphism Sidebar Using HTML and CSS</title>
<style>
/* Reset the Default Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: url("https://www.tutorialspoint.com/css/images/css.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
ul {
list-style-type: none;
}
/* Styling list Items */
a {
cursor: pointer;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
background-color: transparent;
color: #fff;
border: none;
outline: none;
padding: 2px;
}
/* Styling sidebar Class */
.sidebar {
background-color: rgba(255, 255, 255, 0.25);
height: 100vh;
padding: 1.5rem;
width: 25%;
backdrop-filter: blur(10px);
}
.sidebar ul li a:hover {
background: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
<li><a>Gallery</a></li>
</ul>
</div>
</body>
</html>
Output
106 Views
