In this video, we will create an awesome text effect CSS only. This video on how to clip image on text using -webkit-background-clip. For a preview click on Demo If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files. Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇 HTML <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >How to clip image on text</ title > <!-- style.css --> < link rel = "stylesheet" href = "style.css" > </ head > < body >
In this video, we will create a stunning and beautiful glass morphism dashboard navbar UI design using only HTML, CSS & JavaScript.
A stunning dashboard sidebar UI with glassmorphism effect in HTML, CSS, and JavaScript only.
If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files.
Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Morphism Dashboard Navbar UI Design</title>
<!-- fontawesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<!-- my css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar" id="nav">
<button class="toggle-menu" id="menu">
<i class="fas fa-bars"></i>
</button>
<div class="nav-items">
<div class="admin-profile">
<div class="icons">
<img src="user.png" alt="admin">
</div>
<span>Admin</span>
</div>
<div class="item-list">
<div class="icons">
<i class="fas fa-tachometer-alt"></i>
</div>
<span>Dashboard</span>
</div>
<div class="item-list">
<div class="icons">
<i class="fas fa-wallet"></i>
</div>
<span>Coupons</span>
</div>
<div class="item-list">
<div class="icons">
<i class="far fa-comment-dots"></i>
</div>
<span>Messages</span>
</div>
<div class="item-list">
<div class="icons">
<i class="fas fa-users"></i>
</div>
<span>Team</span>
</div>
<div class="item-list">
<div class="icons">
<i class="fas fa-list"></i>
</div>
<span>Userlist</span>
</div>
<div class="logout">
<div class="icons">
<i class="fas fa-sign-out-alt"></i>
</div>
<span>Logout</span>
</div>
</div>
</nav>
<!-- javascript -->
<script src="main.js"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
font-family: 'Raleway', sans-serif;
transition: 0.4s;
}
body {
display: flex;
justify-content: start;
align-items: center;
min-height: 100vh;
padding: 30px;
background-image: url(background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.navbar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 90vh;
background-color: #ffffff40;
backdrop-filter: blur(20px);
border: 2px solid #ffffff30;
border-radius: 15px;
position: relative;
overflow: hidden;
box-shadow: 0 0 15px -5px #00000030;
padding: 15px;
}
.toggle-menu {
position: absolute;
top: 15px;
left: 25px;
background-color: transparent;
cursor: pointer;
}
.toggle-menu i {
color: #81305d;
font-size: 2.5em;
}
.nav-items {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 65vh;
}
.admin-profile,
.item-list,
.logout {
width: 100%;
display: flex;
justify-content: start;
align-items: center;
cursor: pointer;
border-radius: 10px;
}
.item-list:hover,
.logout:hover {
background-color: #ffffff60;
}
.admin-profile {
margin: 40px 0;
background-color: #ffffff70;
}
.logout {
margin-top: 30px;
}
.icons {
width: 50px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.icons img {
width: 40px;
height: 40px;
}
.icons i {
font-size: 2em;
color: #81305d;
}
span {
display: flex;
font-size: 1.5em;
letter-spacing: 1px;
text-transform: uppercase;
color: #81305d;
margin-left: 10px;
}
JavaScript
var nav = document.getElementById("nav");
var menu = document.getElementById("menu");
var span = document.getElementsByTagName("span");
menu.addEventListener("click", () => {
if (nav.style.width == "85px") {
nav.style.width = "300px"
for (i = 0; i < 7; i++) {
span[i].style.display = "block"
}
} else {
nav.style.width = "85px"
for (i = 0; i < 7; i++) {
span[i].style.display = "none"
}
}
});
Subscribe to me on YouTube
Like & Comment on my video on YouTube & press the bell icon to get notification first.
Follow me on Instagram
Comment down any query if you have.
Very good design
ReplyDeleteWow glass mirror
ReplyDeleteNice dzine
ReplyDelete