Tag/CSS
Notes, techniques, and experiments in CSS — from layout tricks to modern features I'm learning or find interesting.
Jen Simmons and her team at WebKit have just posted a new article about a proposed new unified concept for layout: Item Flow.
Here's a really cool technique from Daniel Jones for creating rough borders using SVG filters
If you're a frontend dev and want to up your blur game, give this video from Juxtopposed a watch...
The :has() selector is really powerful and has so many interesting use cases.
Some cool focus state examples and use cases from Dave Rupert.
If your custom CSS counter isn't counting nested list items correctly, this could be the fix you need. I suffered so you don't have to!
Here are some more really useful modern CSS one-liners from Stephanie Eckles.
Here's a cool article from the Polypane blog that looks at different ways of fading out text using CSS in a way that preserves the ability to highlight and copy text.
A breakdown of how they work
Modern CSS layouts and components by Stephanie Eckles
Adding a dark mode to your website is quick and easy
Progressively enhance a favicon with an SVG version
Here's a cool trick from Silvio Rosa
Style and animate underlines that work on multiple lines
Exploring the different cursor types