Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adventskalender/2025/css/main.css aktualisiert

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-04 11:56:16 +00:00
parent 51f445cb93
commit acff3acd8e
1 changed files with 35 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
adventskalender/2025/css/main.css
View File

@@ -6,7 +6,7 @@
font-display: swap; font-display: swap;
} }
/* === Türchen-Stil === */ /* === Adventskalender Türchen (finale Version mit Glitzern) === */
.door { .door {
position: absolute; position: absolute;
display: flex; display: flex;
@@ -14,7 +14,7 @@
justify-content: center; justify-content: center;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
/* Verlauf auf Basis der CI-Farben */ /* Basis-Verlauf – CI-Farben mit Transparenz */
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
color-mix(in srgb, var(--ci-darkgreen) 35%, transparent), color-mix(in srgb, var(--ci-darkgreen) 35%, transparent),
@@ -29,7 +29,6 @@
0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent), 0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent),
inset 0 0 6px rgba(255,255,255,0.18); inset 0 0 6px rgba(255,255,255,0.18);
/* Schrift */
font-family: "Bratonien2025", cursive; font-family: "Bratonien2025", cursive;
font-size: 2.3vw; font-size: 2.3vw;
font-weight: 400; font-weight: 400;
@@ -45,23 +44,34 @@
background 0.2s ease; background 0.2s ease;
} }
/* Glitzer-Animation */ /* === Keyframes === */
@keyframes glitter { @keyframes glitter-sheen {
0% { background-position: -200% 0; opacity: 0.0; } 0% { background-position: -200% 0; opacity: 0.0; }
30% { opacity: 1; } 30% { opacity: 1; }
70% { opacity: 1; } 70% { opacity: 1; }
100% { background-position: 200% 0; opacity: 0.0; } 100% { background-position: 200% 0; opacity: 0.0; }
} }
/* Hover-Effekt mit goldenem Glitzern */ @keyframes sparkle {
0%,100% { opacity: 0; }
40%,60% { opacity: 1; }
}
/* === Hover Effekte === */
.door:hover {
transform: scale(1.05);
box-shadow:
0 0 16px color-mix(in srgb, var(--ci-gold) 60%, transparent),
inset 0 0 10px rgba(255,255,255,0.35);
}
/* Goldener Schimmer über dem Türchen */
.door:hover::after { .door:hover::after {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
pointer-events: none; pointer-events: none;
/* goldener Lichtschimmer */
background: linear-gradient( background: linear-gradient(
120deg, 120deg,
transparent 0%, transparent 0%,
@@ -69,4 +79,20 @@
transparent 90% transparent 90%
); );
background-size: 200% 100%; background-size: 200% 100%;
animation: glitter 1.8s ease-in-out 1; animation: glitter-sheen 1.8s ease-in-out 1;
}
/* Kleine Glitzerpunkte */
.door:hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background-image:
radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%),
radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
background-size: 10% 10%, 8% 8%;
background-position: 40% 30%, 70% 65%;
animation: sparkle 1.8s ease-in-out 1;
}