Hello developers, today in this blog, you'll learn to create a Notification Card Design using HTML, CSS & JavaScript.
The notification provides notifications to the users. The notification pop up from the top of the webpage. It also provides simple feedback about an operation in a device. It occupies some space required for the message and, the current activity remains visible and interactive. The continuous notification arranges one by one in order. The notifications can be removed by clicking the trash button on the side of the notification. Cards are surfaces that display contents and actions on a particular topic. They should be easy to scan for appropriate and actionable information.
In this blog(Notification Card Design), there are four notifications on the webpage which were arranged one by one. By hovering over the card, it shows the file manager icon and the trash icon on the top right of the card. When you click on the file manager, the card will display in green color and move to the right of the webpage, to get stored in the file. Whereas, when you click on the trash icon the card will display in red color move towards the left of the webpage, and gets removed.
The source code of this Notification Card Design is given below, if you want the source code of this program, you can copy it. You can use this Notification Card Design on your project.
Notification Card Design [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: black;
}
.wrapper {
width: 480px;
margin: 50px auto;
}
.notifications__item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 105px;
margin-bottom: 20px;
padding: 0 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: all .3s ease-in;
cursor: pointer;
}
.notifications__item__avatar {
width: 75px;
height: 75px;
overflow: hidden;
margin-right: 20px;
border-radius: 50%;
}
.notifications__item__avatar img {
width: 100%;
height: 100%;
}
.notifications__item__content { width: calc( 100% - 105px ); }
.notifications__item__title,
.notifications__item__message { display: block; }
.notifications__item__title {
letter-spacing: 2px;
font-family: 'atvice', sans-serif;
font-size: 17px;
}
.notifications__item__message {
font-family: Roboto, sans-serif;
font-size: 14px;
color: #929292;
}
.notifications__item__option {
width: 20px;
height: 20px;
margin: 8px 0;
border-radius: 50%;
color: white;
opacity: 0;
font-size: 10px;
text-align: center;
line-height: 20px;
cursor: pointer;
transition: all .2s;
}
.notifications__item__option.archive { background-color: #3dc98c; }
.notifications__item__option.delete { background-color: #c93d4d; }
/*
* Animation part
*/
.notifications__item:hover {
background-color: #f7f7f7;
transform: scale( 0.95 );
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.notifications__item:hover .notifications__item__option { opacity: 1; }
.notifications__item.archive .notifications__item__title,
.notifications__item.delete .notifications__item__title {
color: white;
}
.notifications__item.archive .notifications__item__message,
.notifications__item.delete .notifications__item__message {
color: #f3f3f3;
}
.notifications__item.archive {
background-color: #3dc98c;
animation: archiveAnimation 1.5s cubic-bezier(0, 0, 0, 1.12) forwards;
animation-delay: .6s;
}
.notifications__item.delete {
background-color: #c93d4d;
animation: deleteAnimation 1.5s cubic-bezier(0, 0, 0, 1.12) forwards;
animation-delay: .6s;
}
@keyframes archiveAnimation{
to {
transform: translateX( 100px );
opacity: 0;
}
}
@keyframes deleteAnimation{
to {
transform: translateX( -100px );
opacity: 0;
}
}
.credit a {
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
(function(){
/*
* Get all the buttons actions
*/
let optionBtns = document.querySelectorAll( '.js-option' );
for(var i = 0; i < optionBtns.length; i++ ) {
/*
* When click to a button
*/
optionBtns[i].addEventListener( 'click', function ( e ){
var notificationCard = this.parentNode.parentNode;
var clickBtn = this;
/*
* Execute the delete or Archive animation
*/
requestAnimationFrame( function(){
archiveOrDelete( clickBtn, notificationCard );
/*
* Add transition
* That smoothly remove the blank space
* Leaves by the deleted notification card
*/
window.setTimeout( function( ){
requestAnimationFrame( function() {
notificationCard.style.transition = 'all .4s ease';
notificationCard.style.height = 0;
notificationCard.style.margin = 0;
notificationCard.style.padding = 0;
});
/*
* Delete definitely the animation card
*/
window.setTimeout( function( ){
notificationCard.parentNode.removeChild( notificationCard );
}, 1500 );
}, 1500 );
});
})
}
/*
* Function that adds
* delete or archive class
* To a notification card
*/
var archiveOrDelete = function( clickBtn, notificationCard ){
if( clickBtn.classList.contains( 'archive' ) ){
notificationCard.classList.add( 'archive' );
} else if( clickBtn.classList.contains( 'delete' ) ){
notificationCard.classList.add( 'delete' );
}
}
})()
Thank you for reading our blog. If you face any problem creating this Notification Card Design using HTML, CSS & JavaScript, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team