Ⓒ Repository by
Code Honchos
Transitions an element's height from 0 to auto when its height is unknown.
Creates a bouncing loader animation.
Creates an animated underline effect when the text is hovered over.
Creates a border animation on hover.
Creates a staggered animation for the elements of a list.
Creates a shadow box around the text when it is hovered.
Variables that can be reused for transition-timing-function properties, more powerful than the built-in ease, ease-in, ease-out and ease-in-out.
Creates a pulse effect loader animation using the animation-delay property.
Creates a rotate effect for the image on hover.
Creates a donut spinner that can be used to indicate the loading of content.
Displays a hamburger menu which transitions to a cross on hover.
Reveals an interactive popout menu on hover and focus.
Fades out the siblings of a hovered item.
Makes the content unselectable.
Displays a menu overlay when the image is hovered.
Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.
Provides an alternative to display: none (not readable by screen readers) and visibility: hidden (takes up physical space in the DOM).
If the text is longer than one line, it will be truncated for n lines and end with an gradient fade.
Align items horizontally using display: inline-block to create a 3-tile layout.
Creates a vertical masonry layout using HTML and CSS.
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the background-size property.
Ensures that an element self-clears its children.
Vertically and horizontally centers a child element within its parent element using display: table (as an alternative to flexbox).
Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
Vertically and horizontally centers a child element within its parent element using position: absolute and transform: translate() (as an alternative to flexbox or display: table).
Similar to flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.
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.
If the text is longer than one line, it will be truncated and end with an ellipsis ….
Resets the box-model so that width and height are not affected by border or padding.
Evenly distributes child elements within a parent element.
Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e. its width to height ratio remains constant).
Horizontally and vertically centers a child element within a parent element using flexbox.
Horizontally and vertically centers a child element within a parent element using Grid.
Fancy hover and focus effect at navigation items using transform CSS property.
A hover effect where the gradient follows the mouse cursor.
Creates a toggle switch with CSS only.
Displays an image overlay effect on hover.
The :fullscreen CSS pseudo-element represents an element that's displayed when the browser is in fullscreen mode.
Changes the appearance of a form if any of its children are focused.
Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.
Creates a text container with a triangle at the top.
Creates a shadow similar to box-shadow but based on the colors of the element itself.
Ⓒ Repository by
Code Honchos