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 …
Tag Archives: demo
Engaging Focus Rings
Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds
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”
Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock
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”
Progress Nav with IntersectionObserver
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 …
CSS 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”
Faux-animated borders by animating CSS outline-offset
SVG Cassette Tape
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? 😅
Getting the Mouse Position using CSS
For his post How to Map Mouse Position in CSS on CSS-Tricks, Amit Sheen created this lovely demo: The demo does use CSS Custom Properties for the X/Y position of the mouse, but they’re not injected using JavaScript. Instead, Amit uses the same technique as used in CSS-Only Direction Aware Hover: capture the hover on …
Pure CSS Stopwatch ⏱️
Nice demo by Jhey in which he created a Pure CSS Stopwatch: See the Pen Pure CSS Working Stopwatch 😎 (@property) by Jhey (@jh3y) on CodePen. It uses a clever combination of CSS Animations, CSS Counters, and @property: Each digit gets its own CSS Animation with its own timing. Inside each animation the value of …