DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Gate-Seite: echtes Van's-Logo als riesiges Wasserzeichen im Hintergrund

Browse Source 
Das Rund-Logo (schwarze Linien auf weißem Grund) wird per invert()+
mix-blend-mode:screen so eingefärbt, dass der weiße Kreis komplett
verschwindet und nur die Linienzeichnung als dezentes, leicht leuchtendes
Wasserzeichen übrig bleibt — kein Bildbearbeitungsprogramm nötig, rein CSS.
Riesig, zentriert, sehr langsam rotierend für einen dezenten Lebendig-Effekt.
Dazu ein wanderndes Glanzlicht auf der Zugangscode-Karte selbst, passend zum
Rest der Seite.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 19:10:35 +02:00
co-authored by Claude Sonnet 5
parent 8bb1bb8949
commit 533724654a
1 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/gate.html
+49 -2
View File
@@ -21,6 +21,7 @@
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
min-height: 100vh;
@@ -28,13 +29,39 @@
align-items: center;
justify-content: center;
padding: 1.5rem;
position: relative;
overflow: hidden;
background: var(--c-black);
background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 20%, transparent), transparent 70%),
radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 70%);
background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 22%, transparent), transparent 70%),
radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%);
color: var(--c-text);
font-family: "Inter", "Manrope", system-ui, sans-serif;
line-height: 1.6;
}
/* Das echte Van's-Logo als riesiges, sehr dezentes Wasserzeichen im Hintergrund — invert()
dreht das schwarze Logo auf weißem Grund um (weiß -> schwarz, schwarz -> weiß), danach macht
mix-blend-mode:screen den (jetzt schwarzen) ehemals-weißen Kreis komplett unsichtbar und
lässt nur die (jetzt weißen) Linien leicht aufleuchten — kein Bildbearbeitungsprogramm nötig,
rein CSS. Langsame Drehung sorgt für einen dezenten "lebendigen" Glanz-Effekt. */
.gate-logo-bg {
position: absolute;
top: 50%;
left: 50%;
width: min(1400px, 200vw);
height: min(1400px, 200vw);
transform: translate(-50%, -50%);
background: url("/logo.png") center / contain no-repeat;
filter: invert(1);
mix-blend-mode: screen;
opacity: 0.09;
animation: gate-logo-spin 120s linear infinite;
pointer-events: none;
}
@keyframes gate-logo-spin {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .gate-logo-bg { animation: none; } }
.gate-box {
position: relative;
max-width: 430px;
@@ -54,6 +81,25 @@
0%, 100% { background-position: 0 0, 0% 50%; }
50% { background-position: 0 0, 100% 50%; }
}
.gate-box::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 35%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: skewX(-18deg);
animation: gate-shine 6s ease-in-out infinite;
pointer-events: none;
border-radius: inherit;
}
@keyframes gate-shine {
0% { left: -60%; }
35%, 100% { left: 130%; }
}
.gate-box > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .gate-box, .gate-box::after { animation: none; } }
.gate-eyebrow {
display: inline-block;
font-size: 0.78rem;
@@ -127,6 +173,7 @@
</style>
</head>
<body>
<div class="gate-logo-bg" aria-hidden="true"></div>
<div class="gate-box">
<span class="gate-eyebrow">🔒 Noch nicht öffentlich</span>
<h1>Van's DIY &amp; Bastelbedarf</h1>