css-irl.info
Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties
1 min · · In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. Something like this, for instance, won’t work, and will return null: document.querySelector('.my… · Shared by 6, including Evan (he/him)
piccalil.li
Container Queries are actually coming
4 min · · After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did. · Shared by 40, including Stef Walter, David Hellmann, Brad Frost, Bruce Lawson, Claus Heller 🇺🇦, Evan (he/him), Benoist Lawniczak
bram.us
Progress Nav with IntersectionObserver
1 min · · In Table of Contents with IntersectionObserver on CSS-Tricks, Chris Coyier talks about sticky table of contents on long pages whose active state updates as you scroll. When talking about those, you… · Shared by 5, including Evan (he/him)
bram.us
The Future of CSS: Scroll-Linked Animations (Part 1)
10 min · · The “Scroll-linked Animations Specification” is an upcoming addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container. Let's take a look at… · Shared by 25, including David Hellmann, Chris Coyier, Evan (he/him), Jake Archibald
ishadeed.com
Digging Into CSS Logical Properties
6 min · · How to use CSS logical properties to build multi-directional web layouts · Shared by 11, including Claus Heller 🇺🇦, Davy De Pauw, Evan (he/him)
christianheilmann.com
Conditional animations with CSS properties
2 min · · Using animations, transitions and smooth scrolling is fun, but they also represent an accessibility problem. Various groups of people have a hard time using your products when things move and change… · Shared by 21, including Chris Heilmann codepo8@toot.cafe, David Hellmann, Evan (he/him)
utopia.fyi
Fluid Space Calculator
2 min · · Fluid responsive design · Shared by 10, including Evan (he/him)
chartscss.org
Charts.css
· CSS data visualization framework Quick Start GitHub Repo Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts. The source code is available on GitHub… · Shared by 177, including Jessel Sookha, Claus Heller 🇺🇦, Stef Walter, Nico Müller 🇺🇦, Maarten Lambrechts @maarten@vis.social, Katja Evertz, Mark Kaigwa, Balda, Jacob du Toit, Evan (he/him), Mohamed Azazy, David Hellmann, Christian Hartmann
Smashing Magazine 🇺🇦 🏳️🌈
CSS Generators — Smashing Magazine
14+ min · · In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. This time it’s all about CSS Generators: from CSS shadows to easing gradients to CSS… · Shared by 82, including Stef Walter, Oliver Raduner, David Hellmann, Evan (he/him), Zain Fathoni, Claus Heller 🇺🇦
The New York Times
CSS Grid for Designers
9 min · · Changing layout on the web · Shared by 113, including Jessel Sookha, Design Shack, Stephen C Sanders, Times Open, Boris Périsset, Ana Rita, Yoav Ganbar (🥑 Builder.io/Qwik), Evan (he/him), Kim Schläpfer
CSS-Tricks
A DRY Approach to Color Themes in CSS
3 min · · The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties · Shared by 74, including Evan (he/him), Davy De Pauw, Chris Heilmann codepo8@toot.cafe
Smashing Magazine 🇺🇦 🏳️🌈
Create Responsive Image Effects With CSS Gradients And aspect-ratio — Smashing Magazine
11+ min · · A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported `aspect-ratio` property in combination with `object-fit` provides a… · Shared by 39, including Davy De Pauw, Chris Heilmann codepo8@toot.cafe, Evan (he/him)
smolcss.dev
SmolCSS
1 min · · Minimal snippets for modern CSS layouts and components · Shared by 138, including Rodrigo Noales, Ferit (at 🏠) 🌙, Davy De Pauw, Benoist Lawniczak, Marius Bleuer, HeyDesigner, Bruce Lawson, Brad Frost, henrik, Chris Heilmann codepo8@toot.cafe, Tomas Vestenicky, Claus Heller 🇺🇦, Adrian Roselli (no blue check) 🗯, mastodon.social/@renestalder, Samuel Hauser, Stef Walter, Evan (he/him)
CSS-Tricks
Use CSS Clamp to create a more flexible wrapper utility
· I like Andy's idea here: .wrapper { width: clamp(16rem, 90vw, 70rem); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; · Shared by 29, including Chris Coyier, Evan (he/him)
bram.us
The future of CSS: Higher Level Custom Properties to control multiple declarations
8 min · · “Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it's worth having a look already as they're really exciting. · Shared by 15, including Evan (he/him), Claus Heller 🇺🇦
Smashing Magazine 🇺🇦 🏳️🌈
Things You Can Do With CSS Today — Smashing Magazine
9 min · · The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too. · Shared by 55, including Rodrigo Noales, Evan (he/him), Adrian Roselli (no blue check) 🗯, Chris {he, they} , Chris Heilmann codepo8@toot.cafe, Stef Walter, Veerle Pieters, Davy De Pauw