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.

  • 3-tile layout

    CSS, Layout

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

  • Creates a content container with a triangle at the top.

  • Box-sizing reset

    CSS, Layout

    Resets the box-model so that width and height are not affected by border or padding.

  • Circle

    CSS, Visual

    Creates a circular shape with pure CSS.

  • Clearfix

    CSS, Layout

    Ensures that an element self-clears its children.

  • Ensures that an element with variable width will retain a proportionate height value.

  • Changes the styling of text selection.

  • Disable selection

    CSS, Interactivity

    Makes the content unselectable.

  • Drop cap

    CSS, Visual

    Makes the first letter of the first paragraph bigger than the rest of the text.

  • Horizontally and vertically centers a child element within a parent element using flexbox.

  • Grid centering

    CSS, Layout

    Horizontally and vertically centers a child element within a parent element using grid.

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

  • Creates a custom hover and focus effect for navigation items, using CSS transformations.

  • Pulse loader

    CSS, Animation

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

  • Reset all styles

    CSS, Visual

    Resets all styles to default values using only one property.

2...5