A rather geeky/technical weblog, est. 2001, by Bramus
@property and its Animating Powers
Over at CSS-Tricks Jhey Tompkins has written a solid piece on the amazing @property and the possibilities it opens: We can give the browser the information is needs to transition and animate those properties! Covered in the post, amongst many other interesting demos, are Jhey’s own Pure CSS Stopwatch and my own animated gradient border …
Continue reading “Exploring @property and its Animating Powers”
@scroll-timeline (Part 2)
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 …
::before and ::after Pseudo-Elements
@scroll-timeline (Part 1)
::spelling-error and ::grammar-error pseudo-elements
Part of the CSS Pseudo-Elements Level 4 Specification are ways to style spelling and grammar errors. By default spelling errors — words you have mistyped — get a red dotted underline, thanks to the ::spelling-error pseudo-class selector you can tweak that. Grammar errors — such as a missing capital letter at the beginning of a …
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 …
Putting libraries like GSAP and Framer Motion and React Spring aside, Josh W. Comeau digs into the transition property — “the CSS motion workhorse” as he calls it — and easing functions. I especially like the sandbox at the very end of the post that lets you play the various easing functions and framerate An …
Dzhavat ran into an interesting performance issue where practically his whole site would repaint when a transition in the header was triggered. The element being animated is a span wrapping some text placed inside an h1. The h1 itself is in the upper left corner on the page and contains my name. Initially, only the …
Continue reading “Debugging layout repaint issues triggered by CSS Transition”
z-index (and Stacking Contexts) in CSS
Ahmad Shadeed digs into z-index and covers a few scenarios that create new Stacking Contexts. Understanding Z-Index in CSS → What no one told you about z-index → MDN: Understanding z-index: The Stacking Context →