Despite its name, reactive animations have nothing to do with React, the framework/library/whatever it is. Rather, reactive animations can be described in terms of discrete changes caused by any number of events. The overall idea is that JS captures multiple streams of events into a single stream, and emits those values over to CSS, where …
Tag Archives: css
Style Scoping with Element Queries using EQCSS
Update 2020-11-05: CSS Container Queries are coming! Tommy Hodgins on Style Scoping: Style scoping is the idea that you can select an element anywhere in your document to serve as a point of reference as you write styles. To achieve this he uses EQCSS, a JavaScript plugin to writing CSS Element Queries (which essentially are …
Continue reading “Style Scoping with Element Queries using EQCSS”
Stripe.com Alike Morphing Navigation Dropdown
Analysis and reproduction – using jQuery – of the morphing navigation dropdown as seen on stripe.com: Instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to make space for different content sizes. The trick is that the dropdown items …
Continue reading “Stripe.com Alike Morphing Navigation Dropdown”
Use box-decoration-break: clone; to consistently style fragments of wrapped elements
The box-decoration-break CSS property specifies how the background, padding, border, border-image, box-shadow, margin and clip of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a …
Reverse clip path with blend modes
Nice example on applying an SVG-defined clipPath using CSS. Note that’s it no simple triangle in the example, but a triangle with an inner triangle cut out, created using the reverse clip path approach by Ana Tudor. The gif and the extra background-blend-mode: screen; also give it a nice touch 🙂 Reverse clip path with …
Why You Should Be Excited About Native CSS Variables
With CSS Variables now being under development for Edge (the last of the modern browsers to not support it yet) it’s time to dig up this brilliant post on CSS Variables. If you’re under the impression that CSS Variables offer nothing new when compared to Preprocessor variables, then this post is a must-read for you: …
Continue reading “Why You Should Be Excited About Native CSS Variables”
Stylus nth-of-m-child(n,m) Selector
. As explained/linked in (ab)using CSS3’s :nth-child() selector to invent new ones and Quantity Queries for CSS it’s possible to create new types of CSS selectors by cleverly combining a few the available CSS pseudo selectors. One of those new selectors is the :nth-of-m-child selector: /** * :nth-of-m-child selector * This selector will select the …
CSS-Only Direction Aware Hover
In the past I’ve seen some demos like this one that use JavaScript/math to calculate the hover direction upon mouseenter. Detecting the direction is also possible sans JavaScript, by adding triangular hitareas to a box/link in combination with the CSS General Sibling Selector (viz. ~) to rotate the content. Internally it looks like this: Note …
CSS Memes Debunked
Conditions for CSS Calculations
In CSS we have feature queries (@supports) available to create if–else-like structs. What if we could extend our means of using conditions in CSS? Roman Komarov provides us with a clever technique – which involves using CSS Custom Properties, calc(), and some binary logic – to implementing this type of conditions on a per CSS …