CSS a mà
Faig webs d'ofici i fa anys que guardo eines, trucs i enllaços de CSS en mil llocs. Aquí són junts, per tenir-los a mà jo i qui els vulgui.
Eines
Funcionen al navegador, no guarden res i et donen el CSS llest per enganxar.
- clamp()Tipografia fluidaDona-li la mida mínima, la màxima i entre quines amplades creix: et torna el clamp() fet.
- --space-*Escala d'espaisUna escala de marges i separacions com a custom properties, per deixar d'inventar-se números.
- box-shadowOmbres en capesDiverses ombres suaus apilades, que és com es veuen les de veritat. Ajusta i copia.
- oklch()Color → paletaD'un color a una escala del 50 al 950 en OKLCH, amb la llum repartida a ull humà i no a ull de màquina.
- WCAGContrastDos colors i sabràs al moment si el text es llegeix: ràtio WCAG i si passa AA o AAA.
- cubic-bezier()Corbes d'easingArrossega els dos punts de la corba i mira com es mou abans de copiar-la. Amb les de sempre a mà.
- (0,1,0)EspecificitatEnganxa selectors i mira quin guanya i per què, amb :is(), :not(), :has() i :where() comptats com cal.
Receptes
Els fragments que copio una vegada i una altra, amb la demo al costat per veure que funcionen.
Enllaços
Els meus marcadors de CSS, endreçats per tema. Surten de la prestatgeria de joedoe.dev.
I els efectes?
Els experiments d'interfície (subratllats que es dibuixen, text magnètic, tinta…) continuen al laboratori de joedoe.dev, cadascun amb el seu codi.