Beitragskarten reagieren auf Zeiger und Tastatur
Umut: "es gibt keinen Mausover-Effekt, das fehlt". Am Original nachgemessen und uebernommen: die Karte hebt sich um 8px mit weichem Schatten, das Bild zieht auf 1,06 auf, darueber blendet ein Hinweis ein. Die Bewegung steht vollstaendig hinter der Bewegungsschranke - wer weniger Bewegung eingestellt hat, bekommt keine, sieht den Hinweis aber trotzdem. Alles haengt zusaetzlich an :focus-within, damit der Effekt nicht nur Mausbenutzern gehoert. Der Hinweis ist fuer Vorlesesoftware ausgeblendet, weil der Titel darunter zum selben Ziel fuehrt. Ausserdem: der Leuchteffekt trug noch das Gruen der Vorlage statt der Akzentfarbe der Website. Geprueft: 391 Tests unter PHP 8.2 und 8.4, Editortest, Browserpruefung, axe ohne Verstoss. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5f23194760
commit
1b164f4c86
5 files changed
+83
-2
No files matched your search
@@ -24,7 +24,7 @@
|
||||
.fx-hover-sink { transition: transform .2s ease }
|
||||
.fx-hover-sink:hover { transform: translateY(3px) }
|
||||
.fx-hover-glow { transition: box-shadow .2s ease }
|
||||
.fx-hover-glow:hover { box-shadow: 0 0 0 4px #2c6b4f26, 0 10px 30px #1b2a2426 }
|
||||
.fx-hover-glow:hover { box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent), 0 10px 30px color-mix(in srgb,var(--ink) 16%,transparent) }
|
||||
.fx-hover-tilt { transition: transform .2s ease }
|
||||
.fx-hover-tilt:hover { transform: rotate(-1.2deg) scale(1.01) }
|
||||
.fx-hover-grow-border { transition: box-shadow .2s ease }
|
||||
@@ -36,3 +36,25 @@
|
||||
@keyframes kant-zoom { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
|
||||
@keyframes kant-flip { from { opacity: 0; transform: perspective(800px) rotateX(-12deg) } to { opacity: 1; transform: none } }
|
||||
@keyframes kant-unblur { from { opacity: 0; filter: blur(8px) } to { opacity: 1; filter: none } }
|
||||
|
||||
/* Beitragskarten und Knöpfe, ergänzt am 13.09.2026.
|
||||
|
||||
Umut hat gefragt, wo der Zeigereffekt bleibt: eine Karte, die sich beim Zeigen nicht rührt,
|
||||
wirkt tot. Angehoben wird die ganze Karte, das Bild zieht leicht auf, und der Hinweis darüber
|
||||
blendet ein. Alles innerhalb der Bewegungsschranke - wer weniger Bewegung eingestellt hat,
|
||||
bekommt den Hinweis trotzdem, nur ohne Fahrt. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.post-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease }
|
||||
.post-card:hover, .post-card:focus-within {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 18px 50px -16px color-mix(in srgb, var(--ink) 28%, transparent);
|
||||
border-color: transparent;
|
||||
}
|
||||
.post-image img { transition: transform .5s ease }
|
||||
.post-card:hover .post-image img, .post-card:focus-within .post-image img { transform: scale(1.06) }
|
||||
.post-view { transition: opacity .3s ease }
|
||||
|
||||
/* Der Knopf hebt sich beim Zeigen um zwei Pixel - dieselbe Geste wie auf der Karte. */
|
||||
.button { transition: transform .2s ease, background-color .2s ease, border-color .2s ease }
|
||||
.button:hover { transform: translateY(-2px) }
|
||||
}
|
||||
Reference in new issue
Block a user