Bake dates into snippets
This commit is contained in:
Isabelle Viktoria Maciohsek
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Border with top triangle
|
title: Border with top triangle
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2019-01-18T12:18:43+02:00
|
||||||
|
lastUpdated: 2021-01-07T23:52:15+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a content container with a triangle at the top.
|
Creates a content container with a triangle at the top.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Bouncing loader
|
title: Bouncing loader
|
||||||
tags: animation,intermediate
|
tags: animation,intermediate
|
||||||
|
firstSeen: 2018-03-04T06:24:22+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a bouncing loader animation.
|
Creates a bouncing loader animation.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Box-sizing reset
|
title: Box-sizing reset
|
||||||
tags: layout,beginner
|
tags: layout,beginner
|
||||||
|
firstSeen: 2018-02-27T18:59:09+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Resets the box-model so that `width` and `height` are not affected by `border` or `padding`.
|
Resets the box-model so that `width` and `height` are not affected by `border` or `padding`.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Button border animation
|
title: Button border animation
|
||||||
tags: animation,intermediate
|
tags: animation,intermediate
|
||||||
|
firstSeen: 2019-01-21T18:52:46+02:00
|
||||||
|
lastUpdated: 2021-05-24T15:28:52+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a border animation on hover.
|
Creates a border animation on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Button swing animation
|
title: Button swing animation
|
||||||
tags: animation,intermediate
|
tags: animation,intermediate
|
||||||
|
firstSeen: 2021-05-24T15:28:52+03:00
|
||||||
|
lastUpdated: 2021-05-24T15:28:52+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a swing animation on focus.
|
Creates a swing animation on focus.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Button fill animation
|
title: Button fill animation
|
||||||
tags: animation,beginner
|
tags: animation,beginner
|
||||||
|
firstSeen: 2020-10-08T20:48:11+03:00
|
||||||
|
lastUpdated: 2021-04-02T21:34:43+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a fill animation on hover.
|
Creates a fill animation on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Button grow animation
|
title: Button grow animation
|
||||||
tags: animation,beginner
|
tags: animation,beginner
|
||||||
|
firstSeen: 2021-05-24T15:28:52+03:00
|
||||||
|
lastUpdated: 2021-05-24T15:28:52+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a grow animation on hover.
|
Creates a grow animation on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Button shrink animation
|
title: Button shrink animation
|
||||||
tags: animation,beginner
|
tags: animation,beginner
|
||||||
|
firstSeen: 2021-05-24T15:28:52+03:00
|
||||||
|
lastUpdated: 2021-05-24T15:28:52+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a shrink animation on hover.
|
Creates a shrink animation on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Checkerboard background pattern
|
title: Checkerboard background pattern
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2021-01-11T09:51:43+02:00
|
||||||
|
lastUpdated: 2021-01-11T09:51:43+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a checkerboard background pattern.
|
Creates a checkerboard background pattern.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Circle
|
title: Circle
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2018-03-04T08:19:52+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a circular shape with pure CSS.
|
Creates a circular shape with pure CSS.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Clearfix
|
title: Clearfix
|
||||||
tags: layout,beginner
|
tags: layout,beginner
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Ensures that an element self-clears its children.
|
Ensures that an element self-clears its children.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Constant width to height ratio
|
title: Constant width to height ratio
|
||||||
tags: layout,beginner
|
tags: layout,beginner
|
||||||
|
firstSeen: 2018-02-27T10:45:26+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Ensures that an element with variable `width` will retain a proportionate `height` value.
|
Ensures that an element with variable `width` will retain a proportionate `height` value.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Counter
|
title: Counter
|
||||||
tags: visual,advanced
|
tags: visual,advanced
|
||||||
|
firstSeen: 2018-03-07T22:12:42+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a custom list counter that accounts for nested list elements.
|
Creates a custom list counter that accounts for nested list elements.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Custom checkbox
|
title: Custom checkbox
|
||||||
tags: visual,animation,advanced
|
tags: visual,animation,advanced
|
||||||
|
firstSeen: 2021-05-16T13:09:15+03:00
|
||||||
|
lastUpdated: 2021-05-18T21:41:27+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a styled checkbox with animation on state change.
|
Creates a styled checkbox with animation on state change.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Custom scrollbar
|
title: Custom scrollbar
|
||||||
tags: visual,advanced
|
tags: visual,advanced
|
||||||
|
firstSeen: 2018-03-01T10:34:55+02:00
|
||||||
|
lastUpdated: 2021-05-16T13:09:15+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Customizes the scrollbar style for elements with scrollable overflow.
|
Customizes the scrollbar style for elements with scrollable overflow.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Custom text selection
|
title: Custom text selection
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Changes the styling of text selection.
|
Changes the styling of text selection.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Disable selection
|
title: Disable selection
|
||||||
tags: interactivity,beginner
|
tags: interactivity,beginner
|
||||||
|
firstSeen: 2018-02-26T19:09:58+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Makes the content unselectable.
|
Makes the content unselectable.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Display table centering
|
title: Display table centering
|
||||||
tags: layout,intermediate
|
tags: layout,intermediate
|
||||||
|
firstSeen: 2018-03-30T01:15:54+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Vertically and horizontally centers a child element within its parent element, using `display: table`.
|
Vertically and horizontally centers a child element within its parent element, using `display: table`.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Donut spinner
|
title: Donut spinner
|
||||||
tags: animation,intermediate
|
tags: animation,intermediate
|
||||||
|
firstSeen: 2018-02-27T17:32:35+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a donut spinner that can be used to indicate the loading of content.
|
Creates a donut spinner that can be used to indicate the loading of content.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Drop cap
|
title: Drop cap
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2018-10-13T07:47:30+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Makes the first letter of the first paragraph bigger than the rest of the text.
|
Makes the first letter of the first paragraph bigger than the rest of the text.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Dynamic shadow
|
title: Dynamic shadow
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2018-03-05T13:51:36+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
|
Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Etched text
|
title: Etched text
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates an effect where text appears to be "etched" or engraved into the background.
|
Creates an effect where text appears to be "etched" or engraved into the background.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Evenly distributed children
|
title: Evenly distributed children
|
||||||
tags: layout,intermediate
|
tags: layout,intermediate
|
||||||
|
firstSeen: 2018-02-28T13:47:02+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Evenly distributes child elements within a parent element.
|
Evenly distributes child elements within a parent element.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Fit image in container
|
title: Fit image in container
|
||||||
tags: layout,visual,intermediate
|
tags: layout,visual,intermediate
|
||||||
|
firstSeen: 2018-10-31T08:34:49+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
|
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Flexbox centering
|
title: Flexbox centering
|
||||||
tags: layout,beginner
|
tags: layout,beginner
|
||||||
|
firstSeen: 2018-03-03T11:57:27+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
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 flexbox.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: List with floating section headings
|
title: List with floating section headings
|
||||||
tags: visual,advanced
|
tags: visual,advanced
|
||||||
|
firstSeen: 2020-08-18T15:44:01+03:00
|
||||||
|
lastUpdated: 2021-02-05T10:21:38+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a list with floating headings for each section.
|
Creates a list with floating headings for each section.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Fluid typography
|
title: Fluid typography
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2021-05-16T11:23:05+03:00
|
||||||
|
lastUpdated: 2021-05-16T11:23:05+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates text that scales according to the viewport width.
|
Creates text that scales according to the viewport width.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Focus Within
|
title: Focus Within
|
||||||
tags: visual,interactivity,intermediate
|
tags: visual,interactivity,intermediate
|
||||||
|
firstSeen: 2018-10-23T03:58:13+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Changes the appearance of a form if any of its children are focused.
|
Changes the appearance of a form if any of its children are focused.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Full-width image
|
title: Full-width image
|
||||||
tags: layout,intermediate
|
tags: layout,intermediate
|
||||||
|
firstSeen: 2021-01-07T10:14:46+02:00
|
||||||
|
lastUpdated: 2021-01-07T10:14:46+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a full-width image.
|
Creates a full-width image.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Fullscreen
|
title: Fullscreen
|
||||||
tags: visual,advanced
|
tags: visual,advanced
|
||||||
|
firstSeen: 2019-01-12T13:08:40+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Applies styles to an element when in fullscreen mode.
|
Applies styles to an element when in fullscreen mode.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Gradient text
|
title: Gradient text
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Gives text a gradient color.
|
Gives text a gradient color.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Grid centering
|
title: Grid centering
|
||||||
tags: layout,beginner
|
tags: layout,beginner
|
||||||
|
firstSeen: 2018-03-03T12:13:59+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Horizontally and vertically centers a child element within a parent element using `grid`.
|
Horizontally and vertically centers a child element within a parent element using `grid`.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Hamburger Button
|
title: Hamburger Button
|
||||||
tags: interactivity,intermediate
|
tags: interactivity,intermediate
|
||||||
|
firstSeen: 2019-10-10T03:49:38+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Displays a hamburger menu which transitions to a cross button on hover.
|
Displays a hamburger menu which transitions to a cross button on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Height transition
|
title: Height transition
|
||||||
tags: animation,intermediate
|
tags: animation,intermediate
|
||||||
|
firstSeen: 2018-03-17T10:53:02+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Transitions an element's height from `0` to `auto` when its height is unknown.
|
Transitions an element's height from `0` to `auto` when its height is unknown.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Horizontal scroll snap
|
title: Horizontal scroll snap
|
||||||
tags: interactivity,intermediate
|
tags: interactivity,intermediate
|
||||||
|
firstSeen: 2020-08-18T14:25:46+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a horizontally scrollable container that will snap on elements when scrolling.
|
Creates a horizontally scrollable container that will snap on elements when scrolling.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Show additional content on hover
|
title: Show additional content on hover
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2020-08-18T16:40:23+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a card that displays additional content on hover.
|
Creates a card that displays additional content on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Perspective transform on hover
|
title: Perspective transform on hover
|
||||||
tags: animation,intermediate
|
tags: animation,intermediate
|
||||||
|
firstSeen: 2021-05-17T13:58:04+03:00
|
||||||
|
lastUpdated: 2021-05-17T13:58:04+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Applies a perspective transform with a hover animation to an element.
|
Applies a perspective transform with a hover animation to an element.
|
||||||
|
|||||||
@ -2,6 +2,8 @@
|
|||||||
title: Hover shadow box animation
|
title: Hover shadow box animation
|
||||||
tags: animation,intermediate
|
tags: animation,intermediate
|
||||||
unlisted: true
|
unlisted: true
|
||||||
|
firstSeen: 2018-03-06T23:41:55+02:00
|
||||||
|
lastUpdated: 2021-01-04T12:30:40+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a shadow box around the text when it is hovered.
|
Creates a shadow box around the text when it is hovered.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Hover underline animation
|
title: Hover underline animation
|
||||||
tags: animation,advanced
|
tags: animation,advanced
|
||||||
|
firstSeen: 2018-02-28T13:19:22+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates an animated underline effect when the text is hovered over.
|
Creates an animated underline effect when the text is hovered over.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Menu on image hover
|
title: Menu on image hover
|
||||||
tags: layout,animation,intermediate
|
tags: layout,animation,intermediate
|
||||||
|
firstSeen: 2020-04-20T19:15:11+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Displays a menu overlay when the image is hovered.
|
Displays a menu overlay when the image is hovered.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Image rotate on hover
|
title: Image rotate on hover
|
||||||
tags: animation,visual,intermediate
|
tags: animation,visual,intermediate
|
||||||
|
firstSeen: 2020-04-20T18:36:11+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a rotate effect for the image on hover.
|
Creates a rotate effect for the image on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Responsive image mosaic
|
title: Responsive image mosaic
|
||||||
tags: layout,intermediate
|
tags: layout,intermediate
|
||||||
|
firstSeen: 2020-08-18T17:18:03+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a responsive image mosaic.
|
Creates a responsive image mosaic.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Image overlay on hover
|
title: Image overlay on hover
|
||||||
tags: visual,animation,advanced
|
tags: visual,animation,advanced
|
||||||
|
firstSeen: 2020-04-20T14:12:33+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Displays an image overlay effect on hover.
|
Displays an image overlay effect on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Input with prefix
|
title: Input with prefix
|
||||||
tags: interactivity,visual,intermediate
|
tags: interactivity,visual,intermediate
|
||||||
|
firstSeen: 2020-10-14T14:16:57+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates an input with a visual, non-editable prefix.
|
Creates an input with a visual, non-editable prefix.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Isometric card
|
title: Isometric card
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2021-05-17T14:04:52+03:00
|
||||||
|
lastUpdated: 2021-05-17T14:04:52+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates an isometric card.
|
Creates an isometric card.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Trim multiline text
|
title: Trim multiline text
|
||||||
tags: layout,visual,intermediate
|
tags: layout,visual,intermediate
|
||||||
|
firstSeen: 2021-05-16T20:19:13+03:00
|
||||||
|
lastUpdated: 2021-05-16T20:19:13+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Limit multiline text to a given number of lines.
|
Limit multiline text to a given number of lines.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Masonry Layout
|
title: Masonry Layout
|
||||||
tags: layout,advanced
|
tags: layout,advanced
|
||||||
|
firstSeen: 2019-12-11T02:19:05+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a masonry-style layout that is especially useful when working with images.
|
Creates a masonry-style layout that is especially useful when working with images.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Mouse cursor gradient tracking
|
title: Mouse cursor gradient tracking
|
||||||
tags: visual,interactivity,advanced
|
tags: visual,interactivity,advanced
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2021-01-07T23:52:15+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
A hover effect where the gradient follows the mouse cursor.
|
A hover effect where the gradient follows the mouse cursor.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Navigation list item hover and focus effect
|
title: Navigation list item hover and focus effect
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2019-09-19T22:48:57+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a custom hover and focus effect for navigation items, using CSS transformations.
|
Creates a custom hover and focus effect for navigation items, using CSS transformations.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Offscreen
|
title: Offscreen
|
||||||
tags: layout,visual,intermediate
|
tags: layout,visual,intermediate
|
||||||
|
firstSeen: 2018-03-30T18:50:31+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.
|
Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Overflow scroll gradient
|
title: Overflow scroll gradient
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
|
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Polka dot background pattern
|
title: Polka dot background pattern
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2021-01-11T09:51:43+02:00
|
||||||
|
lastUpdated: 2021-01-11T09:51:43+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a polka dot background pattern.
|
Creates a polka dot background pattern.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Popout menu
|
title: Popout menu
|
||||||
tags: interactivity,intermediate
|
tags: interactivity,intermediate
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Reveals an interactive popout menu on hover/focus.
|
Reveals an interactive popout menu on hover/focus.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Pretty text underline
|
title: Pretty text underline
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline.
|
Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Pulse loader
|
title: Pulse loader
|
||||||
tags: animation,beginner
|
tags: animation,beginner
|
||||||
|
firstSeen: 2019-10-05T14:29:36+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a pulse effect loader animation using the `animation-delay` property.
|
Creates a pulse effect loader animation using the `animation-delay` property.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Reset all styles
|
title: Reset all styles
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2018-02-28T21:51:36+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Resets all styles to default values using only one property.
|
Resets all styles to default values using only one property.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Responsive layout with sidebar
|
title: Responsive layout with sidebar
|
||||||
tags: layout,intermediate
|
tags: layout,intermediate
|
||||||
|
firstSeen: 2020-09-16T18:54:56+03:00
|
||||||
|
lastUpdated: 2020-09-16T18:54:56+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a responsive layout with a content area and a sidebar.
|
Creates a responsive layout with a content area and a sidebar.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Rotating Card
|
title: Rotating Card
|
||||||
tags: animation,advanced
|
tags: animation,advanced
|
||||||
|
firstSeen: 2020-10-04T14:10:24+03:00
|
||||||
|
lastUpdated: 2021-03-30T15:24:01+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a two sided card which rotates on hover.
|
Creates a two sided card which rotates on hover.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Scroll progress bar
|
title: Scroll progress bar
|
||||||
tags: animation,visual,intermediate
|
tags: animation,visual,intermediate
|
||||||
|
firstSeen: 2021-05-24T09:42:03+03:00
|
||||||
|
lastUpdated: 2021-05-24T09:42:03+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a progress bar indicating the scroll percentage of the page.
|
Creates a progress bar indicating the scroll percentage of the page.
|
||||||
|
|||||||
@ -2,6 +2,8 @@
|
|||||||
title: Shape separator
|
title: Shape separator
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
unlisted: true
|
unlisted: true
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2021-01-04T12:30:40+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Uses an SVG shape to create a separator between two different blocks.
|
Uses an SVG shape to create a separator between two different blocks.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Sibling fade
|
title: Sibling fade
|
||||||
tags: interactivity,intermediate
|
tags: interactivity,intermediate
|
||||||
|
firstSeen: 2018-03-05T10:17:23+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Fades out the siblings of a hovered item.
|
Fades out the siblings of a hovered item.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Staggered animation
|
title: Staggered animation
|
||||||
tags: animation,advanced
|
tags: animation,advanced
|
||||||
|
firstSeen: 2020-03-16T12:19:05+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a staggered animation for the elements of a list.
|
Creates a staggered animation for the elements of a list.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: List with sticky section headings
|
title: List with sticky section headings
|
||||||
tags: visual,intermediate
|
tags: visual,intermediate
|
||||||
|
firstSeen: 2020-08-18T15:44:01+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a list with sticky headings for each section.
|
Creates a list with sticky headings for each section.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Stripes background pattern
|
title: Stripes background pattern
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2021-01-11T09:51:43+02:00
|
||||||
|
lastUpdated: 2021-01-11T09:51:43+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a stripes background pattern.
|
Creates a stripes background pattern.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Stylized quotation marks
|
title: Stylized quotation marks
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2021-05-16T19:53:02+03:00
|
||||||
|
lastUpdated: 2021-05-16T19:53:02+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Customizes the style of inline quotation marks.
|
Customizes the style of inline quotation marks.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: System font stack
|
title: System font stack
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Uses the native font of the operating system to get close to a native app feel.
|
Uses the native font of the operating system to get close to a native app feel.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Image text overlay
|
title: Image text overlay
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2020-08-18T15:07:32+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Displays a text on top of an image using an overlay.
|
Displays a text on top of an image using an overlay.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: 3-tile layout
|
title: 3-tile layout
|
||||||
tags: layout,beginner
|
tags: layout,beginner
|
||||||
|
firstSeen: 2019-10-02T09:51:59+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Aligns items horizontally using `display: inline-block` to create a 3-tile layout.
|
Aligns items horizontally using `display: inline-block` to create a 3-tile layout.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Toggle switch
|
title: Toggle switch
|
||||||
tags: visual,interactivity,beginner
|
tags: visual,interactivity,beginner
|
||||||
|
firstSeen: 2018-10-03T08:55:20+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a toggle switch with CSS only.
|
Creates a toggle switch with CSS only.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Transform centering
|
title: Transform centering
|
||||||
tags: layout,beginner
|
tags: layout,beginner
|
||||||
|
firstSeen: 2018-03-30T17:59:28+03:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Vertically and horizontally centers a child element within its parent element using CSS transforms.
|
Vertically and horizontally centers a child element within its parent element using CSS transforms.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Triangle
|
title: Triangle
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2021-01-07T23:52:15+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a triangular shape with pure CSS.
|
Creates a triangular shape with pure CSS.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Truncate multiline text
|
title: Truncate multiline text
|
||||||
tags: layout,intermediate
|
tags: layout,intermediate
|
||||||
|
firstSeen: 2019-01-17T07:42:44+02:00
|
||||||
|
lastUpdated: 2021-01-07T23:52:15+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Truncates text that is longer than one line.
|
Truncates text that is longer than one line.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Truncate text
|
title: Truncate text
|
||||||
tags: layout,beginner
|
tags: layout,beginner
|
||||||
|
firstSeen: 2018-02-25T15:14:39+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Truncates text that is longer than one line, adding an ellipsis at the end (`…`).
|
Truncates text that is longer than one line, adding an ellipsis at the end (`…`).
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Typewriter effect
|
title: Typewriter effect
|
||||||
tags: animation,advanced
|
tags: animation,advanced
|
||||||
|
firstSeen: 2021-05-24T16:03:40+03:00
|
||||||
|
lastUpdated: 2021-05-24T16:03:40+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a typewriter effect animation.
|
Creates a typewriter effect animation.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Vertical scroll snap
|
title: Vertical scroll snap
|
||||||
tags: interactivity,intermediate
|
tags: interactivity,intermediate
|
||||||
|
firstSeen: 2020-08-18T14:25:46+03:00
|
||||||
|
lastUpdated: 2020-08-18T14:25:46+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a scrollable container that will snap on elements when scrolling.
|
Creates a scrollable container that will snap on elements when scrolling.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Zebra striped list
|
title: Zebra striped list
|
||||||
tags: visual,beginner
|
tags: visual,beginner
|
||||||
|
firstSeen: 2018-10-31T08:19:06+02:00
|
||||||
|
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a striped list with alternating background colors.
|
Creates a striped list with alternating background colors.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Zig zag background pattern
|
title: Zig zag background pattern
|
||||||
tags: visual,advanced
|
tags: visual,advanced
|
||||||
|
firstSeen: 2021-01-11T09:51:43+02:00
|
||||||
|
lastUpdated: 2021-01-11T09:53:16+02:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a zig zag background pattern.
|
Creates a zig zag background pattern.
|
||||||
|
|||||||
@ -1,6 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Zoom in zoom out animation
|
title: Zoom in zoom out animation
|
||||||
tags: animation,beginner
|
tags: animation,beginner
|
||||||
|
firstSeen: 2020-10-05T21:42:14+03:00
|
||||||
|
lastUpdated: 2021-04-02T21:49:01+03:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Creates a zoom in zoom out animation.
|
Creates a zoom in zoom out animation.
|
||||||
|
|||||||
Reference in New Issue
Block a user