Toast Notifications Using HTML And CSS

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

📙Table Of Content

Project Folder Structure of Toast Notifications Using HTML And CSS
Toast Notifications HTML CODE
Toast Notifications CSS CODE
Live Preview of Toast Notifications

Project Folder Structure:

Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.

HTML CODE

  
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast Notifications - CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <input type="checkbox" name="t-help" id="t-help" checked>
<input type="checkbox" name="t-success" id="t-success" checked>
<input type="checkbox" name="t-warning" id="t-warning" checked>
<input type="checkbox" name="t-error" id="t-error" checked>
<div class="toast-panel">
	<div class="toast-item help">
		<div class="toast help">
			<label for="t-help" class="close"></label> 
			<h3>Help!</h3>
			<p>Do you have a problem? Just use this <a href="#">contact form</a>.</p>
		</div>
	</div>
	<div class="toast-item success">
		<div class="toast success">
			<label for="t-success" class="close"></label>
			<h3>Success!</h3>
			<p>Your message has been sent successfully.</p>
		</div>
	</div>
	<div class="toast-item warning">
		<div class="toast warning">
			<label for="t-warning" class="close"></label>
			<h3>Warning!</h3>
			<p>Sorry, there was a problem with your request.</p>
		</div>
	</div>
	<div class="toast-item error">
		<div class="toast error">
			<label for="t-error" class="close"></label>
			<h3>Error!</h3>
			<p>Change a few thing up and try submitting again.</p>
		</div>
	</div>
	<div class="toast-icons">
		<label for="t-help" class="toast-icon icon-help"></label>
		<label for="t-success"  class="toast-icon icon-success"></label>
		<label for="t-warning"  class="toast-icon icon-warning"></label>
		<label for="t-error" class="toast-icon icon-error"></label>
	</div>
</div>
</body>
</html>

CSS CODE


@import urlundefined'https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
	--tr: all 0.5s ease 0s;
	--ch1: #05478a;
	--ch2: #0070e0;
	--cs1: #005e38;
	--cs2: #03a65a;
	--cw1: #c24914;
	--cw2: #fc8621;
	--ce1: #851d41;
	--ce2: #db3056;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	background: radial-gradientundefinedcircle at 50% 100%, #1d2232, #262434);
	font-family: "Varela Round", sans-serif;
}

.toast-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: varundefined--tr);
	position: absolute;
	padding: 0 1rem;
	height: 100%;
	min-height: 20rem;
	min-width: 375px;
}

.toast-item {
	overflow: hidden;
	max-height: 25rem;
	transition: varundefined--tr);
	animation: show-toast 4s ease 3s 1;
}

@keyframes show-toast { 
	0%, 50%, 100% { max-height: 0; opacity: 0; }
	10%, 25% { max-height: 15rem; opacity: 1; }
}

.toast {
	background-color: #232b2b;
	background: varundefined--bg);
	color: #f5f5f5;
	padding: 1rem 2rem 1rem 6rem;
	text-align: center;
	border-radius: 2rem;
	position: relative;
	font-weight: 300;
	margin: 1.75rem 0 1rem;
	text-align: left;
	max-width: 15rem;
	transition: varundefined--tr);
	opacity: 1;
}

.toast:before {
	content: "";
	position: absolute;
	width: 5.5rem;
	height: 6rem;
	--drop: 
		radial-gradientundefinedcircle at 64% 51%, varundefined--clr) 0.45rem, #fff0 calcundefined0.45rem + 1px)), /*ball 1*/
		radial-gradientundefinedcircle at 100% 100%, #fff0 0.9rem, varundefined--clr) calcundefined0.9rem + 1px) 1.25rem, #fff0 calcundefined1.25rem + 1px) 100%), /*neck 2*/ 
		radial-gradientundefinedcircle at 0% 0%, #fff0 0.9rem, varundefined--clr) calcundefined0.9rem + 1px) 1.25rem, #fff0 calcundefined1.25rem + 1px) 100%), /*neck 1*/
		radial-gradientundefinedcircle at 0% 120%, varundefined--clr) 4rem, #fff0 calcundefined4rem + 1px)) /*big 1*/;
	background: 
		radial-gradientundefinedcircle at 22% 3.8rem, varundefined--clr) 0.75rem, #fff0 calcundefined0.75rem + 1px)), /*ball 8*/ 
		radial-gradientundefinedcircle at 95% 1.9rem, varundefined--clr) 0.07rem, #fff0 calcundefined0.07rem + 1px)), /*ball 7*/ 
		radial-gradientundefinedcircle at 80% 2.25rem, varundefined--clr) 0.18rem, #fff0 calcundefined0.18rem + 1px)), /*ball 6*/
		radial-gradientundefinedcircle at 80% 75%, varundefined--clr) 0.35rem, #fff0 calcundefined0.35rem + 1px)), /*ball 5*/
		radial-gradientundefinedcircle at 43% 2.3rem, varundefined--clr) 0.07rem, #fff0 calcundefined0.07rem + 1px)), /*ball 4*/ 
		radial-gradientundefinedcircle at 40% 1rem, varundefined--clr) 0.12rem, #fff0 calcundefined0.12rem + 1px)), /*ball 3*/ 
		radial-gradientundefinedcircle at 20% 1.5rem, varundefined--clr) 0.25rem, #fff0 calcundefined0.25rem + 1px)), /*ball 2*/
		varundefined--drop),
		#f000;
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 1.625rem 1.625rem, 1.625rem 1.625rem, 100% 100%, 100% 100%;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, calcundefined100% - 1.75rem) 2.85rem, calcundefined100% - 1.75rem) 2.95rem, 0 0, 0 0;
	bottom: 0rem;
	left: 0rem;
	z-index: 0;
	border-radius: 0 0 0 2rem;
}

