Smooth Notifications

xanaxEnjoyer · 12 Ağu 2024

vid :

index.html

HTML:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Notifications </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>

styles.css

CSS:

@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;
}

alperenxrq · 12 Ağu 2024

kaydettim güzel paylaşım

aomine · 12 Ağu 2024

işime yarıyabilir sagol

Smooth Notifications

xanaxEnjoyer

alperenxrq

Kara Gül · Konum Republic Of Turkey

aomine

Şuanda konuyu görüntüleyen kullanıcılar