A rather geeky/technical weblog, est. 2001, by Bramus
Now that Google Fonts has some Variable Fonts in their offering, this primer on Variable Fonts might come in handy: Variable fonts let you add nuance and artistry to your web typography without bogging down your site. Now you can accomplish what used to require several files with a single file and some CSS! The …
Paul Hebert on the Paul Hebert blog: Movement in nature doesn’t happen all at once. Imagine a flock of birds taking off, raindrops splashing on the ground, or trees bending in the wind. The magic of these moments comes from many small movements overlapping and converging. I wanted to bring this natural movement into my …
Continue reading “Staggered Animations with CSS Custom Properties”
Good writeup by Katherine Kato of several techniques on how to change the color of a link on hover, animated Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors. There are four different techniques we can use …
Continue reading “4 Ways to Animate the Color of a Text Link on Hover”
Apart from the quite well known prefers-color-scheme and prefers-reduced-motion features, the Media Query Level 5 spec comes with a few more new ones. The Media Query Level 5 spec is being drafted as we speak, and it includes some really nice ones. Some of them are still being figured out, but several of them are …
scroll-margin-top
If you’ve ever implemented a design with a fixed header, you’ve surely had this problem: You click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That's totally fine, until you have a position: fixed; header at the top of the page obscuring the h3 you're trying to link to! Fixed …
A small utility to demystify CSS selectors, explaining them in plain English. Best part of it all: it updates the URL upon entering a selector so you get directly shareable links 🙂 Selectors Explained →
Nice demo by Adam Argyle to create a 4 Corner Gradient in CSS: Even though working with gradients has gotten some improvements, you’ll still need a trick to achieve this one: stack 2 simple linear gradients and use a linear mask to blend them together: mask-image: linear-gradient(to bottom, transparent, black);
I like using data attributes in my markup (data-*), CSS ([data-*]), and JS (el.dataset). This post on CSS-Tricks writes down exactly how I use them. Especially the different type of attribute selectors are really powerful: // Seven different types of CSS attribute selectors // This attribute exists on the element [value] // This attribute has …
Amelia Wattenberger is at it again with this nice interactive page on the CSS Cascade Every time we write a CSS declaration (or rule), it will enter the CSS Cascade, which will determine whether or not it will end up as the final style. The further down the cascade a declaration falls, the less likely …
Continue reading “The CSS Cascade – Or, How browsers resolve competing CSS styles”
