Truncate multiline text
Truncates text that is longer than one line.
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.
Truncates text that is longer than one line.
Creates a pulse effect loader animation using the animation-delay
property.
Reveals an interactive popout menu on hover/focus.
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
Creates a toggle switch with CSS only.
Displays a text on top of an image using an overlay.
Creates a responsive layout with a content area and a sidebar.
Provides a nicer alternative to text-decoration: underline
where descenders do not clip the underline.
Displays a hamburger menu which transitions to a cross button on hover.
Creates a shadow similar to box-shadow
but based on the colors of the element itself.
Creates a shrink animation on hover.
Creates a grow animation on hover.
Creates a swing animation on focus.
Creates a border animation on hover.
Creates a responsive container with a specified aspect ratio.
A short opinionated print stylesheet to make your websites look great on paper.
Creates an animated underline effect when the user hovers over the text.
Flexbox allows you to create fluid layouts easily. If you are constantly looking up how it works, this handy cheatsheet is all you need.
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
Creates a fill animation on hover.
Resets the box-model so that width
and height
are not affected by border
or padding
.
Use CSS to create various shapes like circles, triangles, and squares.
The currentColor
CSS keyword is a nifty alternative to custom properties for simple use cases.
Creates a striped list with alternating background colors.