Select some of this text.
+```
+
+```css
+::selection {
+ background: aquamarine;
+ color: black;
+}
+
+.custom-text-selection::selection {
+ background: deeppink;
+ color: white;
+}
+```
diff --git a/css/snippets/disable-selection.md b/css/snippets/disable-selection.md
new file mode 100644
index 000000000..02084424b
--- /dev/null
+++ b/css/snippets/disable-selection.md
@@ -0,0 +1,23 @@
+---
+title: Disable selection
+type: snippet
+tags: [interactivity]
+cover: interior-9
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Makes the content unselectable.
+
+- Use `user-select: none` to make the content of the element not selectable.
+- **Note:** This is not a secure method to prevent users from copying content.
+
+```html
+You can select me.
+` element.
+- Set `height` and `width` to `100%` to make the element fill the available space within its parent element.
+- Use `display: table-cell` on the child element to make it behave like a `` elements.
+- Use `text-align: center` and `vertical-align: middle` on the child element to center it horizontally and vertically.
+- The outer parent (`.container`) must have a fixed `width` and `height`.
+
+```html
+
+```
+
+```css
+.container {
+ border: 1px solid #9C27B0;
+ height: 250px;
+ width: 250px;
+}
+
+.center {
+ display: table;
+ height: 100%;
+ width: 100%;
+}
+
+.center > span {
+ display: table-cell;
+ text-align: center;
+ vertical-align: middle;
+}
+```
diff --git a/css/snippets/donut-spinner.md b/css/snippets/donut-spinner.md
new file mode 100644
index 000000000..175fe3b6e
--- /dev/null
+++ b/css/snippets/donut-spinner.md
@@ -0,0 +1,37 @@
+---
+title: Donut spinner
+type: snippet
+tags: [animation]
+cover: digital-nomad-3
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a donut spinner that can be used to indicate the loading of content.
+
+- Use a semi-transparent `border` for the whole element. Exclude one side that will serve as the loading indicator for the donut.
+- Define and use an appropriate animation, using `transform: rotate()` to rotate the element.
+
+```html
+
+```
+
+```css
+@keyframes donut-spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.donut {
+ display: inline-block;
+ border: 4px solid rgba(0, 0, 0, 0.1);
+ border-left-color: #7983ff;
+ border-radius: 50%;
+ width: 30px;
+ height: 30px;
+ animation: donut-spin 1.2s linear infinite;
+}
+```
diff --git a/css/snippets/drop-cap.md b/css/snippets/drop-cap.md
new file mode 100644
index 000000000..a5abaa947
--- /dev/null
+++ b/css/snippets/drop-cap.md
@@ -0,0 +1,28 @@
+---
+title: Drop cap
+type: snippet
+tags: [visual]
+cover: bamboo-lamp
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Makes the first letter of the first paragraph bigger than the rest of the text.
+
+- Use the `:first-child` selector to select only the first paragraph.
+- Use the `::first-letter` pseudo-element to style the first element of the paragraph.
+
+```html
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.
+Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.
+```
+
+```css
+p:first-child::first-letter {
+ color: #5f79ff;
+ float: left;
+ margin: 0 8px 0 4px;
+ font-size: 3rem;
+ font-weight: bold;
+ line-height: 1;
+}
+```
diff --git a/css/snippets/dynamic-shadow.md b/css/snippets/dynamic-shadow.md
new file mode 100644
index 000000000..a4ade87f7
--- /dev/null
+++ b/css/snippets/dynamic-shadow.md
@@ -0,0 +1,40 @@
+---
+title: Dynamic shadow
+type: snippet
+tags: [visual]
+cover: couch-laptop
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
+
+- Use the `::after` pseudo-element with `position: absolute` and `width` and `height` equal to `100%` to fill the available space in the parent element.
+- Use `background: inherit` to inherit the `background` of the parent element.
+- Use `top` to slightly offset the pseudo-element, `filter: blur()` to create a shadow and `opacity` to make it semi-transparent.
+- Use `z-index: 1` on the parent and `z-index: -1` on the pseudo-element to position it behind its parent.
+
+```html
+
+```
+
+```css
+.dynamic-shadow {
+ position: relative;
+ width: 10rem;
+ height: 10rem;
+ background: linear-gradient(75deg, #6d78ff, #00ffb8);
+ z-index: 1;
+}
+
+.dynamic-shadow::after {
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background: inherit;
+ top: 0.5rem;
+ filter: blur(0.4rem);
+ opacity: 0.7;
+ z-index: -1;
+}
+```
diff --git a/css/snippets/etched-text.md b/css/snippets/etched-text.md
new file mode 100644
index 000000000..639766083
--- /dev/null
+++ b/css/snippets/etched-text.md
@@ -0,0 +1,26 @@
+---
+title: Etched text
+type: snippet
+tags: [visual]
+cover: memories-of-pineapple-2
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates an effect where text appears to be "etched" or engraved into the background.
+
+- Use `text-shadow` to create a white shadow offset `0px` horizontally and `2px` vertically from the origin position.
+- The background must be darker than the shadow for the effect to work.
+- The text color should be slightly faded to make it look like it's engraved/carved out of the background.
+
+```html
+I appear etched into the background.
+```
+
+```css
+.etched-text {
+ text-shadow: 0 2px white;
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #b8bec5;
+}
+```
diff --git a/css/snippets/evenly-distributed-children.md b/css/snippets/evenly-distributed-children.md
new file mode 100644
index 000000000..41852ad62
--- /dev/null
+++ b/css/snippets/evenly-distributed-children.md
@@ -0,0 +1,28 @@
+---
+title: Evenly distributed children
+type: snippet
+tags: [layout]
+cover: little-bird
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Evenly distributes child elements within a parent element.
+
+- Use `display: flex` to use the flexbox layout.
+- Use `justify-content: space-between` to evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
+- Alternatively, use `justify-content: space-around` to distribute the children with space around them, instead of between them.
+
+```html
+
+
Item1
+
Item2
+
Item3
+
`) to create a layout with two columns.
+- Set headings (``) to `grid-column: 1` and content (` `) to `grid-column: 2`.
+- Finally, apply `position: sticky` and `top: 0.5rem` to headings to create a floating effect.
+
+```html
+
+
+
+ A
+ Algeria
+ Angola
+
+ B
+ Benin
+ Botswana
+ Burkina Faso
+ Burundi
+
+ C
+ Cabo Verde
+ Cameroon
+ Central African Republic
+ Chad
+ Comoros
+ Congo, Democratic Republic of the
+ Congo, Republic of the
+ Cote d'Ivoire
+
+ D
+ Djibouti
+
+ E
+ Egypt
+ Equatorial Guinea
+ Eritrea
+ Eswatini (formerly Swaziland)
+ Ethiopia
+
+
+
Hello World!
+```
+
+```css
+.fluid-type {
+ font-size: clamp(1rem, 8vw - 2rem, 3rem);
+}
+```
diff --git a/css/snippets/focus-within.md b/css/snippets/focus-within.md
new file mode 100644
index 000000000..a8d9fcc82
--- /dev/null
+++ b/css/snippets/focus-within.md
@@ -0,0 +1,42 @@
+---
+title: Focus Within
+type: snippet
+tags: [visual,interactivity]
+cover: boats
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Changes the appearance of a form if any of its children are focused.
+
+- Use the pseudo-class `:focus-within` to apply styles to a parent element if any child element gets focused.
+
+```html
+
+```
+
+```css
+form {
+ border: 2px solid #52B882;
+ padding: 8px;
+ border-radius: 2px;
+}
+
+form:focus-within {
+ background: #7CF0BD;
+}
+
+label {
+ display: inline-block;
+ width: 72px;
+}
+
+input {
+ margin: 4px 12px;
+}
+```
diff --git a/css/snippets/full-width.md b/css/snippets/full-width.md
new file mode 100644
index 000000000..a1a3aaf82
--- /dev/null
+++ b/css/snippets/full-width.md
@@ -0,0 +1,58 @@
+---
+title: Full-width image
+type: snippet
+tags: [layout]
+author: chalarangelo
+cover: yellow-white-mug-2
+dateModified: 2021-01-07T10:14:46+02:00
+---
+
+Creates a full-width image.
+
+- Use `left: 50%` and `right: 50%` to position the image in the middle of the parent element.
+- Use `margin-left: -50vw` and `margin-right: -50vw` to offset the image on both sides relative to the size of the viewport.
+- Use `width: 100vw` and `max-width: 100vw` to size the image relative to the viewport.
+
+```html
+
+ Lorem ipsum dolor sit amet
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
+ lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
+ ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
+ eu, faucibus interdum felis.
+
+
+
+
+ Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+ ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
+ gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
+ eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
+ Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
+
+
+```
+
+```css
+main {
+ margin: 0 auto;
+ max-width: 640px;
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+}
+
+.full-width {
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+ max-width: 100vw;
+ width: 100vw;
+}
+```
diff --git a/css/snippets/fullscreen.md b/css/snippets/fullscreen.md
new file mode 100644
index 000000000..3538ebac5
--- /dev/null
+++ b/css/snippets/fullscreen.md
@@ -0,0 +1,54 @@
+---
+title: Fullscreen
+type: snippet
+tags: [visual]
+cover: flower-portrait-3
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Applies styles to an element when in fullscreen mode.
+
+- Use the `:fullscreen` CSS pseudo-element selector to select and style an element that is displayed in fullscreen mode.
+- Use a `` and `Element.requestFullscreen()` to create a button that makes the element fullscreen for the purposes of previewing the style.
+
+```html
+
+
Click the button below to enter the element into fullscreen mode.
+
I change color in fullscreen mode!
+
+
+ Go Full Screen!
+
+
Gradient text
+```
+
+```css
+.gradient-text {
+ background: linear-gradient(#70D6FF, #00072D);
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ font-size: 32px;
+}
+```
diff --git a/css/snippets/grid-centering.md b/css/snippets/grid-centering.md
new file mode 100644
index 000000000..5e18ea077
--- /dev/null
+++ b/css/snippets/grid-centering.md
@@ -0,0 +1,28 @@
+---
+title: Grid centering
+type: snippet
+tags: [layout]
+cover: work-hard-computer
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Horizontally and vertically centers a child element within a parent element using `grid`.
+
+- Use `display: grid` to create a grid layout.
+- Use `justify-content: center` to center the child horizontally.
+- Use `align-items: center` to center the child vertically.
+
+```html
+
+```
+
+```css
+.grid-centering {
+ display: grid;
+ justify-content: center;
+ align-items: center;
+ height: 100px;
+}
+```
diff --git a/css/snippets/hamburger-button.md b/css/snippets/hamburger-button.md
new file mode 100644
index 000000000..16734bf65
--- /dev/null
+++ b/css/snippets/hamburger-button.md
@@ -0,0 +1,55 @@
+---
+title: Hamburger Button
+type: snippet
+tags: [interactivity]
+cover: volcano-sunset
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Displays a hamburger menu which transitions to a cross button on hover.
+
+- Use a `.hamburger-menu` container `div` which contains the top, bottom, and middle bars.
+- Set the container to `display: flex` with `flex-flow: column wrap`.
+- Add distance between the bars using `justify-content: space-between`.
+- Use `transform: rotate()` to rotate the top and bottom bars by 45 degrees and `opacity: 0` to fade the middle bar on hover.
+- Use `transform-origin: left` so that the bars rotate around the left point.
+
+```html
+
+```
+
+```css
+.hamburger-menu {
+ display: flex;
+ flex-flow: column wrap;
+ justify-content: space-between;
+ height: 2.5rem;
+ width: 2.5rem;
+ cursor: pointer;
+}
+
+.hamburger-menu .bar {
+ height: 5px;
+ background: black;
+ border-radius: 5px;
+ margin: 3px 0px;
+ transform-origin: left;
+ transition: all 0.5s;
+}
+
+.hamburger-menu:hover .top {
+ transform: rotate(45deg);
+}
+
+.hamburger-menu:hover .middle {
+ opacity: 0;
+}
+
+.hamburger-menu:hover .bottom {
+ transform: rotate(-45deg);
+}
+```
diff --git a/css/snippets/height-transition.md b/css/snippets/height-transition.md
new file mode 100644
index 000000000..e06ff5bb8
--- /dev/null
+++ b/css/snippets/height-transition.md
@@ -0,0 +1,41 @@
+---
+title: Height transition
+type: snippet
+tags: [animation]
+cover: washed-ashore
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Transitions an element's height from `0` to `auto` when its height is unknown.
+
+- Use `transition` to specify that changes to `max-height` should be transitioned over.
+- Use `overflow: hidden` to prevent the contents of the hidden element from overflowing its container.
+- Use `max-height` to specify an initial height of `0`.
+- Use the `:hover` pseudo-class to change the `max-height` to the value of the `--max-height` variable set by JavaScript.
+- Use `Element.scrollHeight` and `CSSStyleDeclaration.setProperty()` to set the value of `--max-height` to the current height of the element.
+- **Note:** Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.
+
+```html
+
+ Hover me to see a height transition.
+
Additional content
+
Lorem ipsum dolor sit amet.
+```
+
+```css
+:empty {
+ display: none;
+}
+```
diff --git a/css/snippets/hide-scrollbars.md b/css/snippets/hide-scrollbars.md
new file mode 100644
index 000000000..3a7a35cc3
--- /dev/null
+++ b/css/snippets/hide-scrollbars.md
@@ -0,0 +1,36 @@
+---
+title: Hide scroll bars
+type: snippet
+tags: [visual]
+author: chalarangelo
+cover: by-the-lighthouse
+dateModified: 2022-05-13T05:00:00-04:00
+---
+
+Hides scrollbars on an element, while still allowing it to be scrollable.
+
+- Use `overflow: auto` to allow the element to be scrollable.
+- Use `scrollbar-width: none` to hide scrollbars on Firefox.
+- Use `display: none` on the `::-webkit-scrollbar` pseudo-element to hide scrollbars on WebKit browsers (Chrome, Edge, Safari).
+
+```html
+
+```
+
+```css
+div {
+ width: 200px;
+ height: 100px;
+}
+
+.no-scrollbars {
+ overflow: auto;
+ scrollbar-width: none;
+}
+
+.no-scrollbars::-webkit-scrollbar {
+ display: none;
+}
+```
diff --git a/css/snippets/horizontal-gallery.md b/css/snippets/horizontal-gallery.md
new file mode 100644
index 000000000..33a94bd27
--- /dev/null
+++ b/css/snippets/horizontal-gallery.md
@@ -0,0 +1,124 @@
+---
+title: Image gallery with horizontal scroll
+type: snippet
+tags: [visual,interactivity]
+cover: flower-portrait-5
+dateModified: 2022-05-01T05:00:00-04:00
+---
+
+Creates a horizontally scrollable image gallery.
+
+- Position the `.thumbnails` at the bottom of the container using `position: absolute`.
+- Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll. Snap elements to the start of the container using `scroll-snap-align: start`.
+- Hide scrollbars using `scrollbar-width: none` and styling the pseudo-element `::-webkit-scrollbar` to `display: none`.
+- Use `Element.scrollTo()` to define a `scrollToElement` function, that scrolls the gallery to the given item.
+- Use `Array.prototype.map()` and `Array.prototype.join()` to populate the `.thumbnails` element. Give each thumbnail a `data-id` attribute with the index of the image.
+- Use `Document.querySelectorAll()` to get all the thumbnail elements. Use `Array.prototype.forEach()` to register a handler for the `'click'` event on each thumbnail, using `EventTarget.addEventListener()` and the `scrollToElement` function.
+- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'scroll'` event. Update the `.thumbnails` element to match the current scroll position, using the `highlightThumbnail` function.
+
+```html
+
+```
+
+```css
+.gallery-container {
+ position: relative;
+ display: flex;
+ justify-content: center;
+}
+
+.thumbnails {
+ position: absolute;
+ bottom: 8px;
+ display: flex;
+ flex-direction: row;
+ gap: 6px;
+}
+
+.thumbnails div {
+ width: 8px;
+ height: 8px;
+ cursor: pointer;
+ background: #aaa;
+ border-radius: 100%;
+}
+
+.thumbnails div.highlighted {
+ background-color: #777;
+}
+
+.slides {
+ margin: 0 16px;
+ display: grid;
+ grid-auto-flow: column;
+ gap: 1rem;
+ width: 540px;
+ padding: 0 0.25rem;
+ height: 720px;
+ overflow-y: auto;
+ overscroll-behavior-x: contain;
+ scroll-snap-type: x mandatory;
+ scrollbar-width: none;
+}
+
+.slides > div {
+ scroll-snap-align: start;
+}
+
+.slides img {
+ width: 540px;
+ object-fit: contain;
+}
+
+.slides::-webkit-scrollbar {
+ display: none;
+}
+```
+
+```js
+const slideGallery = document.querySelector('.slides');
+const slides = slideGallery.querySelectorAll('div');
+const thumbnailContainer = document.querySelector('.thumbnails');
+const slideCount = slides.length;
+const slideWidth = 540;
+
+const highlightThumbnail = () => {
+ thumbnailContainer
+ .querySelectorAll('div.highlighted')
+ .forEach(el => el.classList.remove('highlighted'));
+ const index = Math.floor(slideGallery.scrollLeft / slideWidth);
+ thumbnailContainer
+ .querySelector(`div[data-id="${index}"]`)
+ .classList.add('highlighted');
+};
+
+const scrollToElement = el => {
+ const index = parseInt(el.dataset.id, 10);
+ slideGallery.scrollTo(index * slideWidth, 0);
+};
+
+thumbnailContainer.innerHTML += [...slides]
+ .map((slide, i) => `
`)
+ .join('');
+
+thumbnailContainer.querySelectorAll('div').forEach(el => {
+ el.addEventListener('click', () => scrollToElement(el));
+});
+
+slideGallery.addEventListener('scroll', e => highlightThumbnail());
+
+highlightThumbnail();
+```
diff --git a/css/snippets/horizontal-scroll-snap.md b/css/snippets/horizontal-scroll-snap.md
new file mode 100644
index 000000000..a98d54509
--- /dev/null
+++ b/css/snippets/horizontal-scroll-snap.md
@@ -0,0 +1,53 @@
+---
+title: Horizontal scroll snap
+type: snippet
+tags: [interactivity]
+cover: waves-from-above
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a horizontally scrollable container that will snap on elements when scrolling.
+
+- Use `display: grid` and `grid-auto-flow: column` to create a horizontal layout.
+- Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll.
+- Change `scroll-snap-align` to either `start`, `stop` or `center` to change the snap alignment.
+
+```html
+
+```
+
+```css
+.horizontal-snap {
+ margin: 0 auto;
+ display: grid;
+ grid-auto-flow: column;
+ gap: 1rem;
+ height: calc(180px + 1rem);
+ padding: 1rem;
+ max-width: 480px;
+ overflow-y: auto;
+ overscroll-behavior-x: contain;
+ scroll-snap-type: x mandatory;
+}
+
+.horizontal-snap > a {
+ scroll-snap-align: center;
+}
+
+.horizontal-snap img {
+ width: 180px;
+ max-width: none;
+ object-fit: contain;
+ border-radius: 1rem;
+}
+```
diff --git a/css/snippets/hover-additional-content.md b/css/snippets/hover-additional-content.md
new file mode 100644
index 000000000..b9d76e1b1
--- /dev/null
+++ b/css/snippets/hover-additional-content.md
@@ -0,0 +1,75 @@
+---
+title: Show additional content on hover
+type: snippet
+tags: [visual]
+cover: dark-leaves-5
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a card that displays additional content on hover.
+
+- Use `overflow: hidden` on the card to hide elements that overflow vertically.
+- Use the `:hover` and `:focus-within` pseudo-class selectors to change the card's styling if the element is hovered, focused or any of its descendants are focused.
+- Set `transition: 0.3s ease all` to create a transition effect on hover/focus.
+
+
+```html
+
+
+
Lorem ipsum
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Link to source
+
+
+
Box it!
+```
+
+```css
+.hover-shadow-box-animation {
+ display: inline-block;
+ vertical-align: middle;
+ transform: perspective(1px) translateZ(0);
+ box-shadow: 0 0 1px transparent;
+ margin: 10px;
+ transition-duration: 0.3s;
+ transition-property: box-shadow, transform;
+}
+
+.hover-shadow-box-animation:hover,
+.hover-shadow-box-animation:focus,
+.hover-shadow-box-animation:active {
+ box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
+ transform: scale(1.2);
+}
+```
diff --git a/css/snippets/hover-underline-animation.md b/css/snippets/hover-underline-animation.md
new file mode 100644
index 000000000..ce1c07671
--- /dev/null
+++ b/css/snippets/hover-underline-animation.md
@@ -0,0 +1,46 @@
+---
+title: Hover underline animation
+type: snippet
+tags: [animation]
+cover: coffee-phone-tray-2
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates an animated underline effect when the user hovers over the text.
+
+- Use `display: inline-block` to make the underline span just the width of the text content.
+- Use the `::after` pseudo-element with `width: 100%` and `position: absolute` to place it below the content.
+- Use `transform: scaleX(0)` to initially hide the pseudo-element.
+- Use the `:hover` pseudo-class selector to apply `transform: scaleX(1)` and display the pseudo-element on hover.
+- Animate `transform` using `transform-origin: left` and an appropriate `transition`.
+- Remove the `transform-origin` property to make the transform originate from the center of the element.
+
+```html
+Hover this text to see the effect!
+```
+
+```css
+.hover-underline-animation {
+ display: inline-block;
+ position: relative;
+ color: #0087ca;
+}
+
+.hover-underline-animation::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #0087ca;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+.hover-underline-animation:hover::after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+```
diff --git a/css/snippets/image-hover-menu.md b/css/snippets/image-hover-menu.md
new file mode 100644
index 000000000..e550c0468
--- /dev/null
+++ b/css/snippets/image-hover-menu.md
@@ -0,0 +1,92 @@
+---
+title: Menu on image hover
+type: snippet
+tags: [layout,animation]
+cover: compass
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Displays a menu overlay when the user hovers over the image.
+
+- Use a `` to wrap the `` element that will contain the menu links.
+- Use the `opacity` and `right` attributes to animate the image on hover, creating a sliding effect.
+- Set the `left` attribute of the `
` to the negative of the element's `width`. Reset it to `0` when hovering over the parent element to slide in the menu.
+- Use `display: flex`, `flex-direction: column` and `justify-content: center` on the `
` to vertically center the menu items.
+
+```html
+
+```
+
+```css
+.hover-menu {
+ position: relative;
+ overflow: hidden;
+ margin: 8px;
+ min-width: 340px;
+ max-width: 480px;
+ max-height: 290px;
+ width: 100%;
+ background: #000;
+ text-align: center;
+ box-sizing: border-box;
+}
+
+.hover-menu * {
+ box-sizing: border-box;
+}
+
+.hover-menu img {
+ position: relative;
+ max-width: 100%;
+ top: 0;
+ right: 0;
+ opacity: 1;
+ transition: 0.3s ease-in-out;
+}
+
+.hover-menu div {
+ position: absolute;
+ top: 0;
+ left: -120px;
+ width: 120px;
+ height: 100%;
+ padding: 8px 4px;
+ background: #000;
+ transition: 0.3s ease-in-out;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.hover-menu div a {
+ display: block;
+ line-height: 2;
+ color: #fff;
+ text-decoration: none;
+ opacity: 0.8;
+ padding: 5px 15px;
+ position: relative;
+ transition: 0.3s ease-in-out;
+}
+
+.hover-menu div a:hover {
+ text-decoration: underline;
+}
+
+.hover-menu:hover img {
+ opacity: 0.5;
+ right: -120px;
+}
+
+.hover-menu:hover div {
+ left: 0;
+ opacity: 1;
+}
+```
diff --git a/css/snippets/image-hover-rotate.md b/css/snippets/image-hover-rotate.md
new file mode 100644
index 000000000..904414c34
--- /dev/null
+++ b/css/snippets/image-hover-rotate.md
@@ -0,0 +1,38 @@
+---
+title: Image rotate on hover
+type: snippet
+tags: [animation,visual]
+cover: succulent-1
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a rotate effect for the image on hover.
+
+- Use the `scale()`, `rotate()` and `transition` properties when hovering over the parent element (a `
`) to animate the image.
+- Use `overflow: hidden` on the parent element to hide the excess from the image transformation.
+
+```html
+
+
+```
+
+```css
+.hover-rotate {
+ overflow: hidden;
+ margin: 8px;
+ min-width: 240px;
+ max-width: 320px;
+ width: 100%;
+}
+
+.hover-rotate img {
+ transition: all 0.3s;
+ box-sizing: border-box;
+ max-width: 100%;
+}
+
+.hover-rotate:hover img {
+ transform: scale(1.3) rotate(5deg);
+}
+```
diff --git a/css/snippets/image-mosaic.md b/css/snippets/image-mosaic.md
new file mode 100644
index 000000000..a12f8676d
--- /dev/null
+++ b/css/snippets/image-mosaic.md
@@ -0,0 +1,107 @@
+---
+title: Responsive image mosaic
+type: snippet
+tags: [layout]
+author: chalarangelo
+cover: beach-riders
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a responsive image mosaic.
+
+- Use `display: grid` to create an appropriate responsive grid layout.
+- Use `grid-row: span 2 / auto` and `grid-column: span 2 / auto` to create items that span two rows or two columns respectively.
+- Wrap the previous styles into a media query to avoid applying on small screen sizes.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
` for the text of the overlay. Set `display: flex`, `flex-direction: column` and `justify-content: center` to center the text into the image.
+- Use the `:hover` pseudo-selector to update the `opacity` and `transform` of all the elements and display the overlay.
+
+```html
+
+
+ Lorem
+
+
+```
+
+```css
+.hover-img {
+ background-color: #000;
+ color: #fff;
+ display: inline-block;
+ margin: 8px;
+ max-width: 320px;
+ min-width: 240px;
+ overflow: hidden;
+ position: relative;
+ text-align: center;
+ width: 100%;
+}
+
+.hover-img * {
+ box-sizing: border-box;
+ transition: all 0.45s ease;
+}
+
+.hover-img::before,
+.hover-img::after {
+ background-color: rgba(0, 0, 0, 0.5);
+ border-top: 32px solid rgba(0, 0, 0, 0.5);
+ border-bottom: 32px solid rgba(0, 0, 0, 0.5);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ content: '';
+ transition: all 0.3s ease;
+ z-index: 1;
+ opacity: 0;
+ transform: scaleY(2);
+}
+
+.hover-img img {
+ vertical-align: top;
+ max-width: 100%;
+ backface-visibility: hidden;
+}
+
+.hover-img figcaption {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ align-items: center;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ line-height: 1.1em;
+ opacity: 0;
+ z-index: 2;
+ transition-delay: 0.1s;
+ font-size: 24px;
+ font-family: sans-serif;
+ font-weight: 400;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+}
+
+.hover-img:hover::before,
+.hover-img:hover::after {
+ transform: scale(1);
+ opacity: 1;
+}
+
+.hover-img:hover > img {
+ opacity: 0.7;
+}
+
+.hover-img:hover figcaption {
+ opacity: 1;
+}
+```
diff --git a/css/snippets/image-text-overlay.md b/css/snippets/image-text-overlay.md
new file mode 100644
index 000000000..e48f3cce1
--- /dev/null
+++ b/css/snippets/image-text-overlay.md
@@ -0,0 +1,56 @@
+---
+title: Image with text overlay
+type: snippet
+tags: [visual]
+author: chalarangelo
+cover: icebreaker
+dateModified: 2023-01-29T05:00:00-04:00
+---
+
+Displays an image with a text overlay.
+
+- Use the `` and `` elements to display the image and the text overlay respectively.
+- Use a `linear-gradient` to create the overlay effect over the image.
+
+```html
+
+
+ Business
+
+
+```
+
+```css
+.text-overlay-image {
+ box-sizing: border-box;
+ position: relative;
+ margin: 8px;
+ max-width: 400px;
+ max-height: 400px;
+ width: 100%;
+}
+
+.text-overlay-image figcaption {
+ box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
+ color: #fff;
+ padding: 16px;
+ font-family: sans-serif;
+ font-weight: 700;
+ line-height: 1.2;
+ font-size: 28px;
+}
+
+.text-overlay-image figcaption h3 {
+ margin: 0;
+}
+```
diff --git a/css/snippets/input-with-prefix.md b/css/snippets/input-with-prefix.md
new file mode 100644
index 000000000..9d865f149
--- /dev/null
+++ b/css/snippets/input-with-prefix.md
@@ -0,0 +1,53 @@
+---
+title: Input with prefix
+type: snippet
+tags: [interactivity,visual]
+cover: flower-portrait-4
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates an input with a visual, non-editable prefix.
+
+- Use `display: flex` to create a container element.
+- Remove the border and outline from the `
+ +30
+
+```
+
+```css
+.input-box {
+ display: flex;
+ align-items: center;
+ max-width: 300px;
+ background: #fff;
+ border: 1px solid #a0a0a0;
+ border-radius: 4px;
+ padding-left: 0.5rem;
+ overflow: hidden;
+ font-family: sans-serif;
+}
+
+.input-box .prefix {
+ font-weight: 300;
+ font-size: 14px;
+ color: #999;
+}
+
+.input-box input {
+ flex-grow: 1;
+ font-size: 14px;
+ background: #fff;
+ border: none;
+ outline: none;
+ padding: 0.5rem;
+}
+
+.input-box:focus-within {
+ border-color: #777;
+}
+```
diff --git a/css/snippets/isometric-card.md b/css/snippets/isometric-card.md
new file mode 100644
index 000000000..e98973b4c
--- /dev/null
+++ b/css/snippets/isometric-card.md
@@ -0,0 +1,39 @@
+---
+title: Isometric card
+type: snippet
+tags: [visual]
+author: chalarangelo
+cover: guitar-living-room
+dateModified: 2021-05-17T14:04:52+03:00
+---
+
+Creates an isometric card.
+
+- Use `transform` with `rotateX()` and `rotateY()` as well as a `box-shadow` to create an isometric card.
+- Use `transition` to animate the card, creating a lift effect when the user hovers over it.
+
+```html
+
+```
+
+```css
+.isometric-card {
+ margin: 0 auto;
+ transform: rotateX(51deg) rotateZ(43deg);
+ transform-style: preserve-3d;
+ background-color: #fcfcfc;
+ will-change: transform;
+ width: 240px;
+ height: 320px;
+ border-radius: 2rem;
+ box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01),
+ 28px 28px 28px 0 rgba(34, 33, 81, 0.25);
+ transition: 0.4s ease-in-out transform, 0.3s ease-in-out box-shadow;
+}
+
+.isometric-card:hover {
+ transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
+ box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01),
+ 54px 54px 28px -10px rgba(34, 33, 81, 0.15);
+}
+```
diff --git a/css/snippets/line-clamp.md b/css/snippets/line-clamp.md
new file mode 100644
index 000000000..cd05c6f93
--- /dev/null
+++ b/css/snippets/line-clamp.md
@@ -0,0 +1,29 @@
+---
+title: Trim multiline text
+type: snippet
+tags: [layout,visual]
+author: chalarangelo
+cover: pink-flower-tree
+dateModified: 2021-05-16T20:19:13+03:00
+---
+
+Limit multiline text to a given number of lines.
+
+- Use `-webkit-line-clamp` to set the maximum number of lines to be displayed.
+- Set `display` to `-webkit-box` and `-webkit-box-orient` to `vertical`, as they are required for `-webkit-line-clamp` to be applied.
+- Apply `overflow: hidden` to hide any overflow after the text is trimmed.
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at, feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat, lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla ultrices dui turpis, interdum consectetur urna tempus at.
+
+```
+
+```css
+.excerpt {
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+```
diff --git a/css/snippets/masonry-layout.md b/css/snippets/masonry-layout.md
new file mode 100644
index 000000000..d503978a1
--- /dev/null
+++ b/css/snippets/masonry-layout.md
@@ -0,0 +1,96 @@
+---
+title: Masonry Layout
+type: snippet
+tags: [layout]
+cover: interior-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a masonry-style layout that is especially useful when working with images.
+
+- Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed `width` (vertical layout) or a fixed `height` (horizontal layout), forming a perfect fit. Especially useful when working with images.
+- Define `.masonry-container` This is the container for the masonry layout and `.masonry-columns`, an inner container in which `.masonry-brick` elements will be placed.
+- Apply `display: block` to `.masonry-brick` elements to allow the layout to flow properly.
+- Use the `:first-child` pseudo-element selector to apply a different `margin` for the first element to account for its positioning.
+- Use CSS variables and media queries for greater flexibility and responsiveness.
+
+```html
+
+```
+
+```css
+/* Container */
+.masonry-container {
+ --column-count-small: 1;
+ --column-count-medium: 2;
+ --column-count-large: 3;
+ --column-gap: 0.125rem;
+ padding: var(--column-gap);
+}
+
+/* Columns */
+.masonry-columns {
+ column-gap: var(--column-gap);
+ column-count: var(--column-count-small);
+ column-width: calc(1 / var(--column-count-small) * 100%);
+}
+
+@media only screen and (min-width: 640px) {
+ .masonry-columns {
+ column-count: var(--column-count-medium);
+ column-width: calc(1 / var(--column-count-medium) * 100%);
+ }
+}
+
+@media only screen and (min-width: 800px) {
+ .masonry-columns {
+ column-count: var(--column-count-large);
+ column-width: calc(1 / var(--column-count-large) * 100%);
+ }
+}
+
+/* Bricks */
+.masonry-brick {
+ width: 100%;
+ height: auto;
+ margin: var(--column-gap) 0;
+ display: block;
+}
+
+.masonry-brick:first-child {
+ margin: 0 0 var(--column-gap);
+}
+```
diff --git a/css/snippets/mouse-cursor-gradient-tracking.md b/css/snippets/mouse-cursor-gradient-tracking.md
new file mode 100644
index 000000000..fe4faf614
--- /dev/null
+++ b/css/snippets/mouse-cursor-gradient-tracking.md
@@ -0,0 +1,67 @@
+---
+title: Mouse cursor gradient tracking
+type: snippet
+tags: [visual,interactivity]
+cover: tram-car
+dateModified: 2021-01-07T23:52:15+02:00
+---
+
+A hover effect where the gradient follows the mouse cursor.
+
+- Declare two CSS variables, `--x` and `--y`, used to track the position of the mouse on the button.
+- Declare a CSS variable, `--size`, used to modify the gradient's dimensions.
+- Use `background: radial-gradient(circle closest-side, pink, transparent)` to create the gradient at the correct position.
+- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'mousemove'` event.
+- Use `Element.getBoundingClientRect()` and `CSSStyleDeclaration.setProperty()` to update the values of the `--x` and `--y` CSS variables.
+
+```html
+
+ Hover me
+
+```
+
+```css
+.mouse-cursor-gradient-tracking {
+ position: relative;
+ background: #7983ff;
+ padding: 0.5rem 1rem;
+ font-size: 1.2rem;
+ border: none;
+ color: white;
+ cursor: pointer;
+ outline: none;
+ overflow: hidden;
+}
+
+.mouse-cursor-gradient-tracking span {
+ position: relative;
+}
+
+.mouse-cursor-gradient-tracking::before {
+ --size: 0;
+ content: '';
+ position: absolute;
+ left: var(--x);
+ top: var(--y);
+ width: var(--size);
+ height: var(--size);
+ background: radial-gradient(circle closest-side, pink, transparent);
+ transform: translate(-50%, -50%);
+ transition: width 0.2s ease, height 0.2s ease;
+}
+
+.mouse-cursor-gradient-tracking:hover::before {
+ --size: 200px;
+}
+```
+
+```js
+let btn = document.querySelector('.mouse-cursor-gradient-tracking');
+btn.addEventListener('mousemove', e => {
+ let rect = e.target.getBoundingClientRect();
+ let x = e.clientX - rect.left;
+ let y = e.clientY - rect.top;
+ btn.style.setProperty('--x', x + 'px');
+ btn.style.setProperty('--y', y + 'px');
+});
+```
diff --git a/css/snippets/navigation-list-item-hover-and-focus-effect.md b/css/snippets/navigation-list-item-hover-and-focus-effect.md
new file mode 100644
index 000000000..8a429134b
--- /dev/null
+++ b/css/snippets/navigation-list-item-hover-and-focus-effect.md
@@ -0,0 +1,64 @@
+---
+title: Navigation list item hover and focus effect
+type: snippet
+tags: [visual]
+cover: cloudy-rock-formation
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a custom hover and focus effect for navigation items, using CSS transformations.
+
+- Use the `::before` pseudo-element at the list item anchor to create a hover effect. Hide it using `transform: scale(0)`.
+- Use the `:hover` and `:focus` pseudo-class selectors to transition the pseudo-element to `transform: scale(1)` and show its colored background.
+- Prevent the pseudo-element from covering the anchor element by using `z-index`.
+
+```html
+
+
+
+```
+
+```css
+.hover-nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+.hover-nav li {
+ float: left;
+}
+
+.hover-nav li a {
+ position: relative;
+ display: block;
+ color: #fff;
+ text-align: center;
+ padding: 8px 12px;
+ text-decoration: none;
+ z-index: 0;
+}
+
+li a::before {
+ position: absolute;
+ content: "";
+ width: 100%;
+ height: 100%;
+ bottom: 0;
+ left: 0;
+ background-color: #2683f6;
+ z-index: -1;
+ transform: scale(0);
+ transition: transform 0.5s ease-in-out;
+}
+
+li a:hover::before,
+li a:focus::before {
+ transform: scale(1);
+}
+```
diff --git a/css/snippets/offscreen.md b/css/snippets/offscreen.md
new file mode 100644
index 000000000..d79379856
--- /dev/null
+++ b/css/snippets/offscreen.md
@@ -0,0 +1,34 @@
+---
+title: Offscreen
+type: snippet
+tags: [layout,visual]
+cover: succulent-2
+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.
+
+- Remove all borders and padding and hide the element's overflow.
+- Use `clip` to define that no part of the element is shown.
+- Make the `height` and `width` of the element `1px` and negate them using `margin: -1px`.
+- Use `position: absolute` so that the element does not take up space in the DOM.
+- **Note:** This technique provides an accessible and layout-friendly alternative to `display: none` (not readable by screen readers) and `visibility: hidden` (takes up physical space in the DOM).
+
+```html
+
+ Learn More about pants
+
+```
+
+```css
+.offscreen {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+```
diff --git a/css/snippets/overflow-scroll-gradient.md b/css/snippets/overflow-scroll-gradient.md
new file mode 100644
index 000000000..5d4e2b4ad
--- /dev/null
+++ b/css/snippets/overflow-scroll-gradient.md
@@ -0,0 +1,53 @@
+---
+title: Overflow scroll gradient
+type: snippet
+tags: [visual]
+cover: memories-of-pineapple-1
+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.
+
+- Use the `::after` pseudo-element to create a `linear-gradient()` that fades from `transparent` to `white` (top to bottom).
+- Use `position: absolute`, `width` and `height` to place and size the pseudo-element in its parent.
+- Use `pointer-events: none` to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive.
+
+```html
+
+```
+
+```css
+.overflow-scroll-gradient {
+ position: relative;
+}
+
+.overflow-scroll-gradient::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ width: 250px;
+ height: 25px;
+ background: linear-gradient(transparent, white);
+ pointer-events: none;
+}
+
+.overflow-scroll-gradient-scroller {
+ overflow-y: scroll;
+ background: white;
+ width: 240px;
+ height: 200px;
+ padding: 15px;
+ line-height: 1.2;
+}
+```
diff --git a/css/snippets/polka-dot-pattern.md b/css/snippets/polka-dot-pattern.md
new file mode 100644
index 000000000..723dc5532
--- /dev/null
+++ b/css/snippets/polka-dot-pattern.md
@@ -0,0 +1,31 @@
+---
+title: Polka dot background pattern
+type: snippet
+tags: [visual]
+cover: bag-waiting
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a polka dot background pattern.
+
+- Use `background-color` to set a black background.
+- Use `background-image` with two `radial-gradient()` values to create two dots.
+- Use `background-size` to specify the pattern's size. Use `background-position` to appropriately place the two gradients.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+
+```
+
+```css
+.polka-dot {
+ width: 240px;
+ height: 240px;
+ background-color: #000;
+ background-image: radial-gradient(#fff 10%, transparent 11%),
+ radial-gradient(#fff 10%, transparent 11%);
+ background-size: 60px 60px;
+ background-position: 0 0, 30px 30px;
+ background-repeat: repeat;
+}
+```
diff --git a/css/snippets/popout-menu.md b/css/snippets/popout-menu.md
new file mode 100644
index 000000000..8443aa2c4
--- /dev/null
+++ b/css/snippets/popout-menu.md
@@ -0,0 +1,43 @@
+---
+title: Popout menu
+type: snippet
+tags: [interactivity]
+cover: city-view
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Reveals an interactive popout menu on hover/focus.
+
+- Use `left: 100%` to move the popout menu to the right of the parent.
+- Use `visibility: hidden` to hide the popout menu initially, allowing for transitions to be applied (unlike `display: none`).
+- Use the `:hover`, `:focus` and `:focus-within` pseudo-class selectors to apply `visibility: visible` to the popout menu, displaying it when the parent element is hovered/focused.
+
+```html
+
+
+
+```
+
+```css
+.reference {
+ position: relative;
+ background: tomato;
+ width: 100px;
+ height: 80px;
+}
+
+.popout-menu {
+ position: absolute;
+ visibility: hidden;
+ left: 100%;
+ background: #9C27B0;
+ color: white;
+ padding: 16px;
+}
+
+.reference:hover > .popout-menu,
+.reference:focus > .popout-menu,
+.reference:focus-within > .popout-menu {
+ visibility: visible;
+}
+```
diff --git a/css/snippets/pretty-text-underline.md b/css/snippets/pretty-text-underline.md
new file mode 100644
index 000000000..cb932f514
--- /dev/null
+++ b/css/snippets/pretty-text-underline.md
@@ -0,0 +1,44 @@
+---
+title: Pretty text underline
+type: snippet
+tags: [visual]
+cover: flower-portrait-6
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline.
+
+- Use `text-shadow` to apply 4 values with offsets covering a 4x4 `px` area. This ensures the underline has a thick shadow that covers the line where descenders clip it. For best results, use a color that matches the `background` and adjust the `px` values for larger fonts.
+- Use `background-image` with `linear-gradient()` and `currentColor` to create a gradient that will act as the actual underline.
+- Set `background-position`, `background-repeat` and `background-size` to place the gradient in the correct position.
+- Use the `::selection` pseudo-class selector to ensure the text shadow does not interfere with text selection.
+- **Note:** This is natively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline.
+
+```html
+
+
Pretty text underline without clipping descenders.
+
` elements have no `width` or `height` and are positioned at the center. At the end (`100%`), both `
` elements have increased `width` and `height`, but their `position` is reset to `0`.
+- Use `opacity` to transition from `1` to `0` when animating to give the `
` elements a disappearing effect as they expand.
+- Set a predefined `width` and `height` for the parent container, `.ripple-loader` and use `position: relative` to position its children.
+- Use `animation-delay` on the second `
` element, so that each element starts its animation at a different time.
+
+```html
+
+```
+
+```css
+.ripple-loader {
+ position: relative;
+ width: 64px;
+ height: 64px;
+}
+
+.ripple-loader div {
+ position: absolute;
+ border: 4px solid #454ADE;
+ border-radius: 50%;
+ animation: ripple-loader 1s ease-out infinite;
+}
+
+.ripple-loader div:nth-child(2) {
+ animation-delay: -0.5s;
+}
+
+@keyframes ripple-loader {
+ 0% {
+ top: 32px;
+ left: 32px;
+ width: 0;
+ height: 0;
+ opacity: 1;
+ }
+ 100% {
+ top: 0;
+ left: 0;
+ width: 64px;
+ height: 64px;
+ opacity: 0;
+ }
+}
+```
diff --git a/css/snippets/reset-all-styles.md b/css/snippets/reset-all-styles.md
new file mode 100644
index 000000000..697a619c7
--- /dev/null
+++ b/css/snippets/reset-all-styles.md
@@ -0,0 +1,29 @@
+---
+title: Reset all styles
+type: snippet
+tags: [visual]
+cover: rocky-beach-2
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Resets all styles to default values using only one property.
+
+- Use the `all` property to reset all styles (inherited or not) to their default values.
+- **Note:** This will not affect `direction` and `unicode-bidi` properties.
+
+```html
+
+
Title
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id
+ exercitationem nulla qui repellat laborum vitae, molestias tempora velit
+ natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
+
+
+```
+
+```css
+.reset-all-styles {
+ all: initial;
+}
+```
diff --git a/css/snippets/responsive-layout-sidebar.md b/css/snippets/responsive-layout-sidebar.md
new file mode 100644
index 000000000..6e9530cb3
--- /dev/null
+++ b/css/snippets/responsive-layout-sidebar.md
@@ -0,0 +1,46 @@
+---
+title: Responsive layout with sidebar
+type: snippet
+tags: [layout]
+author: chalarangelo
+cover: red-petals
+dateModified: 2020-09-16T18:54:56+03:00
+---
+
+Creates a responsive layout with a content area and a sidebar.
+
+- Use `display: grid` on the parent container, to create a grid layout.
+- Use `minmax()` for the second column (sidebar) to allow it to take up between `150px` and `20%`.
+- Use `1fr` for the first column (main content) to take up the rest of the remaining space.
+
+```html
+
+
+ This element is 1fr large.
+
+
+ Min: 150px / Max: 20%
+
+
+```
+
+```css
+.container {
+ display: grid;
+ grid-template-columns: 1fr minmax(150px, 20%);
+ height: 100px;
+}
+
+main, aside {
+ padding: 12px;
+ text-align: center;
+}
+
+main {
+ background: #d4f2c4;
+}
+
+aside {
+ background: #81cfd9;
+}
+```
diff --git a/css/snippets/rotating-card.md b/css/snippets/rotating-card.md
new file mode 100644
index 000000000..eede2b63e
--- /dev/null
+++ b/css/snippets/rotating-card.md
@@ -0,0 +1,69 @@
+---
+title: Rotating Card
+type: snippet
+tags: [animation]
+cover: digital-nomad-11
+dateModified: 2021-03-30T15:24:01+03:00
+---
+
+Creates a two sided card which rotates on hover.
+
+- Set the `backface-visibility` of the cards to none.
+- Initially, set `rotateY()` for the back side of the card to `-180deg` and the front side to `0deg`.
+- Upon hover, set `rotateY()` for the front side to `180deg` and backside to `0deg`.
+- Set the appropriate `perspective` value to create the rotate effect.
+
+```html
+
+```
+
+```css
+.card {
+ perspective: 150rem;
+ position: relative;
+ height: 40rem;
+ max-width: 400px;
+ margin: 2rem;
+ box-shadow: none;
+ background: none;
+}
+
+.card-side {
+ height: 35rem;
+ border-radius: 15px;
+ transition: all 0.8s ease;
+ backface-visibility: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 80%;
+ padding: 2rem;
+ color: white;
+}
+
+.card-side.back {
+ transform: rotateY(-180deg);
+ background-color: #4158D0;
+ background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);
+}
+
+.card-side.front {
+ background-color: #0093E9;
+ background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
+}
+
+.card:hover .card-side.front {
+ transform: rotateY(180deg);
+}
+
+.card:hover .card-side.back {
+ transform: rotateY(0deg);
+}
+```
diff --git a/css/snippets/scroll-progress-bar.md b/css/snippets/scroll-progress-bar.md
new file mode 100644
index 000000000..8cecdd5c7
--- /dev/null
+++ b/css/snippets/scroll-progress-bar.md
@@ -0,0 +1,44 @@
+---
+title: Scroll progress bar
+type: snippet
+tags: [animation,visual]
+author: chalarangelo
+cover: coworking-space
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a progress bar indicating the scroll percentage of the page.
+
+- Use `position: fixed` and a large `z-index` value to place the element at the top of the page and above any content.
+- Use `EventTarget.addEventListener()` and `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element.
+
+```html
+
+```
+
+```css
+body {
+ min-height: 200vh;
+}
+
+#scroll-progress {
+ position: fixed;
+ top: 0;
+ width: 0%;
+ height: 4px;
+ background: #7983ff;
+ z-index: 10000;
+}
+```
+
+```js
+const scrollProgress = document.getElementById('scroll-progress');
+const height =
+ document.documentElement.scrollHeight - document.documentElement.clientHeight;
+
+window.addEventListener('scroll', () => {
+ const scrollTop =
+ document.body.scrollTop || document.documentElement.scrollTop;
+ scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
+});
+```
diff --git a/css/snippets/shake-invalid-input.md b/css/snippets/shake-invalid-input.md
new file mode 100644
index 000000000..499048f1f
--- /dev/null
+++ b/css/snippets/shake-invalid-input.md
@@ -0,0 +1,39 @@
+---
+title: Shake on invalid input
+type: snippet
+tags: [animation]
+cover: perfect-timing
+dateModified: 2022-07-31T18:30:11+03:00
+---
+
+Creates a shake animation on invalid input.
+
+- Use the `pattern` attribute to define the regular expression which the input's value must match.
+- Use `@keyframes` to define a shake animation, using the `margin-left` property.
+- Use the `:invalid` pseudo-class to apply an `animation` to make the element shake.
+
+```html
+
+```
+
+```css
+@keyframes shake {
+ 0% {
+ margin-left: 0rem;
+ }
+ 25% {
+ margin-left: 0.5rem;
+ }
+ 75% {
+ margin-left: -0.5rem;
+ }
+ 100% {
+ margin-left: 0rem;
+ }
+}
+
+input:invalid {
+ animation: shake 0.2s ease-in-out 0s 2;
+ box-shadow: 0 0 0.6rem #ff0000;
+}
+```
diff --git a/css/snippets/shape-separator.md b/css/snippets/shape-separator.md
new file mode 100644
index 000000000..3ef7e1024
--- /dev/null
+++ b/css/snippets/shape-separator.md
@@ -0,0 +1,35 @@
+---
+title: Shape separator
+type: snippet
+tags: [visual]
+unlisted: true
+cover: shapes
+dateModified: 2021-01-04T12:30:40+02:00
+---
+
+Uses an SVG shape to create a separator between two different blocks.
+
+- Use the `::after` pseudo-element to create the separator element.
+- Use `background-image` to add the SVG (a 24x12 triangle) shape via a data URI. The background image will repeat by default, covering the whole area of the pseudo-element.
+- Use the `background` of the parent element to set the desired color for the separator.
+
+```html
+
+```
+
+```css
+.shape-separator {
+ position: relative;
+ height: 48px;
+ background: #9C27B0;
+}
+
+.shape-separator::after {
+ content: '';
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
+ position: absolute;
+ width: 100%;
+ height: 12px;
+ bottom: 0;
+}
+```
diff --git a/css/snippets/shifting-card.md b/css/snippets/shifting-card.md
new file mode 100644
index 000000000..b50e997bd
--- /dev/null
+++ b/css/snippets/shifting-card.md
@@ -0,0 +1,78 @@
+---
+title: Shifting Card
+type: snippet
+tags: [animation]
+author: chalarangelo
+cover: clouds-n-mountains
+dateModified: 2022-12-14T05:00:00-04:00
+---
+
+Creates a card that shifts on hover.
+
+- Set the appropriate `perspective` on the `.container` element to allow for the shifting effect.
+- Add a `transition` for the `transform` property of the `.card` element.
+- Use `Document.querySelector()` to select the `.card` element and add event listeners for the `mousemove` and `mouseout` events.
+- Use `Element.getBoundingClientRect()` to get the `x`, `y`, `width`, and `height` of the `.card` element.
+- Calculate the relative distance as a value between `-1` and `1` for the `x` and `y` axes and apply it through the `transform` property.
+
+```html
+
+
+
+
Card
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?
+
+
+
+```
+
+```css
+.container {
+ display: flex;
+ padding: 24px;
+ justify-content: center;
+ align-items: center;
+ background: #f3f1fe;
+}
+
+.shifting-card {
+ width: 350px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: #fff;
+ border-radius: 10px;
+ margin: 0.5rem;
+ transition: transform 0.2s ease-out;
+ box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
+}
+
+.shifting-card .content {
+ text-align: center;
+ margin: 2rem;
+ line-height: 1.5;
+ color: #101010;
+}
+```
+
+```js
+const card = document.querySelector('.shifting-card');
+const { x, y, width, height } = card.getBoundingClientRect();
+const cx = x + width / 2;
+const cy = y + height / 2;
+
+const handleMove = e => {
+ const { pageX, pageY } = e;
+ const dx = (cx - pageX) / (width / 2);
+ const dy = (cy - pageY) / (height / 2);
+ e.target.style.transform =
+ `rotateX(${10 * dy * -1}deg) rotateY(${10 * dx}deg)`;
+};
+
+const handleOut = e => {
+ e.target.style.transform = 'initial';
+};
+
+card.addEventListener('mousemove', handleMove);
+card.addEventListener('mouseout', handleOut);
+```
diff --git a/css/snippets/sibling-fade.md b/css/snippets/sibling-fade.md
new file mode 100644
index 000000000..08348719c
--- /dev/null
+++ b/css/snippets/sibling-fade.md
@@ -0,0 +1,30 @@
+---
+title: Sibling fade
+type: snippet
+tags: [interactivity]
+cover: messy-papers
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Fades out the siblings of a hovered item.
+
+- Use a `transition` to animate changes to `opacity`.
+- Use the `:hover` and `:not` pseudo-class selectors to change the `opacity` of all elements except for the one the mouse is over to `0.5`.
+
+```html
+
+ Item 1 Item 2 Item 3
+ Item 4 Item 5 Item 6
+
+```
+
+```css
+span {
+ padding: 0 16px;
+ transition: opacity 0.3s;
+}
+
+.sibling-fade:hover span:not(:hover) {
+ opacity: 0.5;
+}
+```
diff --git a/css/snippets/squiggle-link-hover-effect.md b/css/snippets/squiggle-link-hover-effect.md
new file mode 100644
index 000000000..c53fa8f8b
--- /dev/null
+++ b/css/snippets/squiggle-link-hover-effect.md
@@ -0,0 +1,33 @@
+---
+title: Squiggle link hover effect
+type: snippet
+tags: [animation,visual]
+author: chalarangelo
+cover: dreamy-flowers
+dateModified: 2023-01-10T05:00:00-04:00
+---
+
+Creates a squiggle effect when hovering over a link.
+
+- Create a repeating background for the link using a `linear-gradient`.
+- Create a `:hover` state for the link with a `background-image` of a data URL containing an SVG with a squiggly path and an animation.
+
+```html
+
The magnificent octopus swam along gracefully.
+```
+
+```css
+a.squiggle {
+ background: linear-gradient(to bottom, #0087ca 0%, #0087ca 100%);
+ background-position: 0 100%;
+ background-repeat: repeat-x;
+ background-size: 2px 2px;
+ color: inherit;
+ text-decoration: none;
+}
+
+a.squiggle:hover {
+ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fill='none' stroke='%230087ca' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
+ background-size: auto 4px;
+}
+```
diff --git a/css/snippets/staggered-animation.md b/css/snippets/staggered-animation.md
new file mode 100644
index 000000000..f1d3a51ac
--- /dev/null
+++ b/css/snippets/staggered-animation.md
@@ -0,0 +1,67 @@
+---
+title: Staggered animation
+type: snippet
+tags: [animation]
+cover: aerial-view-port
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a staggered animation for the elements of a list.
+
+- Set `opacity: 0` and `transform: translateX(100%)` to make list elements transparent and move them all the way to the right.
+- Specify the same `transition` properties for list elements, except `transition-delay`.
+- Use inline styles to specify a value for `--i` for each list element. This will in turn be used for `transition-delay` to create the stagger effect.
+- Use the `:checked` pseudo-class selector for the checkbox to style list elements. Set `opacity` to `1` and `transform` to `translateX(0)` to make them appear and slide into view.
+
+```html
+
+
+
+
+
+```
+
+```css
+.container {
+ overflow-x: hidden;
+ width: 100%;
+}
+
+.menu-toggler {
+ display: none;
+}
+
+.menu-toggler-label {
+ cursor: pointer;
+ font-size: 20px;
+ font-weight: bold;
+}
+
+.stagger-menu {
+ list-style-type: none;
+ margin: 16px 0;
+ padding: 0;
+}
+
+.stagger-menu li {
+ margin-bottom: 8px;
+ font-size: 18px;
+ opacity: 0;
+ transform: translateX(100%);
+ transition-property: opacity, transform;
+ transition-duration: 0.3s;
+ transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055);
+}
+
+.menu-toggler:checked ~ .stagger-menu li {
+ opacity: 1;
+ transform: translateX(0);
+ transition-delay: calc(0.055s * var(--i));
+}
+```
diff --git a/css/snippets/sticky-list-titles.md b/css/snippets/sticky-list-titles.md
new file mode 100644
index 000000000..e8ca50f6c
--- /dev/null
+++ b/css/snippets/sticky-list-titles.md
@@ -0,0 +1,84 @@
+---
+title: List with sticky section headings
+type: snippet
+tags: [visual]
+author: chalarangelo
+cover: interior-7
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a list with sticky headings for each section.
+
+- Use `overflow-y: auto` to allow the list container (`
`) to overflow vertically.
+- Set headings (``) `position` to `sticky` and apply `top: 0` to stick to the top of the container.
+
+```html
+
+
+ A
+ Algeria
+ Angola
+
+ B
+ Benin
+ Botswana
+ Burkina Faso
+ Burundi
+
+ C
+ Cabo Verde
+ Cameroon
+ Central African Republic
+ Chad
+ Comoros
+ Congo, Democratic Republic of the
+ Congo, Republic of the
+ Cote d'Ivoire
+
+ D
+ Djibouti
+
+ E
+ Egypt
+ Equatorial Guinea
+ Eritrea
+ Eswatini (formerly Swaziland)
+ Ethiopia
+
+
+```
+
+```css
+.stripes {
+ width: 240px;
+ height: 240px;
+ background-color: #fff;
+ background-image: linear-gradient(90deg, transparent 50%, #000 50%);
+ background-size: 60px 60px;
+ background-repeat: repeat;
+}
+```
diff --git a/css/snippets/stylized-quotation-marks.md b/css/snippets/stylized-quotation-marks.md
new file mode 100644
index 000000000..7a5688974
--- /dev/null
+++ b/css/snippets/stylized-quotation-marks.md
@@ -0,0 +1,24 @@
+---
+title: Stylized quotation marks
+type: snippet
+tags: [visual]
+author: chalarangelo
+cover: coffee-phone-tray
+dateModified: 2021-05-16T19:53:02+03:00
+---
+
+Customizes the style of inline quotation marks.
+
+- Use the `quotes` property to customize the characters used for the opening and closing quotes of a `` element.
+
+```html
+
+ Do or do not, there is no try. – Yoda
+
+```
+
+```css
+q {
+ quotes: "“" "”";
+}
+```
diff --git a/css/snippets/system-font-stack.md b/css/snippets/system-font-stack.md
new file mode 100644
index 000000000..14fdc960a
--- /dev/null
+++ b/css/snippets/system-font-stack.md
@@ -0,0 +1,34 @@
+---
+title: System font stack
+type: snippet
+tags: [visual]
+cover: lavender-shelf
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Uses the native font of the operating system to get close to a native app feel.
+
+- Define a list of fonts using `font-family`.
+- The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
+- `-apple-system` is San Francisco, used on iOS and macOS (not Chrome however).
+- `BlinkMacSystemFont` is San Francisco, used on macOS Chrome.
+- `'Segoe UI'` is used on Windows 10.
+- `Roboto` is used on Android.
+- `Oxygen-Sans` is used on Linux with KDE.
+- `Ubuntu` is used on Ubuntu (all variants).
+- `Cantarell` is used on Linux with GNOME Shell.
+- `'Helvetica Neue'` and `Helvetica` is used on macOS 10.10 and below.
+- `Arial` is a font widely supported by all operating systems.
+- `sans-serif` is the fallback sans serif font if none of the other fonts are supported.
+
+```html
+This text uses the system font.
+```
+
+```css
+.system-font-stack {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+ sans-serif;
+}
+```
diff --git a/css/snippets/text-backdrop-overlay.md b/css/snippets/text-backdrop-overlay.md
new file mode 100644
index 000000000..8663bde56
--- /dev/null
+++ b/css/snippets/text-backdrop-overlay.md
@@ -0,0 +1,36 @@
+---
+title: Image text overlay
+type: snippet
+tags: [visual]
+author: chalarangelo
+cover: mountain-lake-cottage
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Displays a text on top of an image using an overlay.
+
+- Use `backdrop-filter` to apply a `blur(14px)` and `brightness(80%)` effect. This makes text readable regardless of background image and color.
+
+```html
+
+
Hello, World
+
+
` elements to display the text.
+- **Note:** If you use relative units (e.g. `em`), using `font-size: 0` to fight whitespace between blocks might cause side effects.
+
+```html
+
+
+
+
30 Seconds of CSS
+
+
+
+
30 Seconds of CSS
+
+
+
+
30 Seconds of CSS
+
+
` with the checkbox `` to create a circular knob for the switch.
+- Use the `:checked` pseudo-class selector to change the position of the knob, using `transform: translateX(20px)` and the `background-color` of the switch.
+- Use `position: absolute` and `left: -9999px` to visually hide the `
+```
+
+```css
+.triangle {
+ width: 0;
+ height: 0;
+ border-top: 20px solid #9C27B0;
+ border-left: 20px solid transparent;
+ border-right: 20px solid transparent;
+}
+```
diff --git a/css/snippets/truncate-text-multiline.md b/css/snippets/truncate-text-multiline.md
new file mode 100644
index 000000000..6c95e8e48
--- /dev/null
+++ b/css/snippets/truncate-text-multiline.md
@@ -0,0 +1,47 @@
+---
+title: Truncate multiline text
+type: snippet
+tags: [layout]
+cover: blue-computer
+dateModified: 2021-01-07T23:52:15+02:00
+---
+
+Truncates text that is longer than one line.
+
+- Use `overflow: hidden` to prevent the text from overflowing its dimensions.
+- Set a fixed `width` to ensure the element has at least one constant dimension.
+- Set `height: 109.2px` as calculated from the `font-size`, using the formula `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`).
+- Set `height: 36.4px` as calculated for the gradient container, based on the formula `font-size * line-height` (in this case `26 * 1.4 = 36.4`).
+- Use `background` with `linear-gradient()` to create a gradient from `transparent` to the `background-color`.
+
+```html
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod tempor invidunt ut labore et.
+
+```
+
+```css
+.truncate-text-multiline {
+ position: relative;
+ overflow: hidden;
+ display: block;
+ height: 109.2px;
+ margin: 0 auto;
+ font-size: 26px;
+ line-height: 1.4;
+ width: 400px;
+ background: #f5f6f9;
+ color: #333;
+}
+
+.truncate-text-multiline::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 150px;
+ height: 36.4px;
+ background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
+}
+```
diff --git a/css/snippets/truncate-text.md b/css/snippets/truncate-text.md
new file mode 100644
index 000000000..e9a6a8878
--- /dev/null
+++ b/css/snippets/truncate-text.md
@@ -0,0 +1,28 @@
+---
+title: Truncate text
+type: snippet
+tags: [layout]
+cover: houses-rock-sea
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Truncates text that is longer than one line, adding an ellipsis at the end (`…`).
+
+- Use `overflow: hidden` to prevent the text from overflowing its dimensions.
+- Use `white-space: nowrap` to prevent the text from exceeding one line in height.
+- Use `text-overflow: ellipsis` to make it so that if the text exceeds its dimensions, it will end with an ellipsis.
+- Specify a fixed `width` for the element to know when to display an ellipsis.
+- Only works for single line elements.
+
+```html
+If I exceed one line's width, I will be truncated.
+```
+
+```css
+.truncate-text {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ width: 200px;
+}
+```
diff --git a/css/snippets/typewriter-effect.md b/css/snippets/typewriter-effect.md
new file mode 100644
index 000000000..652e33867
--- /dev/null
+++ b/css/snippets/typewriter-effect.md
@@ -0,0 +1,68 @@
+---
+title: Typewriter effect
+type: snippet
+tags: [animation]
+author: chalarangelo
+cover: italian-horizon
+dateModified: 2021-05-24T16:03:40+03:00
+---
+
+Creates a typewriter effect animation.
+
+- Define two animations, `typing` to animate the characters and `blink` to animate the caret.
+- Use the `::after` pseudo-element to add the caret to the container element.
+- Use JavaScript to set the text for the inner element and set the `--characters` variable containing the character count. This variable is used to animate the text.
+- Use `white-space: nowrap` and `overflow: hidden` to make content invisible as necessary.
+
+```html
+
+```
+
+```css
+.typewriter-effect {
+ display: flex;
+ justify-content: center;
+ font-family: monospace;
+}
+
+.typewriter-effect > .text {
+ max-width: 0;
+ animation: typing 3s steps(var(--characters)) infinite;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.typewriter-effect::after {
+ content: " |";
+ animation: blink 1s infinite;
+ animation-timing-function: step-end;
+}
+
+@keyframes typing {
+ 75%,
+ 100% {
+ max-width: calc(var(--characters) * 1ch);
+ }
+}
+
+@keyframes blink {
+ 0%,
+ 75%,
+ 100% {
+ opacity: 1;
+ }
+ 25% {
+ opacity: 0;
+ }
+}
+```
+
+```js
+const typeWriter = document.getElementById('typewriter-text');
+const text = 'Lorem ipsum dolor sit amet.';
+
+typeWriter.innerHTML = text;
+typeWriter.style.setProperty('--characters', text.length);
+```
diff --git a/css/snippets/vertical-gallery.md b/css/snippets/vertical-gallery.md
new file mode 100644
index 000000000..b36ff9b4e
--- /dev/null
+++ b/css/snippets/vertical-gallery.md
@@ -0,0 +1,132 @@
+---
+title: Image gallery with vertical scroll
+type: snippet
+tags: [visual,interactivity]
+cover: lake-loop
+dateModified: 2022-05-05T05:00:00-04:00
+---
+
+Creates a horizontally scrollable image gallery.
+
+- Use `display: flex` and `justify-content: center` to setup the layout for the container.
+- Use `display: flex` and `flex-direction: column` to setup the layout for the slides.
+- Use `scroll-snap-type: y mandatory` and `overscroll-behavior-y: contain` to create a snap effect on vertical scroll. Snap elements to the start of the container using `scroll-snap-align: start`.
+- Hide scrollbars using `scrollbar-width: none` and styling the pseudo-element `::-webkit-scrollbar` to `display: none`.
+- Use `Element.scrollTo()` to define a `scrollToElement` function, that scrolls the gallery to the given item.
+- Use `Array.prototype.map()` and `Array.prototype.join()` to populate the `.thumbnails` element. Give each thumbnail a `data-id` attribute with the index of the image.
+- Use `Document.querySelectorAll()` to get all the thumbnail elements. Use `Array.prototype.forEach()` to register a handler for the `'click'` event on each thumbnail, using `EventTarget.addEventListener()` and the `scrollToElement` function.
+- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'scroll'` event. Update the `.thumbnails` and `.scrollbar` elements to match the current scroll position, using the `scrollThumb` function.
+
+```html
+
+```
+
+```css
+.gallery-container {
+ display: flex;
+ justify-content: center;
+}
+
+.thumbnails {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.thumbnails img {
+ width: 40px;
+ height: 40px;
+ cursor: pointer;
+}
+
+.scrollbar {
+ width: 1px;
+ height: 720px;
+ background: #ccc;
+ display: block;
+ margin: 0 0 0 8px;
+}
+
+.thumb {
+ width: 1px;
+ position: absolute;
+ height: 0;
+ background: #000;
+}
+
+.slides {
+ margin: 0 16px;
+ display: grid;
+ grid-auto-flow: row;
+ gap: 1rem;
+ width: calc(540px + 1rem);
+ padding: 0 0.25rem;
+ height: 720px;
+ overflow-y: auto;
+ overscroll-behavior-y: contain;
+ scroll-snap-type: y mandatory;
+ scrollbar-width: none;
+}
+
+.slides > div {
+ scroll-snap-align: start;
+}
+
+.slides img {
+ width: 540px;
+ object-fit: contain;
+}
+
+.slides::-webkit-scrollbar {
+ display: none;
+}
+```
+
+```js
+const slideGallery = document.querySelector('.slides');
+const slides = slideGallery.querySelectorAll('div');
+const scrollbarThumb = document.querySelector('.thumb');
+const slideCount = slides.length;
+const slideHeight = 720;
+const marginTop = 16;
+
+const scrollThumb = () => {
+ const index = Math.floor(slideGallery.scrollTop / slideHeight);
+ scrollbarThumb.style.height = `${((index + 1) / slideCount) * slideHeight}px`;
+};
+
+const scrollToElement = el => {
+ const index = parseInt(el.dataset.id, 10);
+ slideGallery.scrollTo(0, index * slideHeight + marginTop);
+};
+
+document.querySelector('.thumbnails').innerHTML += [...slides]
+ .map(
+ (slide, i) => ``, `
`, ``, `
`, etc.
+
+```html
+
+ Item 01
+ Item 02
+ Item 03
+ Item 04
+ Item 05
+
+```
+
+```css
+li:nth-child(odd) {
+ background-color: #999;
+}
+```
diff --git a/css/snippets/zig-zag-pattern.md b/css/snippets/zig-zag-pattern.md
new file mode 100644
index 000000000..b95eb0b23
--- /dev/null
+++ b/css/snippets/zig-zag-pattern.md
@@ -0,0 +1,33 @@
+---
+title: Zig zag background pattern
+type: snippet
+tags: [visual]
+cover: blue-lake
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a zig zag background pattern.
+
+- Use `background-color` to set a white background.
+- Use `background-image` with four `linear-gradient()` values to create the parts of a zig zag pattern.
+- Use `background-size` to specify the pattern's size. Use `background-position` to place the parts of the pattern in the correct locations.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+
+```
+
+```css
+.zig-zag {
+ width: 240px;
+ height: 240px;
+ background-color: #fff;
+ background-image: linear-gradient(135deg, #000 25%, transparent 25%),
+ linear-gradient(225deg, #000 25%, transparent 25%),
+ linear-gradient(315deg, #000 25%, transparent 25%),
+ linear-gradient(45deg, #000 25%, transparent 25%);
+ background-position: -30px 0, -30px 0, 0 0, 0 0;
+ background-size: 60px 60px;
+ background-repeat: repeat;
+}
+```
diff --git a/css/snippets/zoomin-zoomout-animation.md b/css/snippets/zoomin-zoomout-animation.md
new file mode 100644
index 000000000..27b204732
--- /dev/null
+++ b/css/snippets/zoomin-zoomout-animation.md
@@ -0,0 +1,39 @@
+---
+title: Zoom in zoom out animation
+type: snippet
+tags: [animation]
+cover: travel-mug-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a zoom in zoom out animation.
+
+- Use `@keyframes` to define a three-step animation. At the start (`0%`) and end (`100%`), the element is its original size (`scale(1 ,1)`). Halfway through (`50%`) it's scaled up to 1.5 times its original size (`scale(1.5, 1.5)`).
+- Use `width` and `height` to give the element a specific size.
+- Use `animation` to set the appropriate values for the element to make it animated.
+
+```html
+
+```
+
+```css
+.zoom-in-out-box {
+ margin: 24px;
+ width: 50px;
+ height: 50px;
+ background: #f50057;
+ animation: zoom-in-zoom-out 1s ease infinite;
+}
+
+@keyframes zoom-in-zoom-out {
+ 0% {
+ transform: scale(1, 1);
+ }
+ 50% {
+ transform: scale(1.5, 1.5);
+ }
+ 100% {
+ transform: scale(1, 1);
+ }
+}
+```
+```
+
+```css
+img {
+ display: block;
+ font-family: sans-serif;
+ font-weight: 300;
+ height: auto;
+ line-height: 2;
+ position: relative;
+ text-align: center;
+ width: 100%;
+}
+
+img::before {
+ content: "Sorry, this image is unavailable.";
+ display: block;
+ margin-bottom: 8px;
+}
+
+img::after {
+ content: "(url: " attr(src) ")";
+ display: block;
+ font-size: 12px;
+}
+```
diff --git a/css/snippets/button-border-animation.md b/css/snippets/button-border-animation.md
new file mode 100644
index 000000000..60977819a
--- /dev/null
+++ b/css/snippets/button-border-animation.md
@@ -0,0 +1,54 @@
+---
+title: Button border animation
+type: snippet
+tags: [animation]
+cover: highlands
+dateModified: 2021-05-24T15:28:52+03:00
+---
+
+Creates a border animation on hover.
+
+- Use the `::before` and `::after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box.
+- Use the `:hover` pseudo-class to extend the `width` of those elements to `100%` on hover and animate the change using `transition`.
+
+```html
+
+```
+
+```css
+.animated-border-button {
+ background-color: #263059;
+ border: none;
+ color: #ffffff;
+ outline: none;
+ padding: 12px 40px 10px;
+ position: relative;
+}
+
+.animated-border-button::before,
+.animated-border-button::after {
+ border: 0 solid transparent;
+ transition: all 0.3s;
+ content: '';
+ height: 0;
+ position: absolute;
+ width: 24px;
+}
+
+.animated-border-button::before {
+ border-top: 2px solid #263059;
+ right: 0;
+ top: -4px;
+}
+
+.animated-border-button::after {
+ border-bottom: 2px solid #263059;
+ bottom: -4px;
+ left: 0;
+}
+
+.animated-border-button:hover::before,
+.animated-border-button:hover::after {
+ width: 100%;
+}
+```
diff --git a/css/snippets/button-focus-swing-animation.md b/css/snippets/button-focus-swing-animation.md
new file mode 100644
index 000000000..24d0dabfb
--- /dev/null
+++ b/css/snippets/button-focus-swing-animation.md
@@ -0,0 +1,56 @@
+---
+title: Button swing animation
+type: snippet
+tags: [animation]
+author: chalarangelo
+cover: painters-desk
+dateModified: 2021-05-24T15:28:52+03:00
+---
+
+Creates a swing animation on focus.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:focus` pseudo-class to apply an `animation` that uses `transform` to make the element swing.
+- Use `animation-iteration-count` to only play the animation once.
+
+```html
+
+```
+
+```css
+.button-swing {
+ color: #65b5f6;
+ background-color: transparent;
+ border: 1px solid #65b5f6;
+ border-radius: 4px;
+ padding: 0 16px;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+}
+
+.button-swing:focus {
+ animation: swing 1s ease;
+ animation-iteration-count: 1;
+}
+
+@keyframes swing {
+ 15% {
+ transform: translateX(5px);
+ }
+ 30% {
+ transform: translateX(-5px);
+ }
+ 50% {
+ transform: translateX(3px);
+ }
+ 65% {
+ transform: translateX(-3px);
+ }
+ 80% {
+ transform: translateX(2px);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+```
diff --git a/css/snippets/button-hover-fill-animation.md b/css/snippets/button-hover-fill-animation.md
new file mode 100644
index 000000000..231bae2ff
--- /dev/null
+++ b/css/snippets/button-hover-fill-animation.md
@@ -0,0 +1,32 @@
+---
+title: Button fill animation
+type: snippet
+tags: [animation]
+cover: beach-pineapple
+dateModified: 2021-04-02T21:34:43+03:00
+---
+
+Creates a fill animation on hover.
+
+- Set a `color` and `background` and use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `background` and `color` of the element when the user hovers over it.
+
+```html
+
+```
+
+```css
+.animated-fill-button {
+ padding: 20px;
+ background: #fff;
+ color: #000;
+ border: 1px solid #000;
+ cursor: pointer;
+ transition: 0.3s all ease-in-out;
+}
+
+.animated-fill-button:hover {
+ background: #000;
+ color: #fff;
+}
+```
diff --git a/css/snippets/button-hover-grow-animation.md b/css/snippets/button-hover-grow-animation.md
new file mode 100644
index 000000000..83814fc04
--- /dev/null
+++ b/css/snippets/button-hover-grow-animation.md
@@ -0,0 +1,33 @@
+---
+title: Button grow animation
+type: snippet
+tags: [animation]
+author: chalarangelo
+cover: white-laptop
+dateModified: 2021-05-24T15:28:52+03:00
+---
+
+Creates a grow animation on hover.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `transform` to `scale(1.1)`, growing the element when the user hovers over it.
+
+```html
+
+```
+
+```css
+.button-grow {
+ color: #65b5f6;
+ background-color: transparent;
+ border: 1px solid #65b5f6;
+ border-radius: 4px;
+ padding: 0 16px;
+ cursor: pointer;
+ transition: all 0.3s ease-in-out;
+}
+
+.button-grow:hover {
+ transform: scale(1.1);
+}
+```
diff --git a/css/snippets/button-hover-shrink-animation.md b/css/snippets/button-hover-shrink-animation.md
new file mode 100644
index 000000000..2b0f7371f
--- /dev/null
+++ b/css/snippets/button-hover-shrink-animation.md
@@ -0,0 +1,33 @@
+---
+title: Button shrink animation
+type: snippet
+tags: [animation]
+author: chalarangelo
+cover: clay-pot-horizon
+dateModified: 2021-05-24T15:28:52+03:00
+---
+
+Creates a shrink animation on hover.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `transform` to `scale(0.8)`, shrinking the element when the user hovers over it.
+
+```html
+
+```
+
+```css
+.button-shrink {
+ color: #65b5f6;
+ background-color: transparent;
+ border: 1px solid #65b5f6;
+ border-radius: 4px;
+ padding: 0 16px;
+ cursor: pointer;
+ transition: all 0.3s ease-in-out;
+}
+
+.button-shrink:hover {
+ transform: scale(0.8);
+}
+```
diff --git a/css/snippets/card-image-cutout.md b/css/snippets/card-image-cutout.md
new file mode 100644
index 000000000..7c70d07d9
--- /dev/null
+++ b/css/snippets/card-image-cutout.md
@@ -0,0 +1,81 @@
+---
+title: Card with image cutout
+type: snippet
+tags: [visual]
+author: chalarangelo
+cover: radio-monstera
+dateModified: 2022-12-11T05:00:00-04:00
+---
+
+Creates a card with an image cutout.
+
+- Use `background` to add a colored background to a `.container` element.
+- Create a `.card` containing a `figure` with the appropriate image for the cutout and any other content you want.
+- Use the `::before` pseudo-element to add a `border` around the `figure` element, matching the `.container` element's `background` and creating the illusion of a cutout in the `.card`.
+
+```html
+