andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update frontmatter data

Browse Source
This commit is contained in:
Angelos Chalaris
2023-04-28 22:27:48 +03:00
parent bad28c2214
commit 72fbfa82c1
91 changed files with 273 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
snippets/aspect-ratio.md
View File

@ -1,9 +1,10 @@
--- ---
title: Aspect ratio title: Aspect ratio
tags: layout type: snippet
tags: [layout]
author: chalarangelo author: chalarangelo
cover: digital-nomad-12 cover: digital-nomad-12
firstSeen: 2022-08-14T05:00:00-04:00 dateModified: 2022-08-14T05:00:00-04:00
--- ---
Creates a responsive container with a specified aspect ratio. Creates a responsive container with a specified aspect ratio.

6
snippets/border-with-top-triangle.md
View File

@ -1,9 +1,9 @@
--- ---
title: Border with top triangle title: Border with top triangle
tags: visual type: snippet
tags: [visual]
cover: greek-coffee cover: greek-coffee
firstSeen: 2019-01-18T12:18:43+02:00 dateModified: 2021-01-07T23:52:15+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.

6
snippets/bouncing-loader.md
View File

@ -1,9 +1,9 @@
--- ---
title: Bouncing loader title: Bouncing loader
tags: animation type: snippet
tags: [animation]
cover: digital-nomad-12 cover: digital-nomad-12
firstSeen: 2018-03-04T06:24:22+02:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Creates a bouncing loader animation. Creates a bouncing loader animation.

6
snippets/box-sizing-reset.md
View File

