30 Seconds of CSS – A curated collection of useful CSS snippets

30 Seconds of CSS is a curated collection of useful CSS snippets you can understand in 30 seconds or less.

There are many special effects included in that useful CSS snippets.  The following is the table of contents:

Layout

Box-sizing reset
Clearfix
Constant width to height ratio
Evenly distributed children
Flexbox centering
Grid centering
Grid layout
Truncate text
Visual

Circle
Custom scrollbar
Custom text selection
Dynamic shadow
Etched text
Gradient text
Hairline border
:not selector
Overflow scroll gradient
Pretty text underline
Reset all styles
Shape separator
System font stack
Triangle

Animation

Bouncing loader
Donut spinner
Easing variables
Height transition
Hover underline animation

Interactivity

Disable selection
Mouse cursor gradient tracking
Popout menu
Sibling fade

Other

Counter
Custom variables

30 Seconds of CSS A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Example of CSS snippets – Bouncing loader

It’s a code snippet to create a bouncing loader animation.

HTML

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

@keyframes bouncing-loader {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.1;
    transform: translateY(-1rem);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

Explanation

Note: 1rem is usually 16px.

  1. @keyframes defines an animation that has two states, where the element changes opacity and is translated up on the 2D plane using transform: translateY().
  2. .bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the center.
  3. .bouncing-loader > div, targets the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.
  4. margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.
  5. animation is a shorthand property for the various animation properties: animation-nameanimation-durationanimation-iteration-countanimation-direction are used.
  6. nth-child(n) targets the element which is the nth child of its parent.
  7. animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.

30 Seconds of CSS  website: http://caibaojian.com/30-seconds-of-css/