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.

  • Truncate multiline text

    Truncates text that is longer than one line.

    CSS, Layout · Jan 7, 2021

  • Box-sizing reset

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

    CSS, Layout · Dec 30, 2020

  • Dynamic shadow

    Creates a shadow similar to box-shadow but based on the colors of the element itself.

    CSS, Visual · Dec 30, 2020

  • Responsive layout with sidebar

    Creates a responsive layout with a content area and a sidebar.

    CSS, Layout · Sep 16, 2020

  • Aspect ratio

    Creates a responsive container with a specified aspect ratio.

    CSS, Layout · Aug 14, 2022

  • Border with top triangle

    Creates a content container with a triangle at the top.

    CSS, Visual · Jan 7, 2021

  • Custom scrollbar

    Customizes the scrollbar style for elements with scrollable overflow.

    CSS, Visual · May 16, 2021

  • Pretty text underline

    Provides a nicer alternative to text-decoration: underline where descenders do not clip the underline.

    CSS, Visual · Oct 13, 2021

  • Tip: CSS easing variables

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

    CSS, Animation · Jun 12, 2021

  • What's the difference between :root and html in CSS?

    The CSS selectors used to target the root element of an HTML share some similarities, but they also have some differences.

    CSS, Layout · May 22, 2022

  • Tip: Style links without a class

    A short summary of your story up to 180 characters long.

    CSS, Visual · Nov 23, 2022

  • Style links with no text

    Displays the link URL for links with no text.

    CSS, Visual · Nov 11, 2022

  • Hide scroll bars

    Hides scrollbars on an element, while still allowing it to be scrollable.

    CSS, Visual · May 13, 2022

  • Trim multiline text

    Limit multiline text to a given number of lines.

    CSS, Layout · May 16, 2021

  • Why should line-height be unitless in CSS?

    You might have heard that line-height should be unitless, but do you know why?

    CSS, Layout · Nov 27, 2022

1 5 8