Snippets about css

9 snippets

Back to all snippets

  1. SNP111

    Sweetie 16 as CSS variables

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

    18 lines of css in 1 block, 6 lines of explanation.

    #25B css pixelart design

  2. SNP101

    Dynamic Tailwind classes in Stati

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

    17 lines of eta, js and json in 3 blocks, 12 lines of explanation.

    #B63 stati css

  3. SNP090

    Anchors hidden under a sticky header

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

    9 lines of css in 2 blocks, 4 lines of explanation.

    #B13 css

  4. SNP082

    Fluid font sizes with clamp

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

    3 lines of css in 1 block, 8 lines of explanation.

    #135 css

  5. SNP063

    Class names with stati.propValue

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

    13 lines of eta in 1 block, 13 lines of explanation with 4 notes.

    #13B stati css

  6. SNP048

    Truncate text after a few lines

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

    11 lines of css in 2 blocks, 4 lines of explanation.

    #31B css

  7. SNP045

    Respect prefers-reduced-motion

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

    10 lines of css and js in 2 blocks, 6 lines of explanation.

    #164 css a11y webdev

  8. SNP040

    Hide the scrollbar but keep scrolling

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

    8 lines of css in 1 block, 5 lines of explanation.

    #14B css

  9. SNP026

    Crisp pixel art in CSS

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

    3 lines of css in 1 block, 6 lines of explanation.

    #513 css pixelart