Die Uhr nach Filipes Vorbild: LED-Kranz, Anker, rote Anzeige
Filipe hat eine Sci-Fi-Uhr geschickt (1250 px) und gesagt "so wie die".
Unsere ist 164 px gross -- Faktor 7,6. Was uebernehmbar ist, entscheidet
damit nicht der Geschmack, sondern die Groesse:
UEBERNOMMEN der blaue LED-Punktkranz aussen (das auffaelligste
Merkmal des Vorbilds), die vier Anker bei 12/3/6/9,
der rote Grundton der Digitalanzeige.
NICHT MOEGLICH die Minutenzahlen 00/05/…/55 und die Stundenzahlen
1-12. Im Vorbild sind sie rund 30 px hoch; hier waeren
es VIER. Zahlen, die man nicht lesen kann, sind kein
Zifferblatt, sondern Rauschen -- und sie wuerden die
drei Boegen zudecken, die die eigentliche Anzeige sind.
Der Kranz ist ein `repeating-conic-gradient` mit 6-Grad-Takt, aus dem
eine Maske einen schmalen Ring schneidet: 60 Punkte, einer je Sekunde,
in EINER Ebene. Sechzig <span> waeren sechzig Elemente fuer eine Zierde.
Die vier Anker ebenso, mit 90-Grad-Takt.
EINE FALSCHE BEGRUENDUNG, VON DER EIGENEN RECHNUNG WIDERLEGT: Ich hatte
in den Kommentar geschrieben, reines Neonrot wie im Vorbild "reisse den
Kontrast" und liege bei 4,0:1. Nachgerechnet sind es 5,27:1 -- es haelt
die Grenze von 4,5. Die schoenere Begruendung war die falsche.
Die Entscheidung bleibt trotzdem, nur mit dem echten Grund: Diese Uhr
steht DAUERHAFT im Bild einer Seite, an der gearbeitet wird. Reines
gesaettigtes Rot auf Schwarz ermuedet bei stundenlangem
Nebenherschauen, auch wenn es messbar lesbar ist -- genau das meint die
Hausregel "augenschonend", und das deckt keine Kontrastzahl ab. Die
Ziffern sind deshalb ein sehr helles Rotweiss (15,9:1), das seinen
roten Charakter aus dem Schein im Textschatten bekommt. Man liest
"rote Digitalanzeige", ohne stundenlang in eine Leuchtreklame zu sehen.
Aus demselben Grund liegt das Blau der LEDs bei rund 53 % Deckkraft:
Die Anmutung kommt vom Aufbau, nicht von der Grellheit.
pruef-start-ansicht EXIT=0 (140), pruef-css-klassen EXIT=0 (28).
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -1733,3 +1733,85 @@
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.uhr__perle { transition: none; }
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
NACH FILIPES VORBILD: LED-KRANZ, ANKER, ROTE ANZEIGE (08.09.2026)
|
||||
|
||||
Er hat eine Sci-Fi-Uhr geschickt (1250 px) und gesagt: "so wie die".
|
||||
Unsere ist 164 px gross -- Faktor 7,6. Was davon uebernehmbar ist,
|
||||
entscheidet nicht der Geschmack, sondern die Groesse:
|
||||
|
||||
UEBERNOMMEN der blaue LED-Punktkranz aussen (das auffaelligste
|
||||
Merkmal), die vier Anker bei 12/3/6/9, der rote
|
||||
Grundton der Digitalanzeige.
|
||||
NICHT MOEGLICH die Minutenzahlen 00/05/…/55 und die Stundenzahlen
|
||||
1-12. Im Vorbild sind sie rund 30 px hoch; hier
|
||||
waeren es VIER. Zahlen, die man nicht lesen kann,
|
||||
sind kein Zifferblatt, sondern Rauschen -- und sie
|
||||
wuerden die drei Boegen zudecken, die die eigentliche
|
||||
Anzeige sind.
|
||||
|
||||
AUGENSCHONEND BLEIBT PFLICHT, und das Vorbild ist es nicht: Es lebt
|
||||
von reinem Neonrot auf Schwarz. Diese Uhr steht dauerhaft im Bild
|
||||
einer Seite, an der gearbeitet wird. Die Toene sind deshalb
|
||||
gedaempft: das Blau der LEDs bei rund 60 % Deckkraft, das Rot der
|
||||
Ziffern als heller Ton MIT rotem Schein statt als reines Rot. Die
|
||||
Anmutung kommt vom Aufbau, nicht von der Grellheit. */
|
||||
|
||||
/* Der Punktkranz. 60 Punkte -- einer je Sekunde, wie im Vorbild.
|
||||
`repeating-conic-gradient` statt sechzig Elementen: Ein Kegelverlauf
|
||||
mit 6-Grad-Takt zeichnet sie in einer Ebene, und die Maske schneidet
|
||||
daraus einen schmalen Ring. Sechzig <span> waeren sechzig Elemente
|
||||
fuer eine Zierde. */
|
||||
.uhr__leds {
|
||||
position: absolute; inset: -7px; border-radius: 50%;
|
||||
pointer-events: none; z-index: 1;
|
||||
background: repeating-conic-gradient(from -1.5deg,
|
||||
rgba(96, 200, 255, .62) 0deg 3deg, transparent 3deg 6deg);
|
||||
-webkit-mask: radial-gradient(closest-side, transparent 0 93.5%, #000 94% 97.5%, transparent 98%);
|
||||
mask: radial-gradient(closest-side, transparent 0 93.5%, #000 94% 97.5%, transparent 98%);
|
||||
filter: drop-shadow(0 0 2px rgba(80, 190, 255, .5));
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
/* Die vier Anker bei 12, 3, 6 und 9 Uhr. Im Vorbild sitzen dort
|
||||
Fassungen mit einem blauen Licht darin -- sie geben dem Ring Halt
|
||||
und sagen dem Auge, wo oben ist. Ein Kegelverlauf mit 90-Grad-Takt
|
||||
trifft genau diese vier Stellen. */
|
||||
.uhr__anker {
|
||||
position: absolute; inset: -9px; border-radius: 50%;
|
||||
pointer-events: none; z-index: 1;
|
||||
background: repeating-conic-gradient(from -3deg,
|
||||
rgba(150, 225, 255, .95) 0deg 6deg, transparent 6deg 90deg);
|
||||
-webkit-mask: radial-gradient(closest-side, transparent 0 92%, #000 92.5% 99%, transparent 99.5%);
|
||||
mask: radial-gradient(closest-side, transparent 0 92%, #000 92.5% 99%, transparent 99.5%);
|
||||
filter: drop-shadow(0 0 3px rgba(110, 210, 255, .85));
|
||||
}
|
||||
|
||||
/* DIE ANZEIGE BEKOMMT DAS ROT -- aber als Schein, nicht als Farbe.
|
||||
|
||||
Im Vorbild sind die Ziffern reines Neonrot. Ich hatte hier zuerst
|
||||
geschrieben, das reisse den Kontrast -- nachgerechnet stimmt das
|
||||
NICHT: #ff2b2b auf dem fast schwarzen Zifferblatt liegt bei 5,27:1
|
||||
und haelt die Grenze von 4,5. Die schoenere Begruendung war die
|
||||
falsche, also steht hier die echte:
|
||||
|
||||
Diese Uhr steht DAUERHAFT im Bild einer Seite, an der gearbeitet
|
||||
wird. Reines gesaettigtes Rot auf Schwarz ermuedet bei stundenlangem
|
||||
Nebenherschauen, auch wenn es messbar lesbar ist -- das ist der Punkt
|
||||
der Hausregel "augenschonend", und der ist von einer Kontrastzahl
|
||||
nicht abgedeckt. Der Ton hier ist deshalb ein sehr helles Rotweiss
|
||||
(15,9:1), das seinen ROTEN CHARAKTER aus dem Schein im Textschatten
|
||||
bekommt. Man liest "rote Digitalanzeige", ohne stundenlang in eine
|
||||
Leuchtreklame zu sehen. */
|
||||
.uhr__zeit {
|
||||
color: #ffe0df;
|
||||
text-shadow:
|
||||
0 0 6px rgba(255, 90, 86, .75),
|
||||
0 0 16px rgba(255, 60, 56, .45),
|
||||
0 1px 0 rgba(0, 0, 0, .6);
|
||||
}
|
||||
.uhr__sek {
|
||||
color: #ffd2d0;
|
||||
text-shadow: 0 0 7px rgba(255, 80, 76, .6);
|
||||
}
|
||||
|
||||
@@ -338,6 +338,11 @@
|
||||
Fortschrittsbalken. -->
|
||||
<span class="uhr__perle uhr__perle--minute" id="uhr-perle-minute" aria-hidden="true"></span>
|
||||
<span class="uhr__perle uhr__perle--stunde" id="uhr-perle-stunde" aria-hidden="true"></span>
|
||||
<!-- DER LED-KRANZ UND DIE VIER ANKER (08.09.2026).
|
||||
Nach Filipes Vorbild -- was bei 164 px davon traegt,
|
||||
steht in heim.css begruendet. -->
|
||||
<span class="uhr__leds" aria-hidden="true"></span>
|
||||
<span class="uhr__anker" aria-hidden="true"></span>
|
||||
<span class="uhr__glas" aria-hidden="true"></span>
|
||||
<div class="uhr__mitte">
|
||||
<span class="uhr__zeit" id="uhr-zeit">--:--</span>
|
||||
|
||||
Reference in New Issue
Block a user