Button border animation
Creates a border animation on hover.
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.
Creates a border animation on hover.
Creates a swing animation on focus.
Creates a fill animation on hover.
Creates a grow animation on hover.
Creates a shrink animation on hover.
Flexbox allows you to create fluid layouts easily. If you are constantly looking up how it works, this handy cheatsheet is all you need.
Creates a pulse effect loader animation using the animation-delay
property.
Creates a shake animation on invalid input.
Displays a text on top of an image using an overlay.
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
Creates an animated underline effect when the user hovers over the text.
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.
Truncates text that is longer than one line.
Resets the box-model so that width
and height
are not affected by border
or padding
.
The currentColor
CSS keyword is a nifty alternative to custom properties for simple use cases.
Creates a shadow similar to box-shadow
but based on the colors of the element itself.
A short opinionated print stylesheet to make your websites look great on paper.
Creates a responsive layout with a content area and a sidebar.
Creates a striped list with alternating background colors.
Creates a responsive container with a specified aspect ratio.
Creates a content container with a triangle at the top.
Customizes the scrollbar style for elements with scrollable overflow.
Provides a nicer alternative to text-decoration: underline
where descenders do not clip the underline.