Update frontmatter data
This commit is contained in:
Angelos Chalaris
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Aspect ratio
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Border with top triangle
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: greek-coffee
|
||||
firstSeen: 2019-01-18T12:18:43+02:00
|
||||
lastUpdated: 2021-01-07T23:52:15+02:00
|
||||
dateModified: 2021-01-07T23:52:15+02:00
|
||||
---
|
||||
|
||||
Creates a content container with a triangle at the top.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Bouncing loader
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: digital-nomad-12
|
||||
firstSeen: 2018-03-04T06:24:22+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a bouncing loader animation.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Box-sizing reset
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: interior
|
||||
firstSeen: 2018-02-27T18:59:09+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Resets the box-model so that `width` and `height` are not affected by `border` or `padding`.
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
---
|
||||
title: Fallback for images that fail to load
|
||||
type: snippet
|
||||
shortTitle: Broken image fallback
|
||||
tags: visual
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Button border animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: highlands
|
||||
firstSeen: 2019-01-21T18:52:46+02:00
|
||||
lastUpdated: 2021-05-24T15:28:52+03:00
|
||||
dateModified: 2021-05-24T15:28:52+03:00
|
||||
---
|
||||
|
||||
Creates a border animation on hover.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Button swing animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
author: chalarangelo
|
||||
cover: painters-desk
|
||||
firstSeen: 2021-05-24T15:28:52+03:00
|
||||
lastUpdated: 2021-05-24T15:28:52+03:00
|
||||
dateModified: 2021-05-24T15:28:52+03:00
|
||||
---
|
||||
|
||||
Creates a swing animation on focus.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Button fill animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: beach-pineapple
|
||||
firstSeen: 2020-10-08T20:48:11+03:00
|
||||
lastUpdated: 2021-04-02T21:34:43+03:00
|
||||
dateModified: 2021-04-02T21:34:43+03:00
|
||||
---
|
||||
|
||||
Creates a fill animation on hover.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Button grow animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
author: chalarangelo
|
||||
cover: white-laptop
|
||||
firstSeen: 2021-05-24T15:28:52+03:00
|
||||
lastUpdated: 2021-05-24T15:28:52+03:00
|
||||
dateModified: 2021-05-24T15:28:52+03:00
|
||||
---
|
||||
|
||||
Creates a grow animation on hover.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Button shrink animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
author: chalarangelo
|
||||
cover: clay-pot-horizon
|
||||
firstSeen: 2021-05-24T15:28:52+03:00
|
||||
lastUpdated: 2021-05-24T15:28:52+03:00
|
||||
dateModified: 2021-05-24T15:28:52+03:00
|
||||
---
|
||||
|
||||
Creates a shrink animation on hover.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Card with image cutout
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Checkerboard background pattern
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: digital-nomad-2
|
||||
firstSeen: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a checkerboard background pattern.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Circle
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: oven-paddle
|
||||
firstSeen: 2018-03-04T08:19:52+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Creates a circular shape with pure CSS.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Clearfix
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: memories-of-pineapple-3
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Ensures that an element self-clears its children.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Constant width to height ratio
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: clutter
|
||||
firstSeen: 2018-02-27T10:45:26+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Ensures that an element with variable `width` will retain a proportionate `height` value.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Counter
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: laptop-plants
|
||||
firstSeen: 2018-03-07T22:12:42+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Creates a custom list counter that accounts for nested list elements.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Custom checkbox
|
||||
tags: visual,animation
|
||||
type: snippet
|
||||
tags: [visual,animation]
|
||||
author: chalarangelo
|
||||
cover: interior-8
|
||||
firstSeen: 2021-05-16T13:09:15+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a styled checkbox with animation on state change.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Custom radio button
|
||||
tags: visual,animation
|
||||
type: snippet
|
||||
tags: [visual,animation]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Custom scrollbar
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: sea-view
|
||||
firstSeen: 2018-03-01T10:34:55+02:00
|
||||
lastUpdated: 2021-05-16T13:09:15+03:00
|
||||
dateModified: 2021-05-16T13:09:15+03:00
|
||||
---
|
||||
|
||||
Customizes the scrollbar style for elements with scrollable overflow.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Custom text selection
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: digital-nomad
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Changes the styling of text selection.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Disable selection
|
||||
tags: interactivity
|
||||
type: snippet
|
||||
tags: [interactivity]
|
||||
cover: interior-9
|
||||
firstSeen: 2018-02-26T19:09:58+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Makes the content unselectable.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Style links with no text
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Display table centering
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: malibu
|
||||
firstSeen: 2018-03-30T01:15:54+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Vertically and horizontally centers a child element within its parent element, using `display: table`.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Donut spinner
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: digital-nomad-3
|
||||
firstSeen: 2018-02-27T17:32:35+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a donut spinner that can be used to indicate the loading of content.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Drop cap
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: bamboo-lamp
|
||||
firstSeen: 2018-10-13T07:47:30+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Makes the first letter of the first paragraph bigger than the rest of the text.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Dynamic shadow
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: couch-laptop
|
||||
firstSeen: 2018-03-05T13:51:36+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Etched text
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: memories-of-pineapple-2
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Creates an effect where text appears to be "etched" or engraved into the background.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Evenly distributed children
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: little-bird
|
||||
firstSeen: 2018-02-28T13:47:02+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Evenly distributes child elements within a parent element.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Fit image in container
|
||||
tags: layout,visual
|
||||
type: snippet
|
||||
tags: [layout,visual]
|
||||
cover: succulent-3
|
||||
firstSeen: 2018-10-31T08:34:49+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Flexbox centering
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: basket-paper
|
||||
firstSeen: 2018-03-03T11:57:27+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Horizontally and vertically centers a child element within a parent element using flexbox.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: List with floating section headings
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
cover: pop-of-green
|
||||
firstSeen: 2020-08-18T15:44:01+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a list with floating headings for each section.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Fluid typography
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
cover: shell-focus
|
||||
firstSeen: 2021-05-16T11:23:05+03:00
|
||||
lastUpdated: 2021-05-16T11:23:05+03:00
|
||||
dateModified: 2021-05-16T11:23:05+03:00
|
||||
---
|
||||
|
||||
Creates text that scales according to the viewport width.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Focus Within
|
||||
tags: visual,interactivity
|
||||
type: snippet
|
||||
tags: [visual,interactivity]
|
||||
cover: boats
|
||||
firstSeen: 2018-10-23T03:58:13+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Changes the appearance of a form if any of its children are focused.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Full-width image
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
author: chalarangelo
|
||||
cover: yellow-white-mug-2
|
||||
firstSeen: 2021-01-07T10:14:46+02:00
|
||||
lastUpdated: 2021-01-07T10:14:46+02:00
|
||||
dateModified: 2021-01-07T10:14:46+02:00
|
||||
---
|
||||
|
||||
Creates a full-width image.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Fullscreen
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: flower-portrait-3
|
||||
firstSeen: 2019-01-12T13:08:40+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Applies styles to an element when in fullscreen mode.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Gradient text
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: red-berries
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Gives text a gradient color.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Grid centering
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: work-hard-computer
|
||||
firstSeen: 2018-03-03T12:13:59+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Horizontally and vertically centers a child element within a parent element using `grid`.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Hamburger Button
|
||||
tags: interactivity
|
||||
type: snippet
|
||||
tags: [interactivity]
|
||||
cover: volcano-sunset
|
||||
firstSeen: 2019-10-10T03:49:38+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Displays a hamburger menu which transitions to a cross button on hover.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Height transition
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: washed-ashore
|
||||
firstSeen: 2018-03-17T10:53:02+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Transitions an element's height from `0` to `auto` when its height is unknown.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Hide empty elements
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
cover: metro-arrival
|
||||
firstSeen: 2022-11-18T05:00:00-04:00
|
||||
dateModified: 2022-11-18T05:00:00-04:00
|
||||
---
|
||||
|
||||
Hides elements with no content.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Hide scroll bars
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Image gallery with horizontal scroll
|
||||
tags: visual,interactivity
|
||||
type: snippet
|
||||
tags: [visual,interactivity]
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Horizontal scroll snap
|
||||
tags: interactivity
|
||||
type: snippet
|
||||
tags: [interactivity]
|
||||
cover: waves-from-above
|
||||
firstSeen: 2020-08-18T14:25:46+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a horizontally scrollable container that will snap on elements when scrolling.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Show additional content on hover
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: dark-leaves-5
|
||||
firstSeen: 2020-08-18T16:40:23+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a card that displays additional content on hover.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Perspective transform on hover
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
author: chalarangelo
|
||||
cover: tropical-bike
|
||||
firstSeen: 2021-05-17T13:58:04+03:00
|
||||
lastUpdated: 2021-05-17T13:58:04+03:00
|
||||
dateModified: 2021-05-17T13:58:04+03:00
|
||||
---
|
||||
|
||||
Applies a perspective transform with a hover animation to an element.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Hover shadow box animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
unlisted: true
|
||||
cover: dark-cloud
|
||||
firstSeen: 2018-03-06T23:41:55+02:00
|
||||
lastUpdated: 2021-01-04T12:30:40+02:00
|
||||
dateModified: 2021-01-04T12:30:40+02:00
|
||||
---
|
||||
|
||||
Creates a shadow box around the text when it is hovered.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Hover underline animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: coffee-phone-tray-2
|
||||
firstSeen: 2018-02-28T13:19:22+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates an animated underline effect when the user hovers over the text.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Menu on image hover
|
||||
tags: layout,animation
|
||||
type: snippet
|
||||
tags: [layout,animation]
|
||||
cover: compass
|
||||
firstSeen: 2020-04-20T19:15:11+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Displays a menu overlay when the user hovers over the image.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Image rotate on hover
|
||||
tags: animation,visual
|
||||
type: snippet
|
||||
tags: [animation,visual]
|
||||
cover: succulent-1
|
||||
firstSeen: 2020-04-20T18:36:11+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a rotate effect for the image on hover.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Responsive image mosaic
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
author: chalarangelo
|
||||
cover: beach-riders
|
||||
firstSeen: 2020-08-18T17:18:03+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Creates a responsive image mosaic.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Image overlay on hover
|
||||
tags: visual,animation
|
||||
type: snippet
|
||||
tags: [visual,animation]
|
||||
cover: architectural
|
||||
firstSeen: 2020-04-20T14:12:33+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Displays an image overlay effect on hover.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Image with text overlay
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Input with prefix
|
||||
tags: interactivity,visual
|
||||
type: snippet
|
||||
tags: [interactivity,visual]
|
||||
cover: flower-portrait-4
|
||||
firstSeen: 2020-10-14T14:16:57+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates an input with a visual, non-editable prefix.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Isometric card
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
cover: guitar-living-room
|
||||
firstSeen: 2021-05-17T14:04:52+03:00
|
||||
lastUpdated: 2021-05-17T14:04:52+03:00
|
||||
dateModified: 2021-05-17T14:04:52+03:00
|
||||
---
|
||||
|
||||
Creates an isometric card.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Trim multiline text
|
||||
tags: layout,visual
|
||||
type: snippet
|
||||
tags: [layout,visual]
|
||||
author: chalarangelo
|
||||
cover: pink-flower-tree
|
||||
firstSeen: 2021-05-16T20:19:13+03:00
|
||||
lastUpdated: 2021-05-16T20:19:13+03:00
|
||||
dateModified: 2021-05-16T20:19:13+03:00
|
||||
---
|
||||
|
||||
Limit multiline text to a given number of lines.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Masonry Layout
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: interior-2
|
||||
firstSeen: 2019-12-11T02:19:05+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a masonry-style layout that is especially useful when working with images.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Mouse cursor gradient tracking
|
||||
tags: visual,interactivity
|
||||
type: snippet
|
||||
tags: [visual,interactivity]
|
||||
cover: tram-car
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2021-01-07T23:52:15+02:00
|
||||
dateModified: 2021-01-07T23:52:15+02:00
|
||||
---
|
||||
|
||||
A hover effect where the gradient follows the mouse cursor.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Navigation list item hover and focus effect
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: cloudy-rock-formation
|
||||
firstSeen: 2019-09-19T22:48:57+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a custom hover and focus effect for navigation items, using CSS transformations.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Offscreen
|
||||
tags: layout,visual
|
||||
type: snippet
|
||||
tags: [layout,visual]
|
||||
cover: succulent-2
|
||||
firstSeen: 2018-03-30T18:50:31+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Overflow scroll gradient
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: memories-of-pineapple-1
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Polka dot background pattern
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: bag-waiting
|
||||
firstSeen: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a polka dot background pattern.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Popout menu
|
||||
tags: interactivity
|
||||
type: snippet
|
||||
tags: [interactivity]
|
||||
cover: city-view
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Reveals an interactive popout menu on hover/focus.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Pretty text underline
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: flower-portrait-6
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Pulse loader
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: digital-nomad-8
|
||||
firstSeen: 2019-10-05T14:29:36+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a pulse effect loader animation using the `animation-delay` property.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Reset all styles
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: rocky-beach-2
|
||||
firstSeen: 2018-02-28T21:51:36+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Resets all styles to default values using only one property.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Responsive layout with sidebar
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
author: chalarangelo
|
||||
cover: red-petals
|
||||
firstSeen: 2020-09-16T18:54:56+03:00
|
||||
lastUpdated: 2020-09-16T18:54:56+03:00
|
||||
dateModified: 2020-09-16T18:54:56+03:00
|
||||
---
|
||||
|
||||
Creates a responsive layout with a content area and a sidebar.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Rotating Card
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: digital-nomad-11
|
||||
firstSeen: 2020-10-04T14:10:24+03:00
|
||||
lastUpdated: 2021-03-30T15:24:01+03:00
|
||||
dateModified: 2021-03-30T15:24:01+03:00
|
||||
---
|
||||
|
||||
Creates a two sided card which rotates on hover.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Scroll progress bar
|
||||
tags: animation,visual
|
||||
type: snippet
|
||||
tags: [animation,visual]
|
||||
author: chalarangelo
|
||||
cover: coworking-space
|
||||
firstSeen: 2021-05-24T09:42:03+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a progress bar indicating the scroll percentage of the page.
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Shake on invalid input
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
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.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Shape separator
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
unlisted: true
|
||||
cover: shapes
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2021-01-04T12:30:40+02:00
|
||||
dateModified: 2021-01-04T12:30:40+02:00
|
||||
---
|
||||
|
||||
Uses an SVG shape to create a separator between two different blocks.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Shifting Card
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Sibling fade
|
||||
tags: interactivity
|
||||
type: snippet
|
||||
tags: [interactivity]
|
||||
cover: messy-papers
|
||||
firstSeen: 2018-03-05T10:17:23+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Fades out the siblings of a hovered item.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Squiggle link hover effect
|
||||
tags: animation,visual
|
||||
type: snippet
|
||||
tags: [animation,visual]
|
||||
author: chalarangelo
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Staggered animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: aerial-view-port
|
||||
firstSeen: 2020-03-16T12:19:05+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
dateModified: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a staggered animation for the elements of a list.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: List with sticky section headings
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
cover: interior-7
|
||||
firstSeen: 2020-08-18T15:44:01+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Creates a list with sticky headings for each section.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Stripes background pattern
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: jars-on-shelf
|
||||
firstSeen: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 2021-01-11T09:51:43+02:00
|
||||
dateModified: 2021-01-11T09:51:43+02:00
|
||||
---
|
||||
|
||||
Creates a stripes background pattern.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Stylized quotation marks
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
cover: coffee-phone-tray
|
||||
firstSeen: 2021-05-16T19:53:02+03:00
|
||||
lastUpdated: 2021-05-16T19:53:02+03:00
|
||||
dateModified: 2021-05-16T19:53:02+03:00
|
||||
---
|
||||
|
||||
Customizes the style of inline quotation marks.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: System font stack
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: lavender-shelf
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Uses the native font of the operating system to get close to a native app feel.
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Image text overlay
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
cover: mountain-lake-cottage
|
||||
firstSeen: 2020-08-18T15:07:32+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Displays a text on top of an image using an overlay.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: 3-tile layout
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: godray-computer-mug
|
||||
firstSeen: 2019-10-02T09:51:59+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Aligns items horizontally using `display: inline-block` to create a 3-tile layout.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Toggle switch
|
||||
tags: visual,interactivity
|
||||
type: snippet
|
||||
tags: [visual,interactivity]
|
||||
cover: interior-5
|
||||
firstSeen: 2018-10-03T08:55:20+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Creates a toggle switch with CSS only.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Transform centering
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: flower-camera
|
||||
firstSeen: 2018-03-30T17:59:28+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Vertically and horizontally centers a child element within its parent element using CSS transforms.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Triangle
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: yellow-white-mug-1
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a triangular shape with pure CSS.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Truncate multiline text
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: blue-computer
|
||||
firstSeen: 2019-01-17T07:42:44+02:00
|
||||
lastUpdated: 2021-01-07T23:52:15+02:00
|
||||
dateModified: 2021-01-07T23:52:15+02:00
|
||||
---
|
||||
|
||||
Truncates text that is longer than one line.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Truncate text
|
||||
tags: layout
|
||||
type: snippet
|
||||
tags: [layout]
|
||||
cover: houses-rock-sea
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Truncates text that is longer than one line, adding an ellipsis at the end (`…`).
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Typewriter effect
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
author: chalarangelo
|
||||
cover: italian-horizon
|
||||
firstSeen: 2021-05-24T16:03:40+03:00
|
||||
lastUpdated: 2021-05-24T16:03:40+03:00
|
||||
dateModified: 2021-05-24T16:03:40+03:00
|
||||
---
|
||||
|
||||
Creates a typewriter effect animation.
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Image gallery with vertical scroll
|
||||
tags: visual,interactivity
|
||||
type: snippet
|
||||
tags: [visual,interactivity]
|
||||
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.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Vertical scroll snap
|
||||
tags: interactivity
|
||||
type: snippet
|
||||
tags: [interactivity]
|
||||
cover: baloons-field
|
||||
firstSeen: 2020-08-18T14:25:46+03:00
|
||||
lastUpdated: 2020-08-18T14:25:46+03:00
|
||||
dateModified: 2020-08-18T14:25:46+03:00
|
||||
---
|
||||
|
||||
Creates a scrollable container that will snap on elements when scrolling.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Zebra striped list
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: forest-balcony
|
||||
firstSeen: 2018-10-31T08:19:06+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
dateModified: 2020-12-30T15:37:37+02:00
|
||||
---
|
||||
|
||||
Creates a striped list with alternating background colors.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Zig zag background pattern
|
||||
tags: visual
|
||||
type: snippet
|
||||
tags: [visual]
|
||||
cover: blue-lake
|
||||
firstSeen: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a zig zag background pattern.
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Zoom in zoom out animation
|
||||
tags: animation
|
||||
type: snippet
|
||||
tags: [animation]
|
||||
cover: travel-mug-2
|
||||
firstSeen: 2020-10-05T21:42:14+03:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
dateModified: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a zoom in zoom out animation.
|
||||
|
||||
Reference in New Issue
Block a user