Link List
Welcome to my link library. These are not links to content I have created unless you see that mentioned in the link’s description. These are links I found interesting enough to want to keep track of. If you read Craft Link List, the Craft CMS newsletter I used to write, this page is a replacement of sorts for that exercise. Enough talk. Let’s hit the links.
Tagged with ”css”
Reset tag searchCSS Gap Decorations playground
#cssHow to have the browser pick a contrasting color in CSS | WebKit
A contrast algorithm function for CSS.
Spectral.js
Spectral.js is a lightweight JavaScript library for realistic pigment mixing, using the Kubelka-Munk theory to simulate how real paints absorb and scatter light.
Build your retro library - 8bitcn/ui
A set of 8‑bit styled components and a code distribution platform. Works with your favorite frameworks.
Tailwind CSS Cheat Sheet
A comprehensive Tailwind CSS cheat sheet to instantly find all utility classes and their CSS properties in one place.
Better typography with text-wrap pretty | WebKit
Improve web typography with CSS text-wrap: pretty — learn browser support, performance tips, and examples for cleaner, more readable text layouts.
UnoCSS: The instant on-demand Atomic CSS engine
The instant on-demand Atomic CSS engine
Bouncy radio buttons using modern CSS
A fun CSS-only experimentation to create a jumping dot between radio inputs
Animate native lazy loading · Medienbäcker Thomas Günther
How to add smooth transitions to lazy-loaded images without external libraries.
Jonas Hietala: A simple timeline using CSS flexbox
Use CSS Flexbox to make a timeline.
Oklchroma - OKLCH Color Pattern Generator
Create harmonious color patterns with Oklchroma, a powerful OKLCH-based color scale generator for designers and developers.
Replace JS animations with View Transitions
Use the View Transitions API to create smooth animations between DOM states with minimal CSS and JavaScript, replacing heavy animation libraries.
Easing Wizard - CSS Easing Editor and Generator
Generate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙
cs16.css
CSS library based on Counter Strike 1.6 UI.
Next-level frosted glass with backdrop-filter • Josh W. Comeau
Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.
@property: Next-gen CSS variables now with universal browser support
Semantic custom properties with @property just reached Baseline newly available.
Should you self-host Google Fonts? | Tune The Web
A deep dive into the performance implications of using Google Fonts (good and bad) and whether self-hosting is better.
Creating Perfect Font Fallbacks in CSS | Aleksandr Hovhannisyan
Learn how to use three CSS properties to override font metrics and minimize layout shifts during font load.
matcha.css | Drop-in semantic styling library in pure CSS
matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.
Shades of Grey with color-mix()
A dive into making beautiful gray color palettes with CSS.
Hidden Gems of Tailwind CSS | Rails Designer
Unlock the full potential of Tailwind CSS for your Rails-based SaaS apps with our guide on hidden features. From changing checkbox colors to leveraging peer modifiers and custom variants, enhance your web UIs effortlessly.
Hanging punctuation in CSS
A little fix for Safari.
An Interactive Guide to CSS Container Queries
Learn how to use CSS container queries today.
The ups and downs of text-wrap: balance and a polyfill - Bleech
text-wrap: balance elevates responsive design by auto-balancing text lines. Learn its limitations, browser support, and meet its new sibling, text-wrap: pretty.
velvette
Velvette is a library that allows you to specify in a declarative way how your transitions should behave, in isolation or as a response to a navigation, and then apply the declaration to a particular ViewTransition, NavigateEvent, or use it to handle cross-document (“MPA”) navigations.
12 Modern CSS One-Line Upgrades | Modern CSS Solutions
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.
12 Modern CSS One-Line Upgrades | Modern CSS Solutions
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.
:has(): the family selector | Blog | Chrome for Developers
With :has() landing in Chromium 105. Let’s take a look at some of the awesome opportunities it brings to our CSS!
CSS is fun again
CSS is undergoing a “quiet renaissance,” incorporating many significant features that previously required external tools into the native parts of the language.