From the creator as Flexbox Froggy comes Grid Garden, a game for learning CSS Grid Layout: Grid Garden →
Tag Archives: css
Vortex with CSS Variables
Fading text with CSS Blend Modes
Mocking Individual CSS Transform Functions using CSS Variables
In CSS we use the transform property to manage an element’s translation, rotation, and scale. As it’s one single combined property for all three possible transformations, setting transform: rotation(90deg); on an element will (re)set the values for translation and scale by falling back to their default values. This will change when the “CSS Transform Module …
Continue reading “Mocking Individual CSS Transform Functions using CSS Variables”
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline …
Continue reading “Deep dive CSS: font metrics, line-height and vertical-align“
Reactive Animations with CSS Variables
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 …
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 …