A presentation at SELFHTML-Treffen in in Mannheim, Germany by Gunnar Bittersmann
Where no one has gone before
Photo by Stefan K on Unsplash
Photo by Stefan K on Unsplash
Photo by Thomas Bormans on Unsplash
Photo by Peter Mitchell on Unsplash
Photos by Gunnar Bittersmann
Photo by Alvesgaspar, CC BY-SA 3.0
Photo by Alvesgaspar, CC BY-SA 3.0
Photo by Black Chitsulo on Unsplash Photo by Jiyeon Park on Unsplash
sin φ = y ⁄ r cos φ = x ⁄ r tan φ = y ⁄ x
y = r sin φ x = r cos φ
x = r sin ψ y = −r cos ψ
The cuckoo-clock incident
presented by Gunnar Bittersmann
Black Forest photos by Gunnar Bittersmann
About trips: a trip through the Black Forest and a trip through modern CSS.
Along the way:
font-feature-settings,
the ::marker pseudo-element,
the counter() function,
the list-item counter,
@counter-style,
custom properties,
:has(),
aspect-ratio,
translate and rotate,
quantity queries,
sin() and cos(),
container query units.
Building a cuckoo clock with CSS and only a tiny bit of JavaScript.
(The title was taken from the Star Trek: The Animated Series episode “The Counter-Clock Incident”.)
The following resources were mentioned during the presentation or are useful additional information.
A presentation at Smashing Conference Freiburg 2022 Jam Session in September 2022 in Freiburg, Germany by Gunnar Bittersmann
Building a clock with modern CSS. A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann
Erweiterungen der Uhr aus Teil 1: animierte Umstellung auf Sommerzeit/Normalzeit, Ticken: das HTML-Element audio, Uhrschlag
Posting im SELFHTML-Forum, 2023 (rant included)
The following code examples from the presentation can be tried out live.