.toast:after {
	content: "";
	position: absolute;
	width: 3.5rem;
	height: 3.5rem;
	background: varundefined--clr);
	top: -1.75rem;
	left: 2rem;
	border-radius: 3rem;
	padding-top: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.25rem;
	box-sizing: border-box;
}

.toast h3 {
	font-size: 1.35rem;
	margin: 0;
	line-height: 1.35rem;
	font-weight: 300;
	position: relative;
}

.toast h3:before,
.toast-icon:before {
	border: 0.5rem solid #fff0;
	width: 0;
	height: 0;
	position: absolute;
	content: "";
	left: -3.45rem;
	border-top: 1rem solid varundefined--clr);
	border-left: 1rem solid varundefined--clr);
	top: -0.4em;
	transform: rotateundefined-96deg) skewXundefined30deg);
	border-radius: 0.5rem;
}

.toast p {
	position: relative;
	font-size: 0.95rem;
	z-index: 1;
	margin: 0.25rem 0 0;
}

.close {
	position: absolute;
	width: 1.35rem;
	height: 1.35rem;
	text-align: center;
	right: 1rem;
	cursor: pointer;
	border-radius: 100%;
}

.close:after {
	position: absolute;
	font-family: 'Varela Round', san-serif;
	width: 100%;
	height: 100%;
	left: 0;
	font-size: 1.8rem;
	content: "+";
	transform: rotateundefined45deg);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close:hover {
	background: #f5f5f5;
	color: varundefined--clr);
}




.toast-item.success {
	animation-delay: 2s;
}

.toast-item.warning {
	animation-delay: 1s;
}

.toast-item.error {
	animation-delay: 0s;
}



.toast.help {
	--clr: varundefined--ch1);
	--bg: varundefined--ch2);
}
.toast.help:after,
.icon-help:after {
	content: "?";
}

.toast.success {
	--clr: varundefined--cs1);
	--bg: varundefined--cs2);
}

.toast.success:after,
.icon-success:after {
	content: "L";
	font-size: 1.7rem;
	font-weight: bold;
	padding-bottom: 0.5rem;
	transform: rotateYundefined180deg) rotateundefined-38deg);
	text-indent: 0.15rem;
}

.toast.warning {
	--clr: varundefined--cw1);
	--bg: varundefined--cw2);
}

.toast.warning:after,
.icon-warning:after {
	content: "!";
	font-weight: bold;
}

.toast.error {
	--clr: varundefined--ce1);
	--bg: varundefined--ce2);
}

.toast.error:after,
.icon-error:after {
	content: "+";
	font-size: 3rem;
	line-height: 1.2rem;
	transform: rotateundefined45deg);
}


.toast.success:before {
	--drop: radial-gradientundefinedcircle at 65% 63%, varundefined--clr) 0.425rem, #fff0 calcundefined0.425rem + 1px)), /*ball 1*/ radial-gradientundefinedcircle at 70% 125%, #fff0 1rem, varundefined--clr) calcundefined1rem + 1px) 1.25rem, #fff0 calcundefined1.25rem + 1px) 100%), /*neck 2*/ radial-gradientundefinedcircle at 30% -25%, #fff0 1rem, varundefined--clr) calcundefined1rem + 1px) 1.25rem, #fff0 calcundefined1.25rem + 1px) 100%), /*neck 1*/ radial-gradientundefinedcircle at 20% 120%, varundefined--clr) 3.5rem, #fff0 calcundefined3.5rem + 1px)) /*big 1*/;
	background-position: 0 0.4rem, -0.2rem 3.3rem, 0 0.4rem, -2rem -1.5rem, -0.8rem 0rem, -1rem 0.4rem, 0rem 1.5rem, 1.2rem 0.4rem, calcundefined100% - 0.75rem) 3.5rem, calcundefined100% - 0.75rem) 3.75rem, 0 0rem, 0 0rem;
}

