Link List

Nice Select: A cus­tom <select> com­po­nent built most­ly with CSS. It lever­ages new CSS fea­tures like appearance: base-select for advanced visu­als and UX.

Dis­cov­er CSS-only meth­ods for acces­si­ble con­trast. Tech­niques to auto­mat­i­cal­ly ensure fore­ground col­ors are read­able on any back­ground until contrast-color() is wide­ly avail­able.

ReliC­SS scans CSS to iden­ti­fy lega­cy brows­er hacks, help­ing mod­ern­ize old code. It runs entire­ly in your brows­er, ensur­ing client code pri­va­cy.

This GitHub repo describes Beast­ies, a fast, light­weight library for inlin­ing crit­i­cal CSS and lazy-load­ing the rest. It’s ide­al for prerendered/​SSR SPAs.

I want to look at prac­ti­cal uses for CSS trigono­met­ric func­tions. And we’ll start with what may be the most pop­u­lar func­tions of the ​“worst” fea­ture: sin() and cos().

Wide gamut Col­or 4 com­pli­ant CSS gra­di­ent builder.

A con­trast algo­rithm func­tion for CSS.

Spectral.js is a light­weight JavaScript library for real­is­tic pig­ment mix­ing, using the Kubel­ka-Munk the­o­ry to sim­u­late how real paints absorb and scat­ter light.

A set of 8‑bit styled com­po­nents and a code dis­tri­b­u­tion plat­form. Works with your favorite frame­works.

A com­pre­hen­sive Tail­wind CSS cheat sheet to instant­ly find all util­i­ty class­es and their CSS prop­er­ties in one place.

Improve web typog­ra­phy with CSS text-wrap: pret­ty — learn brows­er sup­port, per­for­mance tips, and exam­ples for clean­er, more read­able text lay­outs.

The instant on-demand Atom­ic CSS engine

A fun CSS-only exper­i­men­ta­tion to cre­ate a jump­ing dot between radio inputs

How to add smooth tran­si­tions to lazy-loaded images with­out exter­nal libraries.

Use CSS Flexbox to make a time­line.

Cre­ate har­mo­nious col­or pat­terns with Oklchro­ma, a pow­er­ful OKLCH-based col­or scale gen­er­a­tor for design­ers and devel­op­ers.

Use the View Tran­si­tions API to cre­ate smooth ani­ma­tions between DOM states with min­i­mal CSS and JavaScript, replac­ing heavy ani­ma­tion libraries.

Gen­er­ate and cus­tomize CSS eas­ing func­tions with ease and mag­i­cal pre­ci­sion using Eas­ing Wiz­ard 🧙

CSS library based on Counter Strike 1.6 UI.

Glassy head­ers have become a core part of the ​“slick start­up” UI toolk­it, but they’re all miss­ing that final 10% that real­ly makes it shine. In this tuto­r­i­al, you’ll learn how to cre­ate the most real­is­tic lush frost­ed glass any­where on the inter­net.

Seman­tic cus­tom prop­er­ties with @property just reached Base­line new­ly avail­able.

A deep dive into the per­for­mance impli­ca­tions of using Google Fonts (good and bad) and whether self-host­ing is bet­ter.

Learn how to use three CSS prop­er­ties to over­ride font met­rics and min­i­mize lay­out shifts dur­ing font load.

matcha.css is a pure CSS library designed to style HTML ele­ments sim­i­lar­ly to a default brows­er stylesheet, elim­i­nat­ing the need for users to man­u­al­ly patch their doc­u­ments.

A dive into mak­ing beau­ti­ful gray col­or palettes with CSS.

Unlock the full poten­tial of Tail­wind CSS for your Rails-based SaaS apps with our guide on hid­den fea­tures. From chang­ing check­box col­ors to lever­ag­ing peer mod­i­fiers and cus­tom vari­ants, enhance your web UIs effort­less­ly.

A lit­tle fix for Safari.