Tag Archives: css

Vortex with CSS Variables

Another great demo by Ana Tudor. Here’s a pen with the result: See the Pen 🌈 vortex with CSS variables (WebKit-only, no JS) by Ana Tudor (@thebabydino) on CodePen. More videos on her YouTube Channel. Lots of demos on her … Continue reading

Elsewhere , Leave a comment

Fading text with CSS Blend Modes

Clever usage a gradient background and mix-blend-mode. On hover the size of the background is changed, revealing the rest of the text contents: . New to Compositing And Blending In CSS? Look no further.

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , , 1 Comment

Style Scoping with Element Queries using EQCSS

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 … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , Leave a comment

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 … Continue reading

Elsewhere , , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment