Displays a hamburger menu which transitions to a cross on hover.

  • Use a .hamburger-menu container div which contains the top, bottom, and middle bars.
  • The container is set to be a flex container (display: flex) with flex-direction to be column and flex-wrap to be wrap (alternatively, you can set both properties by a shorthand flex-flow: column wrap).
  • Add distance between the bars using justify-content: space-between.
  • The animation has 3 parts: top and bottom bars transforming to 45 degree angles (rotate(45deg)), and the middle bar fading away by setting opacity: 0.
  • The transform-origin is set to left so the bars rotate around the left point.
  • Set transition all 0.5s so that both transform and opacity properties are animated for half a second.

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

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

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

Reveals an interactive popout menu on hover and focus.

  • position: relative on the reference parent establishes a Cartesian positioning context for its child.
  • position: absolute takes the popout menu out of the flow of the document and positions it in relation to the parent.
  • left: 100% moves the the popout menu 100% of its parent’s width from the left.
  • visibility: hidden hides the popout menu initially and allows for transitions (unlike display: none).
  • .reference:hover > .popout-menu means that when .reference is hovered over, select immediate children with a class of .popout-menu and change their visibility to visible, which shows the popout.
  • .reference:focus > .popout-menu means that when .reference is focused, the popout would be shown.
  • .reference:focus-within > .popout-menu ensures that the popout is shown when the focus is within the reference.

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

Fades out the siblings of a hovered item.

  • transition: opacity 0.2s specifies that changes to opacity will be transitioned over 0.3 seconds.
  • .sibling-fade:hover span:not(:hover) specifies that when the parent is hovered, select any span children that are not currently being hovered and change their opacity to 0.5.

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