Update snippet explanations
This commit is contained in:
Chalarangelo
@ -2,13 +2,13 @@
|
||||
title: Checkerboard background pattern
|
||||
tags: visual,intermediate
|
||||
firstSeen: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a checkerboard background pattern.
|
||||
|
||||
- Use `background-color` to set a white background.
|
||||
- Use `background-image` with two `linear-gradient()` values, each one with a different angle to create the checkerboard pattern.
|
||||
- Use `background-image` with two `linear-gradient()` values. Give each one a different angle to create the checkerboard pattern.
|
||||
- Use `background-size` to specify the pattern's size.
|
||||
- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
title: Donut spinner
|
||||
tags: animation,intermediate
|
||||
firstSeen: 2018-02-27T17:32:35+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 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, except one side that will serve as the loading indicator for the donut.
|
||||
- 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
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: Evenly distributed children
|
||||
tags: layout,intermediate
|
||||
firstSeen: 2018-02-28T13:47:02+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 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, you can use `justify-content: space-around` to distribute the children with space around them, rather than between them.
|
||||
- Alternatively, use `justify-content: space-around` to distribute the children with space around them, instead of between them.
|
||||
|
||||
```html
|
||||
<div class="evenly-distributed-children">
|
||||
|
||||
@ -2,14 +2,11 @@
|
||||
title: Fullscreen
|
||||
tags: visual,advanced
|
||||
firstSeen: 2019-01-12T13:08:40+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Applies styles to an element when in fullscreen mode.
|
||||
|
||||
|
||||
The `:fullscreen` CSS pseudo-element represents an element that's displayed when the browser is in fullscreen mode.
|
||||
|
||||
- Use the `:fullscreen` CSS pseudo-element selector to select and style an element that is displayed in fullscreen mode.
|
||||
- Use a `<button>` and `Element.requestFullscreen()` to create a button that makes the element fullscreen for the purposes of previewing the style.
|
||||
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
title: Input with prefix
|
||||
tags: interactivity,visual,intermediate
|
||||
firstSeen: 2020-10-14T14:16:57+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 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 `<input>` field and apply them to the parent element instead to make it look like an input box.
|
||||
- Remove the border and outline from the `<input>` field. Apply them to the parent element instead to make it look like an input box.
|
||||
- Use the `:focus-within` pseudo-class selector to style the parent element accordingly, when the user interacts with the `<input>` field.
|
||||
|
||||
```html
|
||||
|
||||
@ -2,16 +2,16 @@
|
||||
title: Masonry Layout
|
||||
tags: layout,advanced
|
||||
firstSeen: 2019-12-11T02:19:05+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 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`, the container for the masonry layout and `.masonry-columns` an inner container in which `.masonry-brick` elements will be placed.
|
||||
- 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 to allow for greater flexibility within the layout in combination with media queries to ensure that the layout is responsive in different viewport sizes.
|
||||
- Use CSS variables and media queries for greater flexibility and responsiveness.
|
||||
|
||||
```html
|
||||
<div class="masonry-container">
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
title: Overflow scroll gradient
|
||||
tags: visual,intermediate
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
|
||||
|
||||
- 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 appropriately place and size the pseudo-element in its parent.
|
||||
- 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
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: Polka dot background pattern
|
||||
tags: visual,intermediate
|
||||
firstSeen: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 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 and `background-position` to appropriately place the two gradients.
|
||||
- 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
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
title: Pretty text underline
|
||||
tags: visual,intermediate
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline.
|
||||
|
||||
- Use `text-shadow` to apply 4 values with offsets covering a 4x4 px area, ensuring the underline has a thick shadow that covers the line where descenders clip it. For the 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 an appropriate gradient that will act as the actual 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.
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
title: Pulse loader
|
||||
tags: animation,beginner
|
||||
firstSeen: 2019-10-05T14:29:36+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a pulse effect loader animation using the `animation-delay` property.
|
||||
|
||||
- Use `@keyframes` to define an animation at two points in the cycle: at the start (`0%`), the two `<div>` elements have no `width` or `height` and are positioned at the center and at the end (`100%`), both `<div>` elements have increased `width` and `height`, but their `position` is reset to `0`.
|
||||
- Use `@keyframes` to define an animation at two points in the cycle. At the start (`0%`), the two `<div>` elements have no `width` or `height` and are positioned at the center. At the end (`100%`), both `<div>` 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 `<div>` 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 `<div>` element, so that each element starts its animation at a different time.
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
title: Scroll progress bar
|
||||
tags: animation,visual,intermediate
|
||||
firstSeen: 2021-05-24T09:42:03+03:00
|
||||
lastUpdated: 2021-05-24T09:42:03+03:00
|
||||
lastUpdated: 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()` along with `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element.
|
||||
- Use `EventTarget.addEventListener()` and `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element.
|
||||
|
||||
```html
|
||||
<div id="scroll-progress"></div>
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
title: Image text overlay
|
||||
tags: visual,beginner
|
||||
firstSeen: 2020-08-18T15:07:32+03:00
|
||||
lastUpdated: 2020-12-30T15:37:37+02:00
|
||||
lastUpdated: 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 to make text readable regardless of background image and color.
|
||||
- Use `backdrop-filter` to apply a `blur(14px)` and `brightness(80%)` effect. This makes text readable regardless of background image and color.
|
||||
|
||||
```html
|
||||
<div>
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: Triangle
|
||||
tags: visual,beginner
|
||||
firstSeen: 2018-02-25T15:14:39+02:00
|
||||
lastUpdated: 2021-01-07T23:52:15+02:00
|
||||
lastUpdated: 2021-10-13T19:29:39+02:00
|
||||
---
|
||||
|
||||
Creates a triangular shape with pure CSS.
|
||||
|
||||
- Use three borders to create a triangle shape.
|
||||
- All borders should have the same `border-width` (`20px`).
|
||||
- The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired `border-color`, whereas the adjacent borders (i.e. left and right) should have a `border-color` of `transparent`.
|
||||
- The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired `border-color`. The adjacent borders (i.e. left and right) should have a `border-color` of `transparent`.
|
||||
- Altering the `border-width` values will change the proportions of the triangle.
|
||||
|
||||
```html
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
title: Zig zag background pattern
|
||||
tags: visual,advanced
|
||||
firstSeen: 2021-01-11T09:51:43+02:00
|
||||
lastUpdated: 2021-01-11T09:53:16+02:00
|
||||
lastUpdated: 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 and `background-position` to place the parts of the pattern in the correct locations.
|
||||
- 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
|
||||
|
||||
@ -2,13 +2,14 @@
|
||||
title: Zoom in zoom out animation
|
||||
tags: animation,beginner
|
||||
firstSeen: 2020-10-05T21:42:14+03:00
|
||||
lastUpdated: 2021-04-02T21:49:01+03:00
|
||||
lastUpdated: 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)`) and 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 and use `animation` to set the appropriate values for the element to make it animated.
|
||||
- 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
|
||||
<div class="zoom-in-out-box"></div>
|
||||
|
||||
Reference in New Issue
Block a user