Let’s create Clean Toast Notifications using CSS. This project is perfect for enhancing user experience on websites or web applications.
We’ll keep it simple and stylish, using CSS to design clean and visually appealing toast notifications that pop up on the screen. No need for complicated setups – just pure CSS magic!
Let’s dive into crafting these Clean Toast Notifications. Whether you’re a beginner or an experienced developer, this project offers a great opportunity to improve your CSS skills and make your web projects more user-friendly. Let’s get started and make notifications that users will love!
HTML :
This HTML code sets up a simple webpage to display toast notifications. It includes checkboxes to toggle the visibility of different types of notifications (help, success, warning, error). Each notification type is contained within a `div` with the class `toast-item`, and inside each `div` is a specific toast with a label for closing it. Additionally, there is a row of toast icons at the bottom for toggling the visibility of each notification type.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title> Clean Toast Notifications - CSS</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <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> <!-- partial --> </body> </html>
CSS :
This code is for creating a styled toast notification system using CSS. It defines various custom properties for background colors, transitions, and animation delays. The layout is set up with flexbox, and toast items are animated to slide in and out. Each toast type (help, success, warning, error) has its own styling defined, including background color and icon. Lastly, it uses checkbox inputs to trigger the display of toast items based on their type.
@import url('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;
}
@property --bg-help {
syntax: '<percentage>';
inherits: false;
initial-value: -10%;
}
@property --bg-success {
syntax: '<percentage>';
inherits: false;
initial-value: 145%;
}
@property --bg-warning {
syntax: '<percentage>';
inherits: false;
initial-value: -55%;
}
@property --bg-error {
syntax: '<percentage>';
inherits: false;
initial-value: 112%;
}
@property --bsc {
syntax: '<color>';
inherits: false;
initial-value: red;
}
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-gradient(circle at 100% 80%, #b3cdd1, #a7b5c9);
font-family: "Varela Round", sans-serif;
}
.toast-panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: var(--tr);
position: absolute;
padding: 0 1rem;
height: 100%;
}
.toast-item {
/*overflow: hidden;*/
max-height: 25rem;
transition: var(--tr);
position: relative;
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: #fff;
color: #f5f5f5;
padding: 1rem 2rem 1rem 3rem;
text-align: center;
border-radius: 1rem;
position: relative;
font-weight: 300;
margin: 1rem 0;
text-align: left;
max-width: 16rem;
transition: var(--tr);
opacity: 1;
border: 0.15rem solid #fff2;
box-shadow: 0 0 1.5rem 0 #1a1f4360;
}
.toast:before {
content: "";
position: absolute;
width: 0.5rem;
height: calc(100% - 1.5rem);
top: 0.75rem;
left: 0.5rem;
z-index: 0;
border-radius: 1rem;
background: var(--clr);
}
.toast h3 {
font-size: 1.2rem;
margin: 0;
line-height: 1.35rem;
font-weight: 600;
position: relative;
color: var(--clr);
}
.toast p {
position: relative;
font-size: 0.95rem;
z-index: 1;
margin: 0.25rem 0 0;
color: #595959;
line-height: 1.3rem;
}
.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: rotate(-45deg);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #595959;
text-indent: 1px;
}
.close:hover:after {
background: var(--clr);
color: #fff;
}
.toast-item.success {
animation-delay: 2s;
}
.toast-item.warning {
animation-delay: 1s;
}
.toast-item.error {
animation-delay: 0s;
}
.toast.help {
--bg: var(--ch1);
--clr: var(--ch2);
--brd: var(--ch3);
}
.icon-help:after {
content: "?";
}
.toast.success {
--bg: var(--cs1);
--clr: var(--cs2);
--brd: var(--cs3);
}
.icon-success:after {
content: "L";
font-size: 1.5rem;
font-weight: bold;
padding-bottom: 0.35rem;
transform: rotateY(180deg) rotate(-38deg);
text-indent: 0.1rem;
}
.toast.warning {
--bg: var(--cw1);
--clr: var(--cw2);
--brd: var(--cw3);
}
.icon-warning:after {
content: "!";
font-weight: bold;
}
.toast.error {
--bg: var(--ce1);
--clr: var(--ce2);
--brd: var(--ce3);
}
.icon-error:after {
content: "+";
font-size: 2.85rem;
line-height: 1.2rem;
transform: rotate(45deg);
}
.toast a {
color: var(--clr);
}
.toast a:hover {
color: var(--bg);
}
/*** ICONS ***/
.toast-icons {
background: #fff;
padding: 1rem 1rem 1.25rem 1rem;
display: flex;
justify-content: space-around;
border-radius: 1rem;
gap: 1.5rem;
width: 100%;
box-sizing: border-box;
margin-top: 1rem;
margin-bottom: 1rem;
position: relative;
border: 0.15rem solid #fff1;
box-shadow: 0 0 1.5rem 0 #1a1f4340;
}
.toast-icons:before {
position: absolute;
width: calc(100% + 0.3rem);
height: calc(100% + 0.25rem);
--bg-help: 45%;
--bg-success: 45%;
--bg-warning: 45%;
--bg-error: 45%;
--bsc: #fff0;
background:
radial-gradient(circle at 14% var(--bg-help), var(--ch1), #fff0 1.5rem), radial-gradient(circle at 38% var(--bg-success), var(--cs1), #fff0 1.5rem), radial-gradient(circle at 62% var(--bg-warning), var(--cw1), #fff0 1.5rem), radial-gradient(circle at 86% var(--bg-error), var(--ce1), #fff0 1.5rem);
content: "";
bottom: -0.15rem;
border-radius: 1rem;
z-index: 0;
transition: --bg-help 0.5s ease 0s, --bg-success 0.5s ease 0s, --bg-warning 0.5s ease 0s, --bg-error 0.5s ease 0s, --bsc 0.5s ease 0s;
box-shadow: 0 0 1.5rem 0 #1a1f4320;
}
.toast-icons:has(label[for=t-help]:hover):before {
--bg-help: 53%;
--bsc: var(--ch2);
}
.toast-icons:has(label[for=t-success]:hover):before {
--bg-success: 53%;
--bsc: var(--cs2);
}
.toast-icons:has(label[for=t-warning]:hover):before {
--bg-warning: 53%;
--bsc: var(--cw2);
}
.toast-icons:has(label[for=t-error]:hover):before {
--bg-error: 53%;
--bsc: var(--ce2);
}
.toast-icon {
width: 3.5rem;
height: 3.5rem;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
position: relative;
background: radial-gradient(circle at 50% 50%, var(--clr) 1.25rem, var(--brd) calc(1.25rem + 1px) 100%);
}
.toast-icon:after {
font-size: 1.75rem;
}
.icon-success:after {
font-size: 1.5rem;
padding-bottom: 0.25rem;
}
.icon-error:after {
font-size: 2.85rem;
line-height: 2rem;
font-weight: 500;
padding-top: 0.25rem;
max-height: 2rem;
}
.icon-help,
.toast-item.help {
--clr: #0070e0;
--brd: #0070e040;
}
.icon-success,
.toast-item.success {
--clr: #03a65a;
--brd: #03a65a40;
}
.icon-warning,
.toast-item.warning {
--clr: #fc8621;
--brd: #fc862140;
}
.icon-error,
.toast-item.error {
--clr: #db3056;
--brd: #db305640;
}
#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;
}
In conclusion, we’ve successfully crafted Clean Toast Notifications using CSS. This straightforward project enhances user experience with visually appealing notifications that pop up seamlessly on the screen. Whether you’re a beginner or seasoned developer, this exercise offers valuable practice in CSS styling for improving web interfaces.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
