Neon notification card
Html
<div class="noti">
<div class="notiglow"></div>
<div class="notiborderglow"></div>
<div class="notititle">Restart Completed</div>
<div class="notibody">Server restarted successfully in 58 seconds and is back online</div>
</div>
Css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
font-family: "Inter";
font-size: 16px;
--gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);
--color: #32a6ff
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
width: 100%;
background: #0c0c0b;
overflow: hidden;
display: grid;
place-content: center;
}
.noti {
display: flex;
flex-direction: column;
isolation: isolate;
position: relative;
width: 18rem;
height: 8rem;
background: #29292c;
border-radius: 1rem;
overflow: hidden;
}
.noti:before {
position: absolute;
content: "";
inset: 0.0625rem;
border-radius: 0.9375rem;
background: #18181b;
z-index: 2
}
.noti:after {
position: absolute;
content: "";
width: 0.25rem;
inset: 0.65rem auto 0.65rem 0.5rem;
border-radius: 0.125rem;
background: var(--gradient);
transition: transform 300ms ease;
z-index: 4;
}
.noti:hover:after {
transform: translateX(0.15rem)
}
.notititle {
color: var(--color);
padding: 0.65rem 0.25rem 0.4rem 1.25rem;
font-weight: 500;
font-size: 1.1rem;
transition: transform 300ms ease;
z-index: 5;
}
.noti:hover .notititle {
transform: translateX(0.15rem)
}
.notibody {
color: #99999d;
padding: 0 1.25rem;
transition: transform 300ms ease;
z-index: 5;
}
.noti:hover .notibody {
transform: translateX(0.25rem)
}
.notiglow, .notiborderglow {
position: absolute;
width: 20rem;
height: 20rem;
transform: translate(-50%, -50%);
background: radial-gradient(circle closest-side at center, white, transparent);
opacity: 0;
transition: opacity 300ms ease;
}
.notiglow { z-index: 3; }
.notiborderglow { z-index: 1; }
.noti:hover .notiglow {opacity: 0.1}
.noti:hover .notiborderglow {opacity: 0.1}
.note {
color: var(--color);
position: fixed;
top: 80%;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 0.9rem;
width: 75%;
}
Js
const el = document.querySelector(".noti")
const glowEl = document.querySelector(".notiglow")
const borderEl = document.querySelector(".notiborderglow")
// if the pen is in thumbnail view, scale it up
if (location.pathname.match(/fullcpgrid/i) ? true : false) {
document.documentElement.style.fontSize = "48px"
document.querySelector(".note").style.display = "none"
}
let isHovering = false
el.addEventListener("mousemove", (event) => {
const rect = el.getBoundingClientRect()
const localX = (event.clientX - rect.left) / rect.width
const localY = (event.clientY - rect.top) / rect.height
console.log(localX, localY)
glowEl.style.left = localX * 100 + "%"
glowEl.style.top = localY * 100 + "%"
borderEl.style.left = localX * 100 + "%"
borderEl.style.top = localY * 100 + "%"
if (isHovering) {
glowEl.style.transition = "inset 50ms linear, opacity 300ms ease";
borderEl.style.transition = "inset 50ms linear, opacity 300ms ease"
} else {
glowEl.style.transition = "opacity 300ms ease"
borderEl.style.transition = "opacity 300ms ease"
}
isHovering = false
});
el.addEventListener("mouseout", (event) => {
isHovering = true;
})
ثبت نظر خود
برای ثبت نظر باید ابتدا وارد حساب کاربری خود شوید.
ورود یا ثبت نامنظری ثبت نشده است