.toast.warning:before {
	--drop: radial-gradientundefinedcircle at 65% 63%, varundefined--clr) 0.425rem, #fff0 calcundefined0.425rem + 1px)), /*ball 1*/ radial-gradientundefinedcircle at 129% 36%, #fff0 1rem, varundefined--clr) calcundefined1rem + 1px) 1.25rem, #fff0 calcundefined1.25rem + 1px) 100%), /*neck 2*/ radial-gradientundefinedcircle at -27% 25%, #fff0 1rem, varundefined--clr) calcundefined1rem + 1px) 1.25rem, #fff0 calcundefined1.25rem + 1px) 100%), /*neck 1*/ radial-gradientundefinedcircle at 20% 120%, varundefined--clr) 3.5rem, #fff0 calcundefined3.5rem + 1px)) /*big 1*/;
	background-position: 1.82rem 0.65rem, -1.2rem 1.2rem, -2rem 0.75rem, -3.5rem -1.95rem, -0.5rem -0.55rem, 3rem 4.25rem, 0rem -0.5rem, 1.2rem 0.4rem, calcundefined100% - 3.9rem) 2.75rem, calcundefined100% - 3.75rem) 2.75rem, 0 0rem, 0 0rem;
}

.toast.error:before {
	--drop: radial-gradientundefinedcircle at 65% 63%, varundefined--clr) 0.425rem, #fff0 calcundefined0.425rem + 1px)), /*ball 1*/ radial-gradientundefinedcircle at 129% 36%, #fff0 1rem, varundefined--clr) calcundefined1rem + 1px) 1.25rem, #fff0 calcundefined1.25rem + 1px) 100%), /*neck 2*/ radial-gradientundefinedcircle at -27% 25%, #fff0 1rem, varundefined--clr) calcundefined1rem + 1px) 1.25rem, #fff0 calcundefined1.25rem + 1px) 100%), /*neck 1*/ radial-gradientundefinedcircle at 20% 120%, varundefined--clr) 3.5rem, #fff0 calcundefined3.5rem + 1px)) /*big 1*/;
	background-position: 1.75rem 0.75rem, -0.75rem 1.2rem, -1.3rem 0.5rem, -3.5rem -2.5rem, -0.4rem 0rem, 2rem 1.25rem, 0.82rem 1.6rem, 0.5rem 1.65rem, calcundefined100% - 2.99rem) 3.25rem, calcundefined100% - 2.75rem) 3rem, 0 0rem, 0 0rem;
}


.toast a {
	color: #fff;
}

.toast-item.closed {
	max-height: 0;
}




/*** ICONS ***/

.toast-icons {
	background: #fff1;
	padding: 1rem 1rem 1.25rem 1rem;
	display: flex;
	justify-content: space-around;
	border-radius: 2rem;
	gap: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.toast-icon {
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	position: relative;
}

.toast-icon:before {
	left: 0.7rem;
	top: 2.4em;
	transform: rotateundefined-96deg) skewXundefined30deg);
}

.toast-icon:after {
	font-size: 2rem;
	font-weight: bold;
}

.icon-error:after {
	font-size: 3.6rem;
	line-height: 2rem;
	font-weight: 500;
	padding-top: 0.25rem;
	max-height: 2rem;
}


.icon-help {
	background: #0070e0;
	--clr: #0070e0;
}

.icon-success {
	background: #03a65a;
	--clr: #03a65a;
}

.icon-warning {
	background: #fc8621;
	--clr: #fc8621;
}

.icon-error {
	background: #db3056;
	--clr: #db3056;
}


#t-help:checked ~ .toast-panel .toast-item.help,
#t-success:checked ~ .toast-panel .toast-item.success,
#t-warning:checked ~ .toast-panel .toast-item.warning,
#t-error:checked ~ .toast-panel .toast-item.error {
	max-height: 0;
	opacity: 0;
}

input[type=checkbox] {
	display: none;
}

Live Preview of Toast Notifications

See the Pen Toast Notifications - CSS by Codewithshobhit (@Codewithshobhit) on CodePen.

How to run this Html Css and Js Project in Our Browser?

first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.

Which Code Editor do you use to create those projects?

I am using VS Code Studio.

is this project responsive or not?

Yes! this project is a responsive project.

If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram

if you have any confusion Comment below. I can help!

Codewithshobhit

Codewithshobhit

Toast Notifications Using HTML And CSS

Toast Notifications Using HTML And CSS

📙Table Of Content

Project Folder Structure:

HTML CODE

CSS CODE

Live Preview of Toast Notifications

How to run this Html Css and Js Project in Our Browser?

Which Code Editor do you use to create those projects?

is this project responsive or not?

No comments:

Post a Comment