CSS snippets

14 snippets

• CSS

  CSS-only scroll-snap carousel

  A horizontally scrolling gallery that snaps to each card, with no JavaScript.

• CSS

  Respect prefers-reduced-motion

  Turn off or shorten animations for users who ask their system for less motion.

• CSS

  A small modern CSS reset

  Sensible defaults for box sizing, media, form fonts and text wrapping in a dozen lines.

• CSS

  Header, sidebar, main and footer layout with grid

  A full-height page layout with a sticky footer using grid-template-areas.

• CSS

  Accessible focus ring with :focus-visible

  Show a clear focus outline for keyboard users without drawing it on mouse clicks.

• CSS

  Fluid typography with clamp()

  Scale font size smoothly between a minimum and maximum as the viewport grows, with no media queries.

• CSS

  Card that adapts to its container with container queries

  Switch a card from stacked to side-by-side based on the space it has, not the viewport.

• CSS

  Center anything with grid

  Center an element horizontally and vertically using two lines of CSS.

• CSS

  Accessible button styles with states

  A base button with hover, active, disabled and focus styles that meets minimum target size.

• CSS

  Keep media at a fixed aspect ratio

  Reserve space for videos and images with aspect-ratio so the page does not jump while loading.

• CSS

  Visually hidden (screen-reader only) utility class

  Hide content visually while keeping it available to assistive technology.

• CSS

  Responsive card grid without media queries

  Use CSS Grid with repeat(auto-fit, minmax()) so cards wrap automatically at any width.