假定元素的宽度可变,它的高度会自动适应 (比如其 widthheight 可以保持固定的宽高比).

  • 在伪元素 :before 上设置 padding-top 可以使元素的高度与宽度成一定的比例。比如设置成 100% 意味着高度始终是宽度的 100% ,也就是一个自适应的正方形。
  • 这种方法也确保了内容可以正常地保持在元素内部。

继续阅读 30秒学会 CSS 片段 – 固定宽高比

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

Vertically and horizontally centers a child element within its parent element using position: absolute and transform: translate() (as an alternative to flexbox or display: table).
Similar to flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.

  • position: absolute on the child element allows it to be positioned based on its containing block.
  • left: 50% and top: 50% offsets the child 50% from the left and top edge of its containing block.
  • transform: translate(-50%, -50%) allows the height and width of the child element to be negated so that it is vertically and horizontally centered.
  • Note that the fixed height and width on parent element is for the demo only.

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

If the text is longer than one line, it will be truncated and end with an ellipsis .

  • overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
  • white-space: nowrap prevents the text from exceeding one line in height.
  • text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
  • width: 200px; ensures the element has a dimension, to know when to get ellipsis
  • Only works for single line elements.

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

Evenly distributes child elements within a parent element.

  • display: flex enables flexbox.
  • justify-content: space-between 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, use justify-content: space-around to distribute the children with space around them, rather than between them.

继续阅读 30秒学会 CSS 片段 – Evenly distributed children

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

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