Update snippet wording
This commit is contained in:
Isabelle Viktoria Maciohsek
committed by
Chalarangelo
Chalarangelo
parent
b137bd7d75
commit
ee00c20cc3
@ -2,15 +2,16 @@
|
||||
title: Bouncing loader
|
||||
tags: animation,intermediate
|
||||
firstSeen: 2018-03-04T06:24:22+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a bouncing loader animation.
|
||||
|
||||
- Use `@keyframes` to define an animation with two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translate3d()`. Use a single axis translation on `transform: translate3d()` to achieve better animation performance.
|
||||
- Create a parent container, `.bouncing-loader`, for the bouncing circles and use `display: flex` and `justify-content: center` to position them in the center.
|
||||
- Give the three bouncing circle `<div>` elements a `width` and `height` of `16px` and use `border-radius: 50%` to make them circular.
|
||||
- Apply the `bouncing-loader` animation to each of the three bouncing circles, using a different `animation-delay` for each one and `animation-direction: alternate` to create the appropriate effect.
|
||||
- Use `@keyframes` to define a bouncing animation, using the `opacity` and `transform` properties. Use a single axis translation on `transform: translate3d()` to achieve better animation performance.
|
||||
- Create a parent container, `.bouncing-loader`, for the bouncing circles. Use `display: flex` and `justify-content: center` to position them in the center.
|
||||
- Give the three bouncing circle `<div>` elements the same `width` and `height` and `border-radius: 50%` to make them circular.
|
||||
- Apply the `bouncing-loader` animation to each of the three bouncing circles.
|
||||
- Use a different `animation-delay` for each circle and `animation-direction: alternate` to create the appropriate effect.
|
||||
|
||||
```html
|
||||
<div class="bouncing-loader">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Custom checkbox
|
||||
tags: visual,animation,advanced
|
||||
firstSeen: 2021-05-16T13:09:15+03:00
|
||||
lastUpdated: 2021-05-18T21:41:27+03:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a styled checkbox with animation on state change.
|
||||
@ -10,7 +10,8 @@ Creates a styled checkbox with animation on state change.
|
||||
- Use an `<svg>` element to create the check `<symbol>` and insert it via the `<use>` element to create a reusable SVG icon.
|
||||
- Create a `.checkbox-container` and use flexbox to create the appropriate layout for the checkboxes.
|
||||
- Hide the `<input>` element and use the `label` associated with it to display a checkbox and the provided text.
|
||||
- Use `stroke-dashoffset` to animate the check symbol on state change and `transform: scale(0.9)` via a CSS animation to create a zoom animation effect.
|
||||
- Use `stroke-dashoffset` to animate the check symbol on state change.
|
||||
- Use `transform: scale(0.9)` via a CSS animation to create a zoom animation effect.
|
||||
|
||||
```html
|
||||
<svg class="checkbox-symbol">
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: List with floating section headings
|
||||
tags: visual,advanced
|
||||
firstSeen: 2020-08-18T15:44:01+03:00
|
||||
lastUpdated: 2021-02-05T10:21:38+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a list with floating headings for each section.
|
||||
|
||||
- Use `overflow-y: auto` to allow the list container to overflow vertically.
|
||||
- Use `display: grid` on the inner container (`<dl>`) to create a layout with two columns.
|
||||
- Set headings (`<dt>`) to `grid-column: 1` and content (`<dd>`) to `grid-column: 2`
|
||||
- Set headings (`<dt>`) to `grid-column: 1` and content (`<dd>`) to `grid-column: 2`.
|
||||
- Finally, apply `position: sticky` and `top: 0.5rem` to headings to create a floating effect.
|
||||
|
||||
```html
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: Horizontal scroll snap
|
||||
tags: interactivity,intermediate
|
||||
firstSeen: 2020-08-18T14:25:46+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 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.
|
||||
- You can use `scroll-snap-align` with either `start`, `stop` or `center` to change the snap alignment.
|
||||
- Change `scroll-snap-align` to either `start`, `stop` or `center` to change the snap alignment.
|
||||
|
||||
```html
|
||||
<div class="horizontal-snap">
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
title: Show additional content on hover
|
||||
tags: visual,intermediate
|
||||
firstSeen: 2020-08-18T16:40:23+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 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 as necessary when it's hovered or it or its contents are focused.
|
||||
- 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.
|
||||
|
||||
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
title: Hover underline animation
|
||||
tags: animation,advanced
|
||||
firstSeen: 2018-02-28T13:19:22+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates an animated underline effect when the text is hovered over.
|
||||
Creates an animated underline effect when the user hovers over the text.
|
||||
|
||||
- Use `display: inline-block` to prevent the underline from spanning the entire parent width rather than just the text content.
|
||||
- Use the `:after` pseudo-element with a `width` of `100%` and `position: absolute`, placing it below the content.
|
||||
- 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`.
|
||||
- You can remove the `transform-origin` property to make the transform originate from the center of the element.
|
||||
- Remove the `transform-origin` property to make the transform originate from the center of the element.
|
||||
|
||||
```html
|
||||
<p class="hover-underline-animation">Hover this text to see the effect!</p>
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: Menu on image hover
|
||||
tags: layout,animation,intermediate
|
||||
firstSeen: 2020-04-20T19:15:11+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Displays a menu overlay when the image is hovered.
|
||||
Displays a menu overlay when the user hovers over the image.
|
||||
|
||||
- Use a `<figure>` to wrap the `<img>` element and a `<div>` 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 `<div>` to the negative of the element's `width` and reset it to `0` when hovering over the parent element to slide in the menu.
|
||||
- Set the `left` attribute of the `<div>` 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 `<div>` to vertically center the menu items.
|
||||
|
||||
```html
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
title: Image rotate on hover
|
||||
tags: animation,visual,intermediate
|
||||
firstSeen: 2020-04-20T18:36:11+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a rotate effect for the image on hover.
|
||||
|
||||
- Use `scale` and `rotate` when hovering over the parent element (a `<figure>`) to animate the image, using the `transition` property.
|
||||
- Use `overflow: hidden` on the parent container to hide the excess from the image transformation.
|
||||
- Use the `scale`, `rotate` and `transition` properties when hovering over the parent element (a `<figure>`) to animate the image.
|
||||
- Use `overflow: hidden` on the parent element to hide the excess from the image transformation.
|
||||
|
||||
```html
|
||||
<figure class="hover-rotate">
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: Image overlay on hover
|
||||
tags: visual,animation,advanced
|
||||
firstSeen: 2020-04-20T14:12:33+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Displays an image overlay effect on hover.
|
||||
|
||||
- Use the `:before` and `:after` pseudo-elements for the top and bottom bars of the overlay respectively, setting their `opacity`, `transform` and `transition` to produce the desired effect.
|
||||
- Use the `<figcaption>` for the text of the overlay, setting `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 produce the desired effect.
|
||||
- Use the `:before` and `:after` pseudo-elements for the top and bottom bars of the overlay respectively. Set their `opacity`, `transform` and `transition` to produce the desired effect.
|
||||
- Use the `<figcaption>` 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
|
||||
<figure class="hover-img">
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
title: Navigation list item hover and focus effect
|
||||
tags: visual,beginner
|
||||
firstSeen: 2019-09-19T22:48:57+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 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 to `transform: scale(1)` and show the pseudo-element with its colored background.
|
||||
- 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
|
||||
@ -36,7 +36,7 @@ Creates a custom hover and focus effect for navigation items, using CSS transfor
|
||||
.hover-nav li a {
|
||||
position: relative;
|
||||
display: block;
|
||||
color: #222;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 8px 12px;
|
||||
text-decoration: none;
|
||||
@ -50,7 +50,7 @@ li a:before {
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #f6c126;
|
||||
background-color: #2683f6;
|
||||
z-index: -1;
|
||||
transform: scale(0);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
|
||||
@ -2,16 +2,16 @@
|
||||
title: Offscreen
|
||||
tags: layout,visual,intermediate
|
||||
firstSeen: 2018-03-30T18:50:31+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.
|
||||
Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
|
||||
|
||||
- Remove all borders and padding and hide the element's overflow.
|
||||
- Use `clip` to indicate that no part of the element should be shown.
|
||||
- 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 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).
|
||||
- **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
|
||||
<a class="button" href="https://google.com">
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
title: Staggered animation
|
||||
tags: animation,advanced
|
||||
firstSeen: 2020-03-16T12:19:05+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-11T18:44:51+03:00
|
||||
---
|
||||
|
||||
Creates a staggered animation for the elements of a list.
|
||||
|
||||
- Set the `opacity` to `0` and `transform` to `translateX(100%)` to make list elements transparent and move them all the way to the right.
|
||||
- Specify the appropriate `transition` properties for list elements, except `transition-delay` which is specified relative to the `--i` custom property.
|
||||
- Use inline styles to specify a value for `--i` for each list element, which will in turn be used for `transition-delay` to create the stagger effect.
|
||||
- Use the `:checked` pseudo-class selector for the checkbox to appropriately style list elements, setting `opacity` to `1` and `transform` to `translateX(0)` to make them appear and slide into view.
|
||||
- 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
|
||||
<div class="container">
|
||||
|
||||
Reference in New Issue
Block a user