@ -1,9 +1,9 @@
--- ---
title: Box-sizing reset title: Box-sizing reset
tags: layout type: snippet
tags: [layout]
cover: interior cover: interior
firstSeen: 2018-02-27T18:59:09+02:00 dateModified: 2020-12-30T15:37:37+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`.

5
snippets/broken-image-fallback.md
View File

@ -1,10 +1,11 @@
--- ---
title: Fallback for images that fail to load title: Fallback for images that fail to load
type: snippet
shortTitle: Broken image fallback shortTitle: Broken image fallback
tags: visual tags: [visual]
author: chalarangelo author: chalarangelo
cover: building-facade cover: building-facade
firstSeen: 2022-11-04T05:00:00-04:00 dateModified: 2022-11-04T05:00:00-04:00
--- ---
Displays an error message when an image fails to load. Displays an error message when an image fails to load.

6
snippets/button-border-animation.md
View File

@ -1,9 +1,9 @@
--- ---
title: Button border animation title: Button border animation
tags: animation type: snippet
tags: [animation]
cover: highlands cover: highlands
firstSeen: 2019-01-21T18:52:46+02:00 dateModified: 2021-05-24T15:28:52+03:00
lastUpdated: 2021-05-24T15:28:52+03:00
--- ---
Creates a border animation on hover. Creates a border animation on hover.

6
snippets/button-focus-swing-animation.md
View File

@ -1,10 +1,10 @@
--- ---
title: Button swing animation title: Button swing animation
tags: animation type: snippet
tags: [animation]
author: chalarangelo author: chalarangelo
cover: painters-desk cover: painters-desk
firstSeen: 2021-05-24T15:28:52+03:00 dateModified: 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.

6
snippets/button-hover-fill-animation.md
View File

@ -1,9 +1,9 @@
--- ---
title: Button fill animation title: Button fill animation
tags: animation type: snippet
tags: [animation]
cover: beach-pineapple cover: beach-pineapple
firstSeen: 2020-10-08T20:48:11+03:00 dateModified: 2021-04-02T21:34:43+03:00
lastUpdated: 2021-04-02T21:34:43+03:00
--- ---
Creates a fill animation on hover. Creates a fill animation on hover.

6
snippets/button-hover-grow-animation.md
View File

@ -1,10 +1,10 @@
--- ---
title: Button grow animation title: Button grow animation
tags: animation type: snippet
tags: [animation]
author: chalarangelo author: chalarangelo
cover: white-laptop cover: white-laptop
firstSeen: 2021-05-24T15:28:52+03:00 dateModified: 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.

6
snippets/button-hover-shrink-animation.md
View File

@ -1,10 +1,10 @@
--- ---
title: Button shrink animation title: Button shrink animation
tags: animation type: snippet
tags: [animation]
author: chalarangelo author: chalarangelo
cover: clay-pot-horizon cover: clay-pot-horizon
firstSeen: 2021-05-24T15:28:52+03:00 dateModified: 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.

5
snippets/card-image-cutout.md
View File

@ -1,9 +1,10 @@
--- ---
title: Card with image cutout title: Card with image cutout
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: radio-monstera cover: radio-monstera
firstSeen: 2022-12-11T05:00:00-04:00 dateModified: 2022-12-11T05:00:00-04:00
--- ---
Creates a card with an image cutout. Creates a card with an image cutout.

6
snippets/checkerboard-pattern.md
View File

@ -1,9 +1,9 @@
--- ---
title: Checkerboard background pattern title: Checkerboard background pattern
tags: visual type: snippet
tags: [visual]
cover: digital-nomad-2 cover: digital-nomad-2
firstSeen: 2021-01-11T09:51:43+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Creates a checkerboard background pattern. Creates a checkerboard background pattern.

6
snippets/circle.md
View File

@ -1,9 +1,9 @@
--- ---
title: Circle title: Circle
tags: visual type: snippet
tags: [visual]
cover: oven-paddle cover: oven-paddle
firstSeen: 2018-03-04T08:19:52+02:00 dateModified: 2020-12-30T15:37:37+02:00
lastUpdated: 2020-12-30T15:37:37+02:00
--- ---
Creates a circular shape with pure CSS. Creates a circular shape with pure CSS.

6
snippets/clearfix.md
View File

@ -1,9 +1,9 @@
--- ---
title: Clearfix title: Clearfix
tags: layout type: snippet
tags: [layout]
cover: memories-of-pineapple-3 cover: memories-of-pineapple-3
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/constant-width-to-height-ratio.md
View File

@ -1,9 +1,9 @@
--- ---
title: Constant width to height ratio title: Constant width to height ratio
tags: layout type: snippet
tags: [layout]
cover: clutter cover: clutter
firstSeen: 2018-02-27T10:45:26+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/counter.md
View File

@ -1,9 +1,9 @@
--- ---
title: Counter title: Counter
tags: visual type: snippet
tags: [visual]
cover: laptop-plants cover: laptop-plants
firstSeen: 2018-03-07T22:12:42+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/custom-checkbox.md
View File

@ -1,10 +1,10 @@
--- ---
title: Custom checkbox title: Custom checkbox
tags: visual,animation type: snippet
tags: [visual,animation]
author: chalarangelo author: chalarangelo
cover: interior-8 cover: interior-8
firstSeen: 2021-05-16T13:09:15+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Creates a styled checkbox with animation on state change. Creates a styled checkbox with animation on state change.

5
snippets/custom-radio.md
View File

@ -1,9 +1,10 @@
--- ---
title: Custom radio button title: Custom radio button
tags: visual,animation type: snippet
tags: [visual,animation]
author: chalarangelo author: chalarangelo
cover: messy-computer cover: messy-computer
firstSeen: 2022-11-16T05:00:00-04:00 dateModified: 2022-11-16T05:00:00-04:00
--- ---
Creates a styled radio button with animation on state change. Creates a styled radio button with animation on state change.

6
snippets/custom-scrollbar.md
View File

@ -1,9 +1,9 @@
--- ---
title: Custom scrollbar title: Custom scrollbar
tags: visual type: snippet
tags: [visual]
cover: sea-view cover: sea-view
firstSeen: 2018-03-01T10:34:55+02:00 dateModified: 2021-05-16T13:09:15+03: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.

6
snippets/custom-text-selection.md
View File

@ -1,9 +1,9 @@
--- ---
title: Custom text selection title: Custom text selection
tags: visual type: snippet
tags: [visual]
cover: digital-nomad cover: digital-nomad
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2020-12-30T15:37:37+02:00
lastUpdated: 2020-12-30T15:37:37+02:00
--- ---
Changes the styling of text selection. Changes the styling of text selection.

6
snippets/disable-selection.md
View File

@ -1,9 +1,9 @@
--- ---
title: Disable selection title: Disable selection
tags: interactivity type: snippet
tags: [interactivity]
cover: interior-9 cover: interior-9
firstSeen: 2018-02-26T19:09:58+02:00 dateModified: 2020-12-30T15:37:37+02:00
lastUpdated: 2020-12-30T15:37:37+02:00
--- ---
Makes the content unselectable. Makes the content unselectable.

5
snippets/display-empty-links.md
View File

@ -1,9 +1,10 @@
--- ---
title: Style links with no text title: Style links with no text
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: metro-tunnel cover: metro-tunnel
firstSeen: 2022-11-11T05:00:00-04:00 dateModified: 2022-11-11T05:00:00-04:00
--- ---
Displays the link URL for links with no text. Displays the link URL for links with no text.

6
snippets/display-table-centering.md
View File

@ -1,9 +1,9 @@
--- ---
title: Display table centering title: Display table centering
tags: layout type: snippet
tags: [layout]
cover: malibu cover: malibu
firstSeen: 2018-03-30T01:15:54+03:00 dateModified: 2020-12-30T15:37:37+02: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`.

