A presentation at SELFHTML-Treffen Unconference in in 06 Halle (Saale), Germany by Gunnar Bittersmann
WER HAT AN DER UHR GEDREHT?
FOTO: NOOR YOUNIS / UNSPLASH
x y r y φ ψ r x sin φ = y ⁄ r y = r sin φ x = r sin ψ cos φ = x ⁄ r x = r cos φ y = −r cos ψ tan φ = y ⁄ x
Screenshot Codepen: CSS clock
Photo by Black Chitsulo on Unsplash Photo by Jiyeon Park on Unsplash
Screenshot Codepen: CSS clock, Arabis numerals, rotated
Kirche in Glienicke/Nordbahn
Photo by Gunnar Bittersmann
Uhr im Billigladen
Foto: Gunnar Bittersmann
Big Ben
Photo by Stefan K on Unsplash
Rotes Rathaus Berlin
Foto: Fionn Große auf Unsplash
Rotes Rathaus Berlin
Foto: Fionn Große auf Unsplash
Uhr im Kölner Dom
Foto: Thomas Bormans on Unsplash
Photo by Peter Mitchell on Unsplash
größte Kuckucksuhr der Welt in Triberg
Foto: Gunnar Bittersmann
Screenshot Codepen: CSS clock, Roman numerals
Screenshot Codepen: CSS clock im Firefox
Progressive enhancement is an escalator that becomes stairs. escalator that becomes stairs. Graceful graceful degradation is building a lift, then having to add stairs. — Andrew Wight
Fotos: Gunnar Bittersmann
I like an escalator because an escalator can never break, it can only become stairs. You would never see an ‘Escalator temporarily out of order’ sign, just an ‘Escalator temporarily stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.’ — Mitch Hedberg
Fotos: Gunnar Bittersmann
Es ist ein verbreiteter Irrglaube, dass progressive enhancement heißt, seine Zeit in alte Browser zu stecken – das Gegenteil ist der Fall. Die Grundfunktionalität zu erstellen dauert nicht allzu lange. Wenn man das getan hat, kann man seine Zeit damit verbringen, mit den neusten und großartigsten Browsertechnologien zu experimentieren; sicher in dem Wissen, dass selbst wenn diese noch nicht weitgehend unterstützt werden, man den Fallback ja bereits hat. — Jeremy Keith
Poster: Jessica Lazarus
Der Schlüssel zu diesem Ansatz der Webentwicklung ist die Erkenntnis, dass es nicht ein einziges Nutzerinterface gibt – es kann viele leicht verschiedene Interfaces geben, abhängig von den Eigenschaften und Fähigkeiten des jeweiligen Browsers und Gerätes zum jeweiligen Zeitpunkt. Und das ist auch völlig in Ordnung. Webseiten müssen nicht in jedem Browser gleich aussehen. — Jeremy Keith
Poster: Jessica Lazarus
Wenn man das so akzeptiert, ist das ein wahrhaft befreiender Gedanke. Anstatt seine Zeit mit dem Versuch zu verbringen, Webseiten in den verschiedensten Browsern gleich aussehen zu lassen, kann man seine Zeit darin investieren sicherzustellen, dass die Kernfunktion dessen, was man baut, überall funktioniert, und gleichzeitig in fähigeren Browsern die bestmögliche Nutzungserfahrung zu bieten. — Jeremy Keith
Poster: Jessica Lazarus
Kreisgleichung x² + y² = r²
Kreisgleichung (x/r)² + (y/r)² = 1
Ellipsengleichung (x/a)² + (y/b)² = 1
Superellipsengleichung |x/a|ⁿ + |y/b|ⁿ = 1
Graphic by Ag2gaeh, CC BY-SA 4.0
| k | n | keyword | — | - | - | –∞ | 0 | notch | –1 | ½ | scoop | 0 | 1 | bevel | 1 | 2 | round | 2 | 4 | squircle | ∞ | ∞ | square
Wikipedia: superlellipse
Screenshot Codepen: CSS clock, superlellipse
Screenshot Codepen: CSS clock, square
Screenshot Codepen: CSS clock, square, Rundungsfehler in Chrome
WER HAT AN DER UHR GEDREHT?
FOTO: NOOR YOUNIS / UNSPLASH
Update on CSS clocks: sibling-count(), sibling-index(), escalators, progressive enhancement, corner-shape and superellipses
The following resources were mentioned during the presentation or are useful additional information.
presentation by Gunnar Bittersmann at SELFHTML-Treffen Unconference 2025 in Mannheim
Posting im SELFHTML-Forum
presentation by Lea Verou at Front-Trends 2013 in Warsaw
Lea Verou, 2013
