📚 CSS Tricks

CSS Reset

Do not set the font property in the universal selector. Instead, set it in the body selector for inheritance and performance.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* border-box */
}

html {
  font-size: 62.5%; /* 10px = 16px * 62.5% */
}

body {
  box-sizing: border-box; /* here */
  font-family: ....;
  font-weight: ...;
  line-height: ...;
  color: ...;
  padding: ...;
}

Element Center (簡易版)

• The easiest way to center anything with the transform, top and left properties.

.text-box {
  position: absolute; /* relative to parent container */
  top: 50%;
  left: 50%;
  transfrom: translate(-50%, -50%);
}

Faded overlay on image

.header {
  height: 95vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(126, 213, 111, 0.8),
      rgba(38, 181, 133, 0.8)
    ), url(img/hero.jpg); /* two layers */
  background-size: cover; /* 背景圖片會被縮放以完全覆蓋背景區，可能背景圖片部分看不見 */
  background-position: top; /* 縮放時，上半部不會被裁切 */
}

Fade in Animation

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  80% {
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translate(0); /* reset */
  }
}

.who-need-this-animation {
  /* animation */
  animation-name: moveInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

RWD Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}