6
snippets/donut-spinner.md
View File

@ -1,9 +1,9 @@
--- ---
title: Donut spinner title: Donut spinner
tags: animation type: snippet
tags: [animation]
cover: digital-nomad-3 cover: digital-nomad-3
firstSeen: 2018-02-27T17:32:35+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+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.

6
snippets/drop-cap.md
View File

@ -1,9 +1,9 @@
--- ---
title: Drop cap title: Drop cap
tags: visual type: snippet
tags: [visual]
cover: bamboo-lamp cover: bamboo-lamp
firstSeen: 2018-10-13T07:47:30+03:00 dateModified: 2020-12-30T15:37:37+02: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.

6
snippets/dynamic-shadow.md
View File

@ -1,9 +1,9 @@
--- ---
title: Dynamic shadow title: Dynamic shadow
tags: visual type: snippet
tags: [visual]
cover: couch-laptop cover: couch-laptop
firstSeen: 2018-03-05T13:51:36+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/etched-text.md
View File

@ -1,9 +1,9 @@
--- ---
title: Etched text title: Etched text
tags: visual type: snippet
tags: [visual]
cover: memories-of-pineapple-2 cover: memories-of-pineapple-2
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/evenly-distributed-children.md
View File

@ -1,9 +1,9 @@
--- ---
title: Evenly distributed children title: Evenly distributed children
tags: layout type: snippet
tags: [layout]
cover: little-bird cover: little-bird
firstSeen: 2018-02-28T13:47:02+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Evenly distributes child elements within a parent element. Evenly distributes child elements within a parent element.

6
snippets/fit-image-in-container.md
View File

@ -1,9 +1,9 @@
--- ---
title: Fit image in container title: Fit image in container
tags: layout,visual type: snippet
tags: [layout,visual]
cover: succulent-3 cover: succulent-3
firstSeen: 2018-10-31T08:34:49+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/flexbox-centering.md
View File

@ -1,9 +1,9 @@
--- ---
title: Flexbox centering title: Flexbox centering
tags: layout type: snippet
tags: [layout]
cover: basket-paper cover: basket-paper
firstSeen: 2018-03-03T11:57:27+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/floating-list-titles.md
View File

@ -1,10 +1,10 @@
--- ---
title: List with floating section headings title: List with floating section headings
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: pop-of-green cover: pop-of-green
firstSeen: 2020-08-18T15:44:01+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Creates a list with floating headings for each section. Creates a list with floating headings for each section.

6
snippets/fluid-typography.md
View File

@ -1,10 +1,10 @@
--- ---
title: Fluid typography title: Fluid typography
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: shell-focus cover: shell-focus
firstSeen: 2021-05-16T11:23:05+03:00 dateModified: 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.

6
snippets/focus-within.md
View File

@ -1,9 +1,9 @@
--- ---
title: Focus Within title: Focus Within
tags: visual,interactivity type: snippet
tags: [visual,interactivity]
cover: boats cover: boats
firstSeen: 2018-10-23T03:58:13+03:00 dateModified: 2020-12-30T15:37:37+02: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.

6
snippets/full-width.md
View File

@ -1,10 +1,10 @@
--- ---
title: Full-width image title: Full-width image
tags: layout type: snippet
tags: [layout]
author: chalarangelo author: chalarangelo
cover: yellow-white-mug-2 cover: yellow-white-mug-2
firstSeen: 2021-01-07T10:14:46+02:00 dateModified: 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.

6
snippets/fullscreen.md
View File

