diff --git a/snippets/bouncing-loader.md b/snippets/bouncing-loader.md index 292098a08..201654723 100644 --- a/snippets/bouncing-loader.md +++ b/snippets/bouncing-loader.md @@ -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 `
` 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 `
` 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
diff --git a/snippets/custom-checkbox.md b/snippets/custom-checkbox.md index 2609afd50..b53568bc5 100644 --- a/snippets/custom-checkbox.md +++ b/snippets/custom-checkbox.md @@ -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 `` element to create the check `` and insert it via the `` element to create a reusable SVG icon. - Create a `.checkbox-container` and use flexbox to create the appropriate layout for the checkboxes. - Hide the `
`) to create a layout with two columns. -- Set headings (`
`) to `grid-column: 1` and content (`
`) to `grid-column: 2` +- 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 diff --git a/snippets/horizontal-scroll-snap.md b/snippets/horizontal-scroll-snap.md index 4005f1a60..8b7e62b69 100644 --- a/snippets/horizontal-scroll-snap.md +++ b/snippets/horizontal-scroll-snap.md @@ -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
diff --git a/snippets/hover-additional-content.md b/snippets/hover-additional-content.md index 9cb65702e..d2b7e24fa 100644 --- a/snippets/hover-additional-content.md +++ b/snippets/hover-additional-content.md @@ -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. diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 4933304cb..72fb24d15 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -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

Hover this text to see the effect!

diff --git a/snippets/image-hover-menu.md b/snippets/image-hover-menu.md index e181c35c5..868e7b384 100644 --- a/snippets/image-hover-menu.md +++ b/snippets/image-hover-menu.md @@ -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 `
` to wrap the `` element and a `
` 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` and reset it to `0` when hovering over the parent element to slide in the menu. +- 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 diff --git a/snippets/image-hover-rotate.md b/snippets/image-hover-rotate.md index 18ba56d42..a834d7bd8 100644 --- a/snippets/image-hover-rotate.md +++ b/snippets/image-hover-rotate.md @@ -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 `
`) 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 `
`) to animate the image. +- Use `overflow: hidden` on the parent element to hide the excess from the image transformation. ```html
diff --git a/snippets/image-overlay-hover.md b/snippets/image-overlay-hover.md index 6f0b9d10b..5745649dc 100644 --- a/snippets/image-overlay-hover.md +++ b/snippets/image-overlay-hover.md @@ -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 `
` 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 `
` 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
diff --git a/snippets/navigation-list-item-hover-and-focus-effect.md b/snippets/navigation-list-item-hover-and-focus-effect.md index a2bc6cb73..3c8b61230 100644 --- a/snippets/navigation-list-item-hover-and-focus-effect.md +++ b/snippets/navigation-list-item-hover-and-focus-effect.md @@ -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; diff --git a/snippets/offscreen.md b/snippets/offscreen.md index e36b9f79d..559601084 100644 --- a/snippets/offscreen.md +++ b/snippets/offscreen.md @@ -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 diff --git a/snippets/staggered-animation.md b/snippets/staggered-animation.md index 0902dc4a5..690cd6038 100644 --- a/snippets/staggered-animation.md +++ b/snippets/staggered-animation.md @@ -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