diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md index e2207c9..935caf0 100644 --- a/snippets/border-with-top-triangle.md +++ b/snippets/border-with-top-triangle.md @@ -1,6 +1,8 @@ --- title: Border with top triangle 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. diff --git a/snippets/bouncing-loader.md b/snippets/bouncing-loader.md index 4a9d0f5..292098a 100644 --- a/snippets/bouncing-loader.md +++ b/snippets/bouncing-loader.md @@ -1,6 +1,8 @@ --- title: Bouncing loader tags: animation,intermediate +firstSeen: 2018-03-04T06:24:22+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a bouncing loader animation. diff --git a/snippets/box-sizing-reset.md b/snippets/box-sizing-reset.md index b3c0226..935775f 100644 --- a/snippets/box-sizing-reset.md +++ b/snippets/box-sizing-reset.md @@ -1,6 +1,8 @@ --- title: Box-sizing reset 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`. diff --git a/snippets/button-border-animation.md b/snippets/button-border-animation.md index 8e610f1..24debc9 100644 --- a/snippets/button-border-animation.md +++ b/snippets/button-border-animation.md @@ -1,6 +1,8 @@ --- title: Button border animation 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. diff --git a/snippets/button-focus-swing-animation.md b/snippets/button-focus-swing-animation.md index 282a8cd..89bbee1 100644 --- a/snippets/button-focus-swing-animation.md +++ b/snippets/button-focus-swing-animation.md @@ -1,6 +1,8 @@ --- title: Button swing animation 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. diff --git a/snippets/button-hover-fill-animation.md b/snippets/button-hover-fill-animation.md index c0573d7..cb78d71 100644 --- a/snippets/button-hover-fill-animation.md +++ b/snippets/button-hover-fill-animation.md @@ -1,6 +1,8 @@ --- title: Button fill animation 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. diff --git a/snippets/button-hover-grow-animation.md b/snippets/button-hover-grow-animation.md index 76a6f95..764141b 100644 --- a/snippets/button-hover-grow-animation.md +++ b/snippets/button-hover-grow-animation.md @@ -1,6 +1,8 @@ --- title: Button grow animation 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. diff --git a/snippets/button-hover-shrink-animation.md b/snippets/button-hover-shrink-animation.md index 6ab2ed8..1883bca 100644 --- a/snippets/button-hover-shrink-animation.md +++ b/snippets/button-hover-shrink-animation.md @@ -1,6 +1,8 @@ --- title: Button shrink animation 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. diff --git a/snippets/checkerboard-pattern.md b/snippets/checkerboard-pattern.md index f9f933a..1011d10 100644 --- a/snippets/checkerboard-pattern.md +++ b/snippets/checkerboard-pattern.md @@ -1,6 +1,8 @@ --- title: Checkerboard background pattern tags: visual,intermediate +firstSeen: 2021-01-11T09:51:43+02:00 +lastUpdated: 2021-01-11T09:51:43+02:00 --- Creates a checkerboard background pattern. diff --git a/snippets/circle.md b/snippets/circle.md index d790f2c..1747df6 100644 --- a/snippets/circle.md +++ b/snippets/circle.md @@ -1,6 +1,8 @@ --- title: Circle 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. diff --git a/snippets/clearfix.md b/snippets/clearfix.md index fab4645..84c4343 100644 --- a/snippets/clearfix.md +++ b/snippets/clearfix.md @@ -1,6 +1,8 @@ --- title: Clearfix 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. diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md index 4d52352..7a4f31b 100644 --- a/snippets/constant-width-to-height-ratio.md +++ b/snippets/constant-width-to-height-ratio.md @@ -1,6 +1,8 @@ --- title: Constant width to height ratio 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. diff --git a/snippets/counter.md b/snippets/counter.md index 4e0f31f..b7477af 100644 --- a/snippets/counter.md +++ b/snippets/counter.md @@ -1,6 +1,8 @@ --- title: Counter 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. diff --git a/snippets/custom-checkbox.md b/snippets/custom-checkbox.md index 575f9c4..2609afd 100644 --- a/snippets/custom-checkbox.md +++ b/snippets/custom-checkbox.md @@ -1,6 +1,8 @@ --- title: Custom checkbox 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. diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md index 8215f70..777d576 100644 --- a/snippets/custom-scrollbar.md +++ b/snippets/custom-scrollbar.md @@ -1,6 +1,8 @@ --- title: Custom scrollbar 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. diff --git a/snippets/custom-text-selection.md b/snippets/custom-text-selection.md index c2aaa99..39688ed 100644 --- a/snippets/custom-text-selection.md +++ b/snippets/custom-text-selection.md @@ -1,6 +1,8 @@ --- title: Custom text selection 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. diff --git a/snippets/disable-selection.md b/snippets/disable-selection.md index 1652e41..0130151 100644 --- a/snippets/disable-selection.md +++ b/snippets/disable-selection.md @@ -1,6 +1,8 @@ --- title: Disable selection tags: interactivity,beginner +firstSeen: 2018-02-26T19:09:58+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Makes the content unselectable. diff --git a/snippets/display-table-centering.md b/snippets/display-table-centering.md index 477d8f1..096bac8 100644 --- a/snippets/display-table-centering.md +++ b/snippets/display-table-centering.md @@ -1,6 +1,8 @@ --- title: Display table centering 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`. diff --git a/snippets/donut-spinner.md b/snippets/donut-spinner.md index 0767472..710047b 100644 --- a/snippets/donut-spinner.md +++ b/snippets/donut-spinner.md @@ -1,6 +1,8 @@ --- title: Donut spinner 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. diff --git a/snippets/drop-cap.md b/snippets/drop-cap.md index 24e7703..d96d80f 100644 --- a/snippets/drop-cap.md +++ b/snippets/drop-cap.md @@ -1,6 +1,8 @@ --- title: Drop cap 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. diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md index 93a60f8..72e27da 100644 --- a/snippets/dynamic-shadow.md +++ b/snippets/dynamic-shadow.md @@ -1,6 +1,8 @@ --- title: Dynamic shadow 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. diff --git a/snippets/etched-text.md b/snippets/etched-text.md index 4f83047..baa92db 100644 --- a/snippets/etched-text.md +++ b/snippets/etched-text.md @@ -1,6 +1,8 @@ --- title: Etched text 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. diff --git a/snippets/evenly-distributed-children.md b/snippets/evenly-distributed-children.md index 66d5131..f282eb4 100644 --- a/snippets/evenly-distributed-children.md +++ b/snippets/evenly-distributed-children.md @@ -1,6 +1,8 @@ --- title: Evenly distributed children 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. diff --git a/snippets/fit-image-in-container.md b/snippets/fit-image-in-container.md index c38a599..51c5614 100644 --- a/snippets/fit-image-in-container.md +++ b/snippets/fit-image-in-container.md @@ -1,6 +1,8 @@ --- title: Fit image in container 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. diff --git a/snippets/flexbox-centering.md b/snippets/flexbox-centering.md index b78a9ac..45a5011 100644 --- a/snippets/flexbox-centering.md +++ b/snippets/flexbox-centering.md @@ -1,6 +1,8 @@ --- title: Flexbox centering 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. diff --git a/snippets/floating-list-titles.md b/snippets/floating-list-titles.md index 487a193..3563e2d 100644 --- a/snippets/floating-list-titles.md +++ b/snippets/floating-list-titles.md @@ -1,6 +1,8 @@ --- title: List with floating section headings 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. diff --git a/snippets/fluid-typography.md b/snippets/fluid-typography.md index 3f3c1fc..2e34914 100644 --- a/snippets/fluid-typography.md +++ b/snippets/fluid-typography.md @@ -1,6 +1,8 @@ --- title: Fluid typography 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. diff --git a/snippets/focus-within.md b/snippets/focus-within.md index 42dead8..88b486d 100644 --- a/snippets/focus-within.md +++ b/snippets/focus-within.md @@ -1,6 +1,8 @@ --- title: Focus Within 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. diff --git a/snippets/full-width.md b/snippets/full-width.md index 6b222a3..da065ff 100644 --- a/snippets/full-width.md +++ b/snippets/full-width.md @@ -1,6 +1,8 @@ --- title: Full-width image tags: layout,intermediate +firstSeen: 2021-01-07T10:14:46+02:00 +lastUpdated: 2021-01-07T10:14:46+02:00 --- Creates a full-width image. diff --git a/snippets/fullscreen.md b/snippets/fullscreen.md index 073ef70..1e0e83a 100644 --- a/snippets/fullscreen.md +++ b/snippets/fullscreen.md @@ -1,6 +1,8 @@ --- title: Fullscreen 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. diff --git a/snippets/gradient-text.md b/snippets/gradient-text.md index c9ef1f2..79b9479 100644 --- a/snippets/gradient-text.md +++ b/snippets/gradient-text.md @@ -1,6 +1,8 @@ --- title: Gradient text tags: visual,intermediate +firstSeen: 2018-02-25T15:14:39+02:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Gives text a gradient color. diff --git a/snippets/grid-centering.md b/snippets/grid-centering.md index a6d9c6e..592cdfb 100644 --- a/snippets/grid-centering.md +++ b/snippets/grid-centering.md @@ -1,6 +1,8 @@ --- title: Grid centering 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`. diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md index 9cc9535..1795da9 100644 --- a/snippets/hamburger-button.md +++ b/snippets/hamburger-button.md @@ -1,6 +1,8 @@ --- title: Hamburger Button 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. diff --git a/snippets/height-transition.md b/snippets/height-transition.md index af844e3..c0e31ce 100644 --- a/snippets/height-transition.md +++ b/snippets/height-transition.md @@ -1,6 +1,8 @@ --- title: Height transition 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. diff --git a/snippets/horizontal-scroll-snap.md b/snippets/horizontal-scroll-snap.md index 33a687f..4005f1a 100644 --- a/snippets/horizontal-scroll-snap.md +++ b/snippets/horizontal-scroll-snap.md @@ -1,6 +1,8 @@ --- title: Horizontal scroll snap 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. diff --git a/snippets/hover-additional-content.md b/snippets/hover-additional-content.md index 8a60568..9cb6570 100644 --- a/snippets/hover-additional-content.md +++ b/snippets/hover-additional-content.md @@ -1,6 +1,8 @@ --- title: Show additional content on hover 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. diff --git a/snippets/hover-pespective.md b/snippets/hover-pespective.md index 8d7131c..1404116 100644 --- a/snippets/hover-pespective.md +++ b/snippets/hover-pespective.md @@ -1,6 +1,8 @@ --- title: Perspective transform on hover 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. diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md index a051026..d5d68d1 100644 --- a/snippets/hover-shadow-box-animation.md +++ b/snippets/hover-shadow-box-animation.md @@ -2,6 +2,8 @@ title: Hover shadow box animation tags: animation,intermediate 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. diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 488f27e..4ff30cf 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -1,6 +1,8 @@ --- title: Hover underline animation 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. diff --git a/snippets/image-hover-menu.md b/snippets/image-hover-menu.md index b509e8e..e181c35 100644 --- a/snippets/image-hover-menu.md +++ b/snippets/image-hover-menu.md @@ -1,6 +1,8 @@ --- title: Menu on image hover 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. diff --git a/snippets/image-hover-rotate.md b/snippets/image-hover-rotate.md index f59a195..18ba56d 100644 --- a/snippets/image-hover-rotate.md +++ b/snippets/image-hover-rotate.md @@ -1,6 +1,8 @@ --- title: Image rotate on hover 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. diff --git a/snippets/image-mosaic.md b/snippets/image-mosaic.md index 7a0d1d8..6c1e0ff 100644 --- a/snippets/image-mosaic.md +++ b/snippets/image-mosaic.md @@ -1,6 +1,8 @@ --- title: Responsive image mosaic tags: layout,intermediate +firstSeen: 2020-08-18T17:18:03+03:00 +lastUpdated: 2020-12-30T15:37:37+02:00 --- Creates a responsive image mosaic. diff --git a/snippets/image-overlay-hover.md b/snippets/image-overlay-hover.md index 126fed4..6f0b9d1 100644 --- a/snippets/image-overlay-hover.md +++ b/snippets/image-overlay-hover.md @@ -1,6 +1,8 @@ --- title: Image overlay on hover 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. diff --git a/snippets/input-with-prefix.md b/snippets/input-with-prefix.md index 3f56de2..8a1b82d 100644 --- a/snippets/input-with-prefix.md +++ b/snippets/input-with-prefix.md @@ -1,6 +1,8 @@ --- title: Input with prefix 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. diff --git a/snippets/isometric-card.md b/snippets/isometric-card.md index 9fbb41d..aa6205f 100644 --- a/snippets/isometric-card.md +++ b/snippets/isometric-card.md @@ -1,6 +1,8 @@ --- title: Isometric card tags: visual,intermediate +firstSeen: 2021-05-17T14:04:52+03:00 +lastUpdated: 2021-05-17T14:04:52+03:00 --- Creates an isometric card. diff --git a/snippets/line-clamp.md b/snippets/line-clamp.md index 7c8723b..686d553 100644 --- a/snippets/line-clamp.md +++ b/snippets/line-clamp.md @@ -1,6 +1,8 @@ --- title: Trim multiline text 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. diff --git a/snippets/masonry-layout.md b/snippets/masonry-layout.md index 3b9a254..d7fe47c 100644 --- a/snippets/masonry-layout.md +++ b/snippets/masonry-layout.md @@ -1,6 +1,8 @@ --- title: Masonry Layout 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. diff --git a/snippets/mouse-cursor-gradient-tracking.md b/snippets/mouse-cursor-gradient-tracking.md index 31149e7..1f77fed 100644 --- a/snippets/mouse-cursor-gradient-tracking.md +++ b/snippets/mouse-cursor-gradient-tracking.md @@ -1,6 +1,8 @@ --- title: Mouse cursor gradient tracking 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. diff --git a/snippets/navigation-list-item-hover-and-focus-effect.md b/snippets/navigation-list-item-hover-and-focus-effect.md index 2fea1b1..a2bc6cb 100644 --- a/snippets/navigation-list-item-hover-and-focus-effect.md +++ b/snippets/navigation-list-item-hover-and-focus-effect.md @@ -1,6 +1,8 @@ --- title: Navigation list item hover and focus effect 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. diff --git a/snippets/offscreen.md b/snippets/offscreen.md index 4ecd1d1..e36b9f7 100644 --- a/snippets/offscreen.md +++ b/snippets/offscreen.md @@ -1,6 +1,8 @@ --- title: Offscreen 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. diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md index ebba589..4568230 100644 --- a/snippets/overflow-scroll-gradient.md +++ b/snippets/overflow-scroll-gradient.md @@ -1,6 +1,8 @@ --- title: Overflow scroll gradient 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. diff --git a/snippets/polka-dot-pattern.md b/snippets/polka-dot-pattern.md index 1220668..b2f37ac 100644 --- a/snippets/polka-dot-pattern.md +++ b/snippets/polka-dot-pattern.md @@ -1,6 +1,8 @@ --- title: Polka dot background pattern 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. diff --git a/snippets/popout-menu.md b/snippets/popout-menu.md index 64fd584..c26e96d 100644 --- a/snippets/popout-menu.md +++ b/snippets/popout-menu.md @@ -1,6 +1,8 @@ --- title: Popout menu 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. diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md index 4a1723c..92dc2f3 100644 --- a/snippets/pretty-text-underline.md +++ b/snippets/pretty-text-underline.md @@ -1,6 +1,8 @@ --- title: Pretty text underline 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. diff --git a/snippets/pulse-loader.md b/snippets/pulse-loader.md index 3eb9132..e9beac9 100644 --- a/snippets/pulse-loader.md +++ b/snippets/pulse-loader.md @@ -1,6 +1,8 @@ --- title: Pulse loader 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. diff --git a/snippets/reset-all-styles.md b/snippets/reset-all-styles.md index 1636a85..f0004f2 100644 --- a/snippets/reset-all-styles.md +++ b/snippets/reset-all-styles.md @@ -1,6 +1,8 @@ --- title: Reset all styles 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. diff --git a/snippets/responsive-layout-sidebar.md b/snippets/responsive-layout-sidebar.md index 8bf39e5..7d77f75 100644 --- a/snippets/responsive-layout-sidebar.md +++ b/snippets/responsive-layout-sidebar.md @@ -1,6 +1,8 @@ --- title: Responsive layout with sidebar 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. diff --git a/snippets/rotating-card.md b/snippets/rotating-card.md index 5376335..e3d8440 100644 --- a/snippets/rotating-card.md +++ b/snippets/rotating-card.md @@ -1,6 +1,8 @@ --- title: Rotating Card 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. diff --git a/snippets/scroll-progress-bar.md b/snippets/scroll-progress-bar.md index 9e27590..7813903 100644 --- a/snippets/scroll-progress-bar.md +++ b/snippets/scroll-progress-bar.md @@ -1,6 +1,8 @@ --- title: Scroll progress bar 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. diff --git a/snippets/shape-separator.md b/snippets/shape-separator.md index 1df64f4..5a6aa4c 100644 --- a/snippets/shape-separator.md +++ b/snippets/shape-separator.md @@ -2,6 +2,8 @@ title: Shape separator tags: visual,intermediate 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. diff --git a/snippets/sibling-fade.md b/snippets/sibling-fade.md index 2eb262f..9ff1eca 100644 --- a/snippets/sibling-fade.md +++ b/snippets/sibling-fade.md @@ -1,6 +1,8 @@ --- title: Sibling fade 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. diff --git a/snippets/staggered-animation.md b/snippets/staggered-animation.md index 42d6cfd..0902dc4 100644 --- a/snippets/staggered-animation.md +++ b/snippets/staggered-animation.md @@ -1,6 +1,8 @@ --- title: Staggered animation 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. diff --git a/snippets/sticky-list-titles.md b/snippets/sticky-list-titles.md index c4bde6e..566f9f0 100644 --- a/snippets/sticky-list-titles.md +++ b/snippets/sticky-list-titles.md @@ -1,6 +1,8 @@ --- title: List with sticky section headings 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. diff --git a/snippets/stripes-pattern.md b/snippets/stripes-pattern.md index 1bfccb9..0f6686d 100644 --- a/snippets/stripes-pattern.md +++ b/snippets/stripes-pattern.md @@ -1,6 +1,8 @@ --- title: Stripes background pattern tags: visual,beginner +firstSeen: 2021-01-11T09:51:43+02:00 +lastUpdated: 2021-01-11T09:51:43+02:00 --- Creates a stripes background pattern. diff --git a/snippets/stylized-quotation-marks.md b/snippets/stylized-quotation-marks.md index fc398e6..4a6d2a9 100644 --- a/snippets/stylized-quotation-marks.md +++ b/snippets/stylized-quotation-marks.md @@ -1,6 +1,8 @@ --- title: Stylized quotation marks 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. diff --git a/snippets/system-font-stack.md b/snippets/system-font-stack.md index 5985033..97155d0 100644 --- a/snippets/system-font-stack.md +++ b/snippets/system-font-stack.md @@ -1,6 +1,8 @@ --- title: System font stack 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. diff --git a/snippets/text-backdrop-overlay.md b/snippets/text-backdrop-overlay.md index e2002ae..4909cc6 100644 --- a/snippets/text-backdrop-overlay.md +++ b/snippets/text-backdrop-overlay.md @@ -1,6 +1,8 @@ --- title: Image text overlay 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. diff --git a/snippets/tile-layout-using-inline-block.md b/snippets/tile-layout-using-inline-block.md index 4eafcd4..af2d8d1 100644 --- a/snippets/tile-layout-using-inline-block.md +++ b/snippets/tile-layout-using-inline-block.md @@ -1,6 +1,8 @@ --- title: 3-tile layout 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. diff --git a/snippets/toggle-switch.md b/snippets/toggle-switch.md index a92a2ff..dea62fc 100644 --- a/snippets/toggle-switch.md +++ b/snippets/toggle-switch.md @@ -1,6 +1,8 @@ --- title: Toggle switch 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. diff --git a/snippets/transform-centering.md b/snippets/transform-centering.md index f334118..dbac861 100644 --- a/snippets/transform-centering.md +++ b/snippets/transform-centering.md @@ -1,6 +1,8 @@ --- title: Transform centering 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. diff --git a/snippets/triangle.md b/snippets/triangle.md index 23d865d..80e779b 100644 --- a/snippets/triangle.md +++ b/snippets/triangle.md @@ -1,6 +1,8 @@ --- title: Triangle 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. diff --git a/snippets/truncate-text-multiline.md b/snippets/truncate-text-multiline.md index 866dad5..9f2b153 100644 --- a/snippets/truncate-text-multiline.md +++ b/snippets/truncate-text-multiline.md @@ -1,6 +1,8 @@ --- title: Truncate multiline text 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. diff --git a/snippets/truncate-text.md b/snippets/truncate-text.md index 7ab9915..18d9dd6 100644 --- a/snippets/truncate-text.md +++ b/snippets/truncate-text.md @@ -1,6 +1,8 @@ --- title: Truncate text 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 (`…`). diff --git a/snippets/typewriter-effect.md b/snippets/typewriter-effect.md index 50633dc..1aed769 100644 --- a/snippets/typewriter-effect.md +++ b/snippets/typewriter-effect.md @@ -1,6 +1,8 @@ --- title: Typewriter effect tags: animation,advanced +firstSeen: 2021-05-24T16:03:40+03:00 +lastUpdated: 2021-05-24T16:03:40+03:00 --- Creates a typewriter effect animation. diff --git a/snippets/vertical-scroll-snap.md b/snippets/vertical-scroll-snap.md index ea8ed5b..31fdc11 100644 --- a/snippets/vertical-scroll-snap.md +++ b/snippets/vertical-scroll-snap.md @@ -1,6 +1,8 @@ --- title: Vertical scroll snap 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. diff --git a/snippets/zebra-striped-list.md b/snippets/zebra-striped-list.md index 2ac0a08..c5e3779 100644 --- a/snippets/zebra-striped-list.md +++ b/snippets/zebra-striped-list.md @@ -1,6 +1,8 @@ --- title: Zebra striped list 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. diff --git a/snippets/zig-zag-pattern.md b/snippets/zig-zag-pattern.md index 6b827b2..9c7cc86 100644 --- a/snippets/zig-zag-pattern.md +++ b/snippets/zig-zag-pattern.md @@ -1,6 +1,8 @@ --- title: Zig zag background pattern 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. diff --git a/snippets/zoomin-zoomout-animation.md b/snippets/zoomin-zoomout-animation.md index 09ae96b..5498086 100644 --- a/snippets/zoomin-zoomout-animation.md +++ b/snippets/zoomin-zoomout-animation.md @@ -1,6 +1,8 @@ --- title: Zoom in zoom out animation 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.