I like how this box animates on hover, thanks to the use of multiple box-shadow effects:
Tag Archives: css
The ultimate guide to CSS Viewport Units
Ahmad Shadeed has done an extensive write-up on Viewport Units: In this article, we will learn about CSS viewport units and how to use them, along with some use-cases and solutions for common issues. Let’s start and dig in! It’s great to see that it’s an all-in-one article, covering use cases such as Viewport Unit […]
“Designing Intrinsic Layouts” by Jen Simmons
Twenty-five years after the web began, we finally have a real toolkit for creating layouts. Combining CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes gives us the technical ability to build layouts today without the horrible hacks and compromises of the past. In this hour-long talk captured live at An Event Apart DC 2019, […]
A Variable Fonts Primer
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 […]
Staggered Animations with CSS Custom Properties
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 […]
4 Ways to Animate the Color of a Text Link on Hover
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 […]
New media queries you need to know
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 […]
Prevent content from being hidden underneath a fixed header by using `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 […]
Selectors Explained — Translate CSS selectors into plain English
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 →
Creating a 4 Corner Gradient in CSS
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);