ivanch/ivanch.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add animation for box-shadow

Browse Source
This commit is contained in:
José Henrique
2025-08-20 20:47:13 -03:00
parent 28aa696c38
commit 1ad41c7ca9
2 changed files with 49 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
css/main.css
View File

@@ -15,7 +15,12 @@ body {
position: relative; position: relative;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600; font-weight: 600;
color: var(--text-color); color: var(--text-color);
} }
@@ -46,7 +51,11 @@ img {
border-radius: var(--border-radius); border-radius: var(--border-radius);
border-top: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
box-shadow: var(--box-shadow), var(--inset-shadow); /* base shadows: outer shadow from variables + subtle inset
an extra animated outer shadow is layered to give a natural "alive" feel */
box-shadow: 0 8px 36px 0 var(--glass-shadow), var(--inset-shadow);
will-change: box-shadow;
animation: glass-shadow 8s ease-in-out infinite !important;
} }
.main-container { .main-container {
@@ -67,19 +76,43 @@ img {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
/* subtle, natural moving/pulsing shadow for .glass */
@keyframes glass-shadow {
0% {
box-shadow: 0 6px 24px -2px var(--glass-shadow), 0 18px 48px -12px var(--dark-shadow-15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
25% {
box-shadow: 6px 10px 38px -6px var(--tertiary-color-20), 0 22px 60px -18px var(--dark-shadow-18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
50% {
box-shadow: 0 8px 36px 0 var(--glass-shadow), 0 28px 72px -24px var(--dark-shadow-20), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
75% {
box-shadow: -6px 10px 38px -6px var(--primary-color-16), 0 22px 60px -18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 6px 24px -2px var(--glass-shadow), 0 18px 48px -12px var(--dark-shadow-15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
.content { .content {
color: var(--text-color); color: var(--text-color);
background: rgba(0, 0, 0, 0.10); background: rgba(0, 0, 0, 0.10);
backdrop-filter: blur(32px) saturate(180%) brightness(1.1); backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
-webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.1); -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255,255,255,0.15); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
padding: 32px 24px; padding: 32px 24px;
transition: background 0.3s, box-shadow 0.3s; transition: background 0.3s, box-shadow 0.3s;
min-width: 26rem; min-width: 26rem;
@@ -97,3 +130,10 @@ img {
font-size: 14px; font-size: 14px;
} }
} }
/* Accessibility: disable animated shadows for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.glass {
animation: none !important;
}
}

6
css/variables.css
View File

@@ -24,4 +24,10 @@
--box-shadow: 0 8px 36px 0px var(--glass-shadow); --box-shadow: 0 8px 36px 0px var(--glass-shadow);
--inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); --inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* semi-transparent helpers for animated shadows */
--primary-color-16: rgba(55, 187, 248, 0.16);
--tertiary-color-20: rgba(106, 50, 161, 0.2);
--dark-shadow-15: rgba(0,0,0,0.15);
--dark-shadow-18: rgba(0,0,0,0.18);
--dark-shadow-20: rgba(0,0,0,0.20);
} }