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.

  • Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.

  • Focus Within

    CSS, Visual

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

  • Clearfix

    CSS, Layout

    Ensures that an element self-clears its children.

  • Fullscreen

    CSS, Visual

    Applies styles to an element when in fullscreen mode.

  • Creates a shake animation on invalid input.

  • Hamburger Button

    CSS, Interactivity

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

  • Masonry Layout

    CSS, Layout

    Creates a masonry-style layout that is especially useful when working with images.

  • Pulse loader

    CSS, Animation

    Creates a pulse effect loader animation using the animation-delay property.

  • Displays a text on top of an image using an overlay.

  • Creates an animated underline effect when the user hovers over the text.

  • Popout menu

    CSS, Interactivity

    Reveals an interactive popout menu on hover/focus.

  • Learn how to use the cubic-bezier() class of easing functions and create beautiful animations that stand out.

  • Creates a border animation on hover.

  • Creates a swing animation on focus.

  • Button fill animation

    CSS, Animation

    Creates a fill animation on hover.