@ -1,9 +1,9 @@
--- ---
title: Fullscreen title: Fullscreen
tags: visual type: snippet
tags: [visual]
cover: flower-portrait-3 cover: flower-portrait-3
firstSeen: 2019-01-12T13:08:40+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Applies styles to an element when in fullscreen mode. Applies styles to an element when in fullscreen mode.

6
snippets/gradient-text.md
View File

@ -1,9 +1,9 @@
--- ---
title: Gradient text title: Gradient text
tags: visual type: snippet
tags: [visual]
cover: red-berries cover: red-berries
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2020-12-30T15:37:37+02:00
lastUpdated: 2020-12-30T15:37:37+02:00
--- ---
Gives text a gradient color. Gives text a gradient color.

6
snippets/grid-centering.md
View File

@ -1,9 +1,9 @@
--- ---
title: Grid centering title: Grid centering
tags: layout type: snippet
tags: [layout]
cover: work-hard-computer cover: work-hard-computer
firstSeen: 2018-03-03T12:13:59+02:00 dateModified: 2020-12-30T15:37:37+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`.

6
snippets/hamburger-button.md
View File

@ -1,9 +1,9 @@
--- ---
title: Hamburger Button title: Hamburger Button
tags: interactivity type: snippet
tags: [interactivity]
cover: volcano-sunset cover: volcano-sunset
firstSeen: 2019-10-10T03:49:38+03:00 dateModified: 2020-12-30T15:37:37+02: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.

6
snippets/height-transition.md
View File

@ -1,9 +1,9 @@
--- ---
title: Height transition title: Height transition
tags: animation type: snippet
tags: [animation]
cover: washed-ashore cover: washed-ashore
firstSeen: 2018-03-17T10:53:02+02:00 dateModified: 2020-12-30T15:37:37+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.

5
snippets/hide-empty-elements.md
View File

@ -1,9 +1,10 @@
--- ---
title: Hide empty elements title: Hide empty elements
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: metro-arrival cover: metro-arrival
firstSeen: 2022-11-18T05:00:00-04:00 dateModified: 2022-11-18T05:00:00-04:00
--- ---
Hides elements with no content. Hides elements with no content.

5
snippets/hide-scrollbars.md
View File

@ -1,9 +1,10 @@
--- ---
title: Hide scroll bars title: Hide scroll bars
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: by-the-lighthouse cover: by-the-lighthouse
firstSeen: 2022-05-13T05:00:00-04:00 dateModified: 2022-05-13T05:00:00-04:00
--- ---
Hides scrollbars on an element, while still allowing it to be scrollable. Hides scrollbars on an element, while still allowing it to be scrollable.

5
snippets/horizontal-gallery.md
View File

@ -1,8 +1,9 @@
--- ---
title: Image gallery with horizontal scroll title: Image gallery with horizontal scroll
tags: visual,interactivity type: snippet
tags: [visual,interactivity]
cover: flower-portrait-5 cover: flower-portrait-5
firstSeen: 2022-05-01T05:00:00-04:00 dateModified: 2022-05-01T05:00:00-04:00
--- ---
Creates a horizontally scrollable image gallery. Creates a horizontally scrollable image gallery.

6
snippets/horizontal-scroll-snap.md
View File

@ -1,9 +1,9 @@
--- ---
title: Horizontal scroll snap title: Horizontal scroll snap
tags: interactivity type: snippet
tags: [interactivity]
cover: waves-from-above cover: waves-from-above
firstSeen: 2020-08-18T14:25:46+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03: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.

6
snippets/hover-additional-content.md
View File

@ -1,9 +1,9 @@
--- ---
title: Show additional content on hover title: Show additional content on hover
tags: visual type: snippet
tags: [visual]
cover: dark-leaves-5 cover: dark-leaves-5
firstSeen: 2020-08-18T16:40:23+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Creates a card that displays additional content on hover. Creates a card that displays additional content on hover.

6
snippets/hover-perspective.md
View File

@ -1,10 +1,10 @@
--- ---
title: Perspective transform on hover title: Perspective transform on hover
tags: animation type: snippet
tags: [animation]
author: chalarangelo author: chalarangelo
cover: tropical-bike cover: tropical-bike
firstSeen: 2021-05-17T13:58:04+03:00 dateModified: 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.

6
snippets/hover-shadow-box-animation.md
View File

@ -1,10 +1,10 @@
--- ---
title: Hover shadow box animation title: Hover shadow box animation
tags: animation type: snippet
tags: [animation]
unlisted: true unlisted: true
cover: dark-cloud cover: dark-cloud
firstSeen: 2018-03-06T23:41:55+02:00 dateModified: 2021-01-04T12:30:40+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.

6
snippets/hover-underline-animation.md
View File

@ -1,9 +1,9 @@
--- ---
title: Hover underline animation title: Hover underline animation
tags: animation type: snippet
tags: [animation]
cover: coffee-phone-tray-2 cover: coffee-phone-tray-2
firstSeen: 2018-02-28T13:19:22+02:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Creates an animated underline effect when the user hovers over the text. Creates an animated underline effect when the user hovers over the text.

6
snippets/image-hover-menu.md
View File

@ -1,9 +1,9 @@
--- ---
title: Menu on image hover title: Menu on image hover
tags: layout,animation type: snippet
tags: [layout,animation]
cover: compass cover: compass
firstSeen: 2020-04-20T19:15:11+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Displays a menu overlay when the user hovers over the image. Displays a menu overlay when the user hovers over the image.

6
snippets/image-hover-rotate.md
View File

@ -1,9 +1,9 @@
--- ---
title: Image rotate on hover title: Image rotate on hover
tags: animation,visual type: snippet
tags: [animation,visual]
cover: succulent-1 cover: succulent-1
firstSeen: 2020-04-20T18:36:11+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Creates a rotate effect for the image on hover. Creates a rotate effect for the image on hover.

6
snippets/image-mosaic.md
View File

@ -1,10 +1,10 @@
--- ---
title: Responsive image mosaic title: Responsive image mosaic
tags: layout type: snippet
tags: [layout]
author: chalarangelo author: chalarangelo
cover: beach-riders cover: beach-riders
firstSeen: 2020-08-18T17:18:03+03:00 dateModified: 2020-12-30T15:37:37+02:00
lastUpdated: 2020-12-30T15:37:37+02:00
--- ---
Creates a responsive image mosaic. Creates a responsive image mosaic.

6
snippets/image-overlay-hover.md
View File

@ -1,9 +1,9 @@
--- ---
title: Image overlay on hover title: Image overlay on hover
tags: visual,animation type: snippet
tags: [visual,animation]
cover: architectural cover: architectural
firstSeen: 2020-04-20T14:12:33+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Displays an image overlay effect on hover. Displays an image overlay effect on hover.

5
snippets/image-text-overlay.md
View File

@ -1,9 +1,10 @@
--- ---
title: Image with text overlay title: Image with text overlay
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: icebreaker cover: icebreaker
firstSeen: 2023-01-29T05:00:00-04:00 dateModified: 2023-01-29T05:00:00-04:00
--- ---
Displays an image with a text overlay. Displays an image with a text overlay.

6
snippets/input-with-prefix.md
View File

@ -1,9 +1,9 @@
--- ---
title: Input with prefix title: Input with prefix
tags: interactivity,visual type: snippet
tags: [interactivity,visual]
cover: flower-portrait-4 cover: flower-portrait-4
firstSeen: 2020-10-14T14:16:57+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Creates an input with a visual, non-editable prefix. Creates an input with a visual, non-editable prefix.

6
snippets/isometric-card.md
View File

@ -1,10 +1,10 @@
--- ---
title: Isometric card title: Isometric card
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: guitar-living-room cover: guitar-living-room
firstSeen: 2021-05-17T14:04:52+03:00 dateModified: 2021-05-17T14:04:52+03:00
lastUpdated: 2021-05-17T14:04:52+03:00
--- ---
Creates an isometric card. Creates an isometric card.

6
snippets/line-clamp.md
View File

@ -1,10 +1,10 @@
--- ---
title: Trim multiline text title: Trim multiline text
tags: layout,visual type: snippet
tags: [layout,visual]
author: chalarangelo author: chalarangelo
cover: pink-flower-tree cover: pink-flower-tree
firstSeen: 2021-05-16T20:19:13+03:00 dateModified: 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.

6
snippets/masonry-layout.md
View File

@ -1,9 +1,9 @@
--- ---
title: Masonry Layout title: Masonry Layout
tags: layout type: snippet
tags: [layout]
cover: interior-2 cover: interior-2
firstSeen: 2019-12-11T02:19:05+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+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.

6
snippets/mouse-cursor-gradient-tracking.md
View File

@ -1,9 +1,9 @@
--- ---
title: Mouse cursor gradient tracking title: Mouse cursor gradient tracking
tags: visual,interactivity type: snippet
tags: [visual,interactivity]
cover: tram-car cover: tram-car
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2021-01-07T23:52:15+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.

6
snippets/navigation-list-item-hover-and-focus-effect.md
View File

@ -1,9 +1,9 @@
--- ---
title: Navigation list item hover and focus effect title: Navigation list item hover and focus effect
tags: visual type: snippet
tags: [visual]
cover: cloudy-rock-formation cover: cloudy-rock-formation
firstSeen: 2019-09-19T22:48:57+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03: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.

6
snippets/offscreen.md
View File

@ -1,9 +1,9 @@
--- ---
title: Offscreen title: Offscreen
tags: layout,visual type: snippet
tags: [layout,visual]
cover: succulent-2 cover: succulent-2
firstSeen: 2018-03-30T18:50:31+03:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible. Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.

6
snippets/overflow-scroll-gradient.md
View File

@ -1,9 +1,9 @@
--- ---
title: Overflow scroll gradient title: Overflow scroll gradient
tags: visual type: snippet
tags: [visual]
cover: memories-of-pineapple-1 cover: memories-of-pineapple-1
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+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.

6
snippets/polka-dot-pattern.md
View File

@ -1,9 +1,9 @@
--- ---
title: Polka dot background pattern title: Polka dot background pattern
tags: visual type: snippet
tags: [visual]
cover: bag-waiting cover: bag-waiting
firstSeen: 2021-01-11T09:51:43+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Creates a polka dot background pattern. Creates a polka dot background pattern.

6
snippets/popout-menu.md
View File

@ -1,9 +1,9 @@
--- ---
title: Popout menu title: Popout menu
tags: interactivity type: snippet
tags: [interactivity]
cover: city-view cover: city-view
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/pretty-text-underline.md
View File

@ -1,9 +1,9 @@
--- ---
title: Pretty text underline title: Pretty text underline
tags: visual type: snippet
tags: [visual]
cover: flower-portrait-6 cover: flower-portrait-6
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+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.

6
snippets/pulse-loader.md
View File

@ -1,9 +1,9 @@
--- ---
title: Pulse loader title: Pulse loader
tags: animation type: snippet
tags: [animation]
cover: digital-nomad-8 cover: digital-nomad-8
firstSeen: 2019-10-05T14:29:36+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Creates a pulse effect loader animation using the `animation-delay` property. Creates a pulse effect loader animation using the `animation-delay` property.

6
snippets/reset-all-styles.md
View File

@ -1,9 +1,9 @@
--- ---
title: Reset all styles title: Reset all styles
tags: visual type: snippet
tags: [visual]
cover: rocky-beach-2 cover: rocky-beach-2
firstSeen: 2018-02-28T21:51:36+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/responsive-layout-sidebar.md
View File

@ -1,10 +1,10 @@
--- ---
title: Responsive layout with sidebar title: Responsive layout with sidebar
tags: layout type: snippet
tags: [layout]
author: chalarangelo author: chalarangelo
cover: red-petals cover: red-petals
firstSeen: 2020-09-16T18:54:56+03:00 dateModified: 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.

6
snippets/rotating-card.md
View File

@ -1,9 +1,9 @@
--- ---
title: Rotating Card title: Rotating Card
tags: animation type: snippet
tags: [animation]
cover: digital-nomad-11 cover: digital-nomad-11
firstSeen: 2020-10-04T14:10:24+03:00 dateModified: 2021-03-30T15:24:01+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.

6
snippets/scroll-progress-bar.md
View File

@ -1,10 +1,10 @@
--- ---
title: Scroll progress bar title: Scroll progress bar
tags: animation,visual type: snippet
tags: [animation,visual]
author: chalarangelo author: chalarangelo
cover: coworking-space cover: coworking-space
firstSeen: 2021-05-24T09:42:03+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Creates a progress bar indicating the scroll percentage of the page. Creates a progress bar indicating the scroll percentage of the page.

5
snippets/shake-invalid-input.md
View File

@ -1,8 +1,9 @@
--- ---
title: Shake on invalid input title: Shake on invalid input
tags: animation type: snippet
tags: [animation]
cover: perfect-timing cover: perfect-timing
firstSeen: 2022-07-31T18:30:11+03:00 dateModified: 2022-07-31T18:30:11+03:00
--- ---
Creates a shake animation on invalid input. Creates a shake animation on invalid input.

6
snippets/shape-separator.md
View File

@ -1,10 +1,10 @@
--- ---
title: Shape separator title: Shape separator
tags: visual type: snippet
tags: [visual]
unlisted: true unlisted: true
cover: shapes cover: shapes
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2021-01-04T12:30:40+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.

5
snippets/shifting-card.md
View File

@ -1,9 +1,10 @@
--- ---
title: Shifting Card title: Shifting Card
tags: animation type: snippet
tags: [animation]
author: chalarangelo author: chalarangelo
cover: clouds-n-mountains cover: clouds-n-mountains
firstSeen: 2022-12-14T05:00:00-04:00 dateModified: 2022-12-14T05:00:00-04:00
--- ---
Creates a card that shifts on hover. Creates a card that shifts on hover.

6
snippets/sibling-fade.md
View File

@ -1,9 +1,9 @@
--- ---
title: Sibling fade title: Sibling fade
tags: interactivity type: snippet
tags: [interactivity]
cover: messy-papers cover: messy-papers
firstSeen: 2018-03-05T10:17:23+02:00 dateModified: 2020-12-30T15:37:37+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.

5
snippets/squiggle-link-hover-effect.md
View File

@ -1,9 +1,10 @@
--- ---
title: Squiggle link hover effect title: Squiggle link hover effect
tags: animation,visual type: snippet
tags: [animation,visual]
author: chalarangelo author: chalarangelo
cover: dreamy-flowers cover: dreamy-flowers
firstSeen: 2023-01-10T05:00:00-04:00 dateModified: 2023-01-10T05:00:00-04:00
--- ---
Creates a squiggle effect when hovering over a link. Creates a squiggle effect when hovering over a link.

6
snippets/staggered-animation.md
View File

@ -1,9 +1,9 @@
--- ---
title: Staggered animation title: Staggered animation
tags: animation type: snippet
tags: [animation]
cover: aerial-view-port cover: aerial-view-port
firstSeen: 2020-03-16T12:19:05+02:00 dateModified: 2021-10-11T18:44:51+03:00
lastUpdated: 2021-10-11T18:44:51+03:00
--- ---
Creates a staggered animation for the elements of a list. Creates a staggered animation for the elements of a list.

6
snippets/sticky-list-titles.md
View File

@ -1,10 +1,10 @@
--- ---
title: List with sticky section headings title: List with sticky section headings
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: interior-7 cover: interior-7
firstSeen: 2020-08-18T15:44:01+03:00 dateModified: 2020-12-30T15:37:37+02: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.

6
snippets/stripes-pattern.md
View File

@ -1,9 +1,9 @@
--- ---
title: Stripes background pattern title: Stripes background pattern
tags: visual type: snippet
tags: [visual]
cover: jars-on-shelf cover: jars-on-shelf
firstSeen: 2021-01-11T09:51:43+02:00 dateModified: 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.

6
snippets/stylized-quotation-marks.md
View File

@ -1,10 +1,10 @@
--- ---
title: Stylized quotation marks title: Stylized quotation marks
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: coffee-phone-tray cover: coffee-phone-tray
firstSeen: 2021-05-16T19:53:02+03:00 dateModified: 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.

6
snippets/system-font-stack.md
View File

@ -1,9 +1,9 @@
--- ---
title: System font stack title: System font stack
tags: visual type: snippet
tags: [visual]
cover: lavender-shelf cover: lavender-shelf
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/text-backdrop-overlay.md
View File

@ -1,10 +1,10 @@
--- ---
title: Image text overlay title: Image text overlay
tags: visual type: snippet
tags: [visual]
author: chalarangelo author: chalarangelo
cover: mountain-lake-cottage cover: mountain-lake-cottage
firstSeen: 2020-08-18T15:07:32+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Displays a text on top of an image using an overlay. Displays a text on top of an image using an overlay.

6
snippets/tile-layout-using-inline-block.md
View File

@ -1,9 +1,9 @@
--- ---
title: 3-tile layout title: 3-tile layout
tags: layout type: snippet
tags: [layout]
cover: godray-computer-mug cover: godray-computer-mug
firstSeen: 2019-10-02T09:51:59+03:00 dateModified: 2020-12-30T15:37:37+02: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.

6
snippets/toggle-switch.md
View File

@ -1,9 +1,9 @@
--- ---
title: Toggle switch title: Toggle switch
tags: visual,interactivity type: snippet
tags: [visual,interactivity]
cover: interior-5 cover: interior-5
firstSeen: 2018-10-03T08:55:20+03:00 dateModified: 2020-12-30T15:37:37+02:00
lastUpdated: 2020-12-30T15:37:37+02:00
--- ---
Creates a toggle switch with CSS only. Creates a toggle switch with CSS only.

6
snippets/transform-centering.md
View File

@ -1,9 +1,9 @@
--- ---
title: Transform centering title: Transform centering
tags: layout type: snippet
tags: [layout]
cover: flower-camera cover: flower-camera
firstSeen: 2018-03-30T17:59:28+03:00 dateModified: 2020-12-30T15:37:37+02: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.

6
snippets/triangle.md
View File

@ -1,9 +1,9 @@
--- ---
title: Triangle title: Triangle
tags: visual type: snippet
tags: [visual]
cover: yellow-white-mug-1 cover: yellow-white-mug-1
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Creates a triangular shape with pure CSS. Creates a triangular shape with pure CSS.

6
snippets/truncate-text-multiline.md
View File

@ -1,9 +1,9 @@
--- ---
title: Truncate multiline text title: Truncate multiline text
tags: layout type: snippet
tags: [layout]
cover: blue-computer cover: blue-computer
firstSeen: 2019-01-17T07:42:44+02:00 dateModified: 2021-01-07T23:52:15+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.

6
snippets/truncate-text.md
View File

@ -1,9 +1,9 @@
--- ---
title: Truncate text title: Truncate text
tags: layout type: snippet
tags: [layout]
cover: houses-rock-sea cover: houses-rock-sea
firstSeen: 2018-02-25T15:14:39+02:00 dateModified: 2020-12-30T15:37:37+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 (`…`).

6
snippets/typewriter-effect.md
View File

@ -1,10 +1,10 @@
--- ---
title: Typewriter effect title: Typewriter effect
tags: animation type: snippet
tags: [animation]
author: chalarangelo author: chalarangelo
cover: italian-horizon cover: italian-horizon
firstSeen: 2021-05-24T16:03:40+03:00 dateModified: 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.

5
snippets/vertical-gallery.md
View File

@ -1,8 +1,9 @@
--- ---
title: Image gallery with vertical scroll title: Image gallery with vertical scroll
tags: visual,interactivity type: snippet
tags: [visual,interactivity]
cover: lake-loop cover: lake-loop
firstSeen: 2022-05-05T05:00:00-04:00 dateModified: 2022-05-05T05:00:00-04:00
--- ---
Creates a horizontally scrollable image gallery. Creates a horizontally scrollable image gallery.

6
snippets/vertical-scroll-snap.md
View File

@ -1,9 +1,9 @@
--- ---
title: Vertical scroll snap title: Vertical scroll snap
tags: interactivity type: snippet
tags: [interactivity]
cover: baloons-field cover: baloons-field
firstSeen: 2020-08-18T14:25:46+03:00 dateModified: 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.

6
snippets/zebra-striped-list.md
View File

@ -1,9 +1,9 @@
--- ---
title: Zebra striped list title: Zebra striped list
tags: visual type: snippet
tags: [visual]
cover: forest-balcony cover: forest-balcony
firstSeen: 2018-10-31T08:19:06+02:00 dateModified: 2020-12-30T15:37:37+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.

6
snippets/zig-zag-pattern.md
View File

@ -1,9 +1,9 @@
--- ---
title: Zig zag background pattern title: Zig zag background pattern
tags: visual type: snippet
tags: [visual]
cover: blue-lake cover: blue-lake
firstSeen: 2021-01-11T09:51:43+02:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Creates a zig zag background pattern. Creates a zig zag background pattern.

6
snippets/zoomin-zoomout-animation.md
View File

@ -1,9 +1,9 @@
--- ---
title: Zoom in zoom out animation title: Zoom in zoom out animation
tags: animation type: snippet
tags: [animation]
cover: travel-mug-2 cover: travel-mug-2
firstSeen: 2020-10-05T21:42:14+03:00 dateModified: 2021-10-13T19:29:39+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
--- ---
Creates a zoom in zoom out animation. Creates a zoom in zoom out animation.