Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.

  • Use the :nth-child(odd) or :nth-child(even) pseudo-class to apply a different background color to elements that match based on their position in a group of siblings.
  • Note that you can use it to apply different styles to other HTML elements like div, tr, p, ol, etc.

继续阅读 30秒学会 CSS 片段 – Zebra striped list

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

  • position: relative on the element establishes a Cartesian positioning context for pseudo elements.
  • :after defines a pseudo element.
  • background-image: url(...) adds the SVG shape (a 24×12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use the URL-encoder for SVG.
  • position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  • width: 100% ensures the element stretches the entire width of its parent.
  • height: 12px is the same height as the shape.
  • bottom: 0 positions the pseudo element at the bottom of the parent.

继续阅读 30秒学会 CSS 片段 – Shape separator

Gives text a gradient color.

  • background: -webkit-linear-gradient(...) gives the text element a gradient background.
  • webkit-text-fill-color: transparent fills the text with a transparent color.
  • webkit-background-clip: text clips the background with the text, filling the text with the gradient background as the color.
  • Uses non-standard properties.

继续阅读 30秒学会 CSS 片段 – Gradient text

A hover effect where the gradient follows the mouse cursor.

  • --x and --y are used to track the position of the mouse on the button.
  • --size is used to keep modify of the gradient’s dimensions.
  • background: radial-gradient(circle closest-side, pink, transparent); creates the gradient at the correct postion.

继续阅读 30秒学会 CSS 片段 – Mouse cursor gradient tracking

Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.
Provides an alternative to display: none (not readable by screen readers) and visibility: hidden (takes up physical space in the DOM).

  • Remove all borders.
  • Use clip to indicate that no part of the element should be shown.
  • Make the height and width of the element 1px.
  • Negate the elements height and width using margin: -1px.
  • Hide the element’s overflow.
  • Remove all padding.
  • Position the element absolutely so that it does not take up space in the DOM.

继续阅读 30秒学会 CSS 片段 – Offscreen

Changes the styling of text selection.

  • ::selection defines a pseudo selector on an element to style text within it when selected. Note that if you don’t combine any other selector your style will be applied at document root level, to any selectable element.
  • Requires prefixes for full support and is not actually in any specification.

继续阅读 30秒学会 CSS 片段 – Custom text selection

Creates a toggle switch with CSS only.

  • This effect is styling only the <label> element to look like a toggle switch, and hiding the actual <input> checkbox by positioning it offscreen. When clicking the label associated with the <input> element, it sets the <input> checkbox into the :checked state.
  • The for attribute associates the <label> with the appropriate <input> checkbox element by its id.
  • .switch:after defines a pseudo-element for the <label> to create the circular knob.
  • input[type='checkbox']:checked + .switch:after targets the <label>‘s pseudo-element’s style when the checkbox is checked.
  • transform: translateX(20px) moves the pseudo-element (knob) 20px to the right when the checkbox is checked.
  • background-color: #7983ff; sets the background-color of the switch to a different color when the checkbox is checked.
  • .offscreen moves the <input> checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.
  • transition: all 0.3s specifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the <label>‘s background-color and the pseudo-element’s transform property when the checkbox is checked.

继续阅读 30秒学会 CSS 片段 – Toggle switch

Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.

  • position: relative on the parent establishes a Cartesian positioning context for pseudo-elements.
  • :after defines a pseudo element.
  • background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
  • position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  • width: 240px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
  • height: 25px is the height of the fading gradient pseudo-element, which should be kept relatively small.
  • bottom: 0 positions the pseudo-element at the bottom of the parent.
  • pointer-events: none specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.

继续阅读 30秒学会 CSS 片段 – Overflow scroll gradient