Snippets about css

Sweetie 16 as CSS variables

The palette this site is coloured with, ready to paste into a stylesheet.

Dynamic Tailwind classes in Stati

A class built from a variable never reaches Tailwind's scanner, unless stati.propValue() writes it down.

Anchors hidden under a sticky header

Clicking a table of contents link scrolls the heading right under your fixed header. One property fixes it.

Fluid font sizes with clamp

A heading that grows with the viewport between a minimum and a maximum, no media queries.

Class names with stati.propValue

Stati's own classnames, for class lists with conditions in them.

Truncate text after a few lines

Clamp a description to three lines with an ellipsis, in CSS only.

Respect prefers-reduced-motion

Some people get dizzy from your fancy animations. The browser tells you who, so listen.

Hide the scrollbar but keep scrolling

For horizontal carousels and tab bars where the scrollbar is just noise.

Crisp pixel art in CSS

Browsers smooth scaled images by default, which turns pixel art into mush. One line fixes it.