CSS Snippets

The CSS snippet collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as snippets for handling user interactions.

  • Height transition

    CSS, Animation

    Transitions an element's height from 0 to auto when its height is unknown.

  • Image rotate on hover

    CSS, Animation

    Creates a rotate effect for the image on hover.

  • Rotating Card

    CSS, Animation

    Creates a two sided card which rotates on hover.

  • Input with prefix

    CSS, Interactivity

    Creates an input with a visual, non-editable prefix.

  • Isometric card

    CSS, Visual

    Creates an isometric card.

  • Offscreen

    CSS, Layout

    Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.

  • What are CSS pseudo-classes?

    CSS, Article

    Learn how to use CSS pseudo-classes to style an element based on changes to its state.

  • Scroll progress bar

    CSS, Animation

    Creates a progress bar indicating the scroll percentage of the page.

  • What are CSS variables and where can I use them?

    CSS, Article

    Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.

  • Focus Within

    CSS, Visual

    Changes the appearance of a form if any of its children are focused.

  • 3-tile layout

    CSS, Layout

    Aligns items horizontally using display: inline-block to create a 3-tile layout.

  • How can I create a custom responsive favicon for dark mode?

    CSS, Article

    Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.

  • Clearfix

    CSS, Layout

    Ensures that an element self-clears its children.

  • Fullscreen

    CSS, Visual

    Applies styles to an element when in fullscreen mode.

  • Hamburger Button

    CSS, Interactivity

    Displays a hamburger menu which transitions to a cross button on hover.

126