Creating a slide-down notification bar can enhance user experience by providing important information or alerts in a visually appealing way. In this guide, we’ll show you how to create a slide-down notification bar using HTML and CSS, similar to the notification bar used by Meta (formerly Facebook). This tutorial will help you add a modern and engaging element to your website, improving user engagement and interaction.
create an HTML file with a .html extension add the below code change the images with your image path and also add your improvisations like bell icon etc.
HTML Code:
<!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>HTML CSS</title>
<link rel="stylesheet" href="not.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="container">
<input type="checkbox" name="" class="btn" />
<div class="box">
<div class="header">
<p>Notifications</p>
<a href="#">See all</a>
</div>
<div class="content">
<div class="notification">
<img src="C:\Users\Swarna Khushbu\Desktop\Coding\Rsharan.png" alt="" />
<div class="text">
<p>
<span class="name">R.Sharan</span> commented.
</p>
<p class="time">1 hour ago</p>
</div>
</div>
<div class="notification">
<img src="har.png" alt="" />
<div class="text">
<p>
<span class="name">Ronald Henry</span> liked
your post.
</p>
<p class="time">2 hour ago</p>
</div>
</div>
<div class="notification">
<img src="harr.png" alt="" />
<div class="text">
<p>
<span class="name">H Granger</span>
reacted to your post.
</p>
<p class="time">4 hour ago</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Explanation of the Above Code:
<!DOCTYPE html>: Declares the document type and version of HTML being used, which is HTML5 in this case.<html lang="en">: Defines the root element of the HTML document and specifies the language of the document (English).<head>: Contains metadata about the HTML document, such as character encoding, viewport settings, and links to external resources.<meta charset="UTF-8" />: Specifies the character encoding of the document as UTF-8, which supports a wide range of characters.<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Provides instructions to Internet Explorer on how to render the webpage.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport width to the device width and initial zoom level to 1.0, ensuring proper scaling on different devices.<title>HTML CSS</title>: Sets the title of the webpage displayed in the browser tab.<link rel="stylesheet" href="not.css" />: Links an external CSS file named “not.css” to style the HTML elements.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer" />: Links an external CSS file from the Font Awesome CDN to use Font Awesome icons in the webpage.</head>: Closes the<head>element.<body>: Contains the content of the webpage that is visible to the user.<div class="container">: Defines a container to hold the content of the notifications.<input type="checkbox" name="" class="btn" />: Creates a checkbox input element with the class “btn”.<div class="box">: Defines a box element to contain the notifications.<div class="header">: Contains the header of the notification box.<p>Notifications</p>: Displays the text “Notifications” in the header.<a href="#">See all</a>: Creates a link “See all” in the header with no actual link (href=”#”).</div>: Closes the<div class="header">element.<div class="content">: Contains the content of the notifications.<div class="notification">: Defines a single notification.<img src="ADD_YOUR_OWN_PATH" alt="" />: Displays an image with the source “Your source” and an empty alt attribute.<div class="text">: Contains the text content of the notification.<p><span class="name">R.Sharan</span> commented.</p>: Displays the name “R.Sharan” with the class “name” and the text “commented.”<p class="time">1 hour ago</p>: Displays the time “1 hour ago” for the notification.</div>: Closes the<div class="text">element.</div>: Closes the<div class="notification">element.</div>: Closes the<div class="content">element.</div>: Closes the<div class="box">element.</div>: Closes the<div class="container">element.</body>: Closes the<body>element.</html>: Closes the<html>element.
This HTML code defines a webpage with a notification box that contains three notifications. Each notification includes an image, name, notification message, and timestamp. The notifications are styled using CSS from external files.
Now let’s add CSS:
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.btn {
position: relative;
width: 25px;
height: 25px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transform: translateY(-150px);
}
.btn::before {
content: "f0f3";
position: absolute;
top: 50%;
left: 50%;
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: 1.6em;
transform: translate(-50%, -50%);
}
.btn:checked ~ .box {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
} /* box */
.box {
width: 350px;
margin-top: 2em;
position: absolute;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.137);
transition: all 0.4s;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.header {
width: 100%;
display: flex;
justify-content: space-between;
padding: 0.6em 1em;
border-bottom: 1px solid rgba(0, 0, 0, 0.082);
}
.header a {
text-decoration: none;
}
.content {
width: 100%;
}
.notification {
width: 350px;
padding: 0.6em 1em;
display: flex;
align-items: center;
}
.notification img {
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 0.5em;
}
.notification .text p {
font-size: 0.8em;
}
.notification .text p span {
font-weight: 700;
}
.notification .text .time {
font-size: 0.7em;
color: rgba(0, 0, 0, 0.61);
}Output:
Explanation of CSS Code:
<!DOCTYPE html>: Declares the document type and version of HTML being used, which is HTML5 in this case.<html lang="en">: Defines the root element of the HTML document and specifies the language of the document (English).<head>: Contains metadata about the HTML document, such as character encoding, viewport settings, and links to external resources.<meta charset="UTF-8" />: Specifies the character encoding of the document as UTF-8, which supports a wide range of characters.<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Provides instructions to Internet Explorer on how to render the webpage.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Sets the viewport width to the device width and initial zoom level to 1.0, ensuring proper scaling on different devices.<title>HTML CSS</title>: Sets the title of the webpage displayed in the browser tab.<link rel="stylesheet" href="not.css" />: Links an external CSS file named “not.css” to style the HTML elements.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer" />: Links an external CSS file from the Font Awesome CDN to use Font Awesome icons in the webpage.</head>: Closes the<head>element.<body>: Contains the content of the webpage that is visible to the user.<div class="container">: Defines a container to hold the content of the notifications.<input type="checkbox" name="" class="btn" />: Creates a checkbox input element with the class “btn”.<div class="box">: Defines a box element to contain the notifications.<div class="header">: Contains the header of the notification box.<p>Notifications</p>: Displays the text “Notifications” in the header.<a href="#">See all</a>: Creates a link “See all” in the header with no actual link (href=”#”).</div>: Closes the<div class="header">element.<div class="content">: Contains the content of the notifications.<div class="notification">: Defines a single notification.<img src="C:\Users\Swarna Khushbu\Desktop\Coding\Rsharan.png" alt="" />: Displays an image with the source “C:\Users\Swarna Khushbu\Desktop\Coding\Rsharan.png” and an empty alt attribute.<div class="text">: Contains the text content of the notification.<p><span class="name">R.Sharan</span> commented.</p>: Displays the name “R.Sharan” with the class “name” and the text “commented.”<p class="time">1 hour ago</p>: Displays the time “1 hour ago” for the notification.</div>: Closes the<div class="text">element.</div>: Closes the<div class="notification">element.</div>: Closes the<div class="content">element.</div>: Closes the<div class="box">element.</div>: Closes the<div class="container">element.</body>: Closes the<body>element.</html>: Closes the<html>element.
This HTML code defines a webpage with a notification box that contains three notifications. Each notification includes an image, name, notification message, and timestamp. The notifications are styled using CSS from external files.
In conclusion, creating a slide-down notification bar like the one used by Meta is a great way to enhance your website’s user experience. By following the steps outlined in this guide, you can easily implement this feature using HTML and CSS. Adding a slide-down notification bar can help you effectively communicate important messages to your users, improving engagement and overall satisfaction with your website.
Leave a Reply