Container Query Proposal & Explainer
CSS
LCH colors in CSS: what, why, and how? – Lea Verou
Dark mode in 5 minutes, with inverted lightness variables – Lea Verou
Want to Write a Hover Effect With Inline CSS? Use CSS Variables. | CSS-Tricks
The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that
How to Improve CSS Performance | Calibre
Learn the most common speed issues caused by CSS and how to avoid them.
Taming Blend Modes: `difference` and `exclusion` | CSS-Tricks
Up until 2020, blend modes were a feature I hadn't used much because I rarely ever had any idea what result they could produce without giving them a try
Digging Into CSS Logical Properties
How to use CSS logical properties to build multi-directional web layouts
#205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks | CSS-Tricks
How it works You apply position: sticky; to an element along with a top, left, right, or bottom threshold and it will "stick" in that position when the
Sorted CSS Colors
I wanted to create a tool to sort the named CSS colors in a way that it shows related colors together. So, next time I can't decid...
10 New CSS Features You Might Not Know About (2021 Edition)
With new CSS features constantly coming out, it's easy to lose track. Here are ten things you can do with modern CSS you might not know yet.
Grid, content re-ordering, and accessibility
Let’s review the potential accessibility problems that grid layout could cause. These issues essentially center around the concept of disconnecting the source from the visual display.
Fluid interfaces using CSS
Fluid interfaces allow you scale elements of your website based on on the available space, without using media-queries
CSS Generators — Smashing Magazine
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 overlays to CSS doodles.
Evergreen CSS Flex Layouts With Live Demos | webup.org/blog
A growing list of CSS flex demos with code samples to copy-paste when building your next page layout.
CSS Auditing Tools — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers to get their work done better and faster. Starting out with a few tools for getting to the bottom of CSS.
The Power of Composition with CSS Variables - Maxime Heckel's Blog
How leveraging CSS variable composition and HSLA colors helped me build a more efficient way to theme my apps and rely less on CSS-in-JS.
CSS Grid Cheat Sheet Illustrated in 2021🎖️ - DEV Community
Table of Contents : Grid Architecture Parent Properties grid-template-columns grid-temp...
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 2) – Bram.us
Let's take a look at how we can create Scroll-Linked Animations that use Element-based Offsets using @scroll-timeline from the “Scroll-linked Animations“ CSS Specification.
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 1) – Bram.us
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 how it works and what results we can achieve with it.
Conic.css - nice, simple conic gradients
🙂
The Surprising Things That CSS Can Animate / Coder's Block
When you think of animating CSS properties, which ones come to mind? I recently started wondering about the ones that don’t come to mind — properties that aren’...
1-Line Layouts
CSS Stats
70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization · Jens Oliver Meiert
Looking at data for some of the most popular websites, we repeat ourselves too much in CSS; using declarations just once is often one solid avenue to avoid repetition; together, we need to put more focus on style sheet optimization.
Parker: Stylesheet analysis tool.
Stylesheet analysis tool. Contribute to katiefenn/parker development by creating an account on GitHub.
Optimal Overlay Finder - Readable Text on a Background Image
The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples)
A CSS grid tutorial for beginners, discussing the various parts of the Grid Layout spec with lots of interactive examples via CodePen.
Diving into the ::before and ::after Pseudo-Elements / Coder's Block
The ::before and ::after pseudo-elements are incredibly versatile tools in the CSS toolkit. Understanding them can help you craft practical CSS to solve all...
Create Responsive Image Effects With CSS Gradients And aspect-ratio — Smashing Magazine
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 remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair.
Use CSS Variables instead of React Context | Epic React by Kent C. Dodds
How and why you should use CSS variables (custom properties) for theming instead of React context.