A rather geeky/technical weblog, est. 2001, by Bramus
I have no idea how this works, but it’s amazing: See the Pen Morse Code Translator (HTML & CSS) by Lillian Kodi (@lillian-kodi)on CodePen. By Lillian Kodi who created this amazing HTML+CSS Calculator before. As only Chromium supports animating custom properties (Houdini FTW!) it won’t work in Safari nor Firefox. For reference, you can see …
Let this blow your mind: a functioning calculator done using only HTML and CSS by Lillian Kodi. Leverages the Checkbox Hack and the Space Toggle Trick. Crazy. As you may notice the option to divide is missing. I guess it was omitted because / is a character that might throw the parser off due to …
Nice little demo by Adam Argyle in which he makes the focus ring pop by changing its outline-offset (with a transition) on focus. The code also correctly respects the user’s prefers-reduced-motion preference.
Davor Suljic created a fork of my Smooth Scrolling Sticky ScrollSpy Navigation that — instead of using IntersectionObserver — uses some background magic to highlight the active navigation items. The result is a “Pure CSS” implementation: If you turn on an outline on one of the content sections it becomes clear how it exactly works: …
Continue reading “Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds”
Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock: See the Pen Apple Keynote animation by Louis Hoebregts (@Mamboleoo) on CodePen. Crazy! 🤯 If you’re curious to see how he’s done it, in the demo below he breaks it down step by step: See the Pen Apple Keynote …
Continue reading “Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock”
In Table of Contents with IntersectionObserver on CSS-Tricks, Chris Coyier talks about sticky table of contents on long pages whose active state updates as you scroll. When talking about those, you can not not mention the wonderful Progress Nav by Hakim El Hattab. Final version of the progress nav! Switched to SVG and made it …
background-clip Demo: Text with Animated Emoji
Fun demo by Elad Shechter: See the Pen Background-clip: text with Animated Emoji by Elad Shechter (@elad2412) on CodePen. Behind it are two techniques: The 👻 emoji is set as the background-image of the text. To do so one must wrap it inside an SVG, and successively inject the SVG using a Data URL. To …
Continue reading “CSS background-clip Demo: Text with Animated Emoji”
outline-offset
In this demo Kevin Powell created some buttons that — so it seems — have animated borders. The trick however, is that it’s not the borders but the outline that’s being animated. See the Pen Animating outlines by Kevin (@kevinpowell) on CodePen.
Past weekend Lou Ottens — inventor of the Casette Tape while working at Philips Hasselt (Belgium) — passed away at the age of 95. Sharing this Greensock-powered SVG Animation by Chris Gannon seems very timely. See the Pen Cassette Tape Loader by Chris Gannon (@chrisgannon) on CodePen. Anyone got a pencil? 😅