Box Shadow

요소에 그림자를 적용

box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가한다.

쉼표로 구분해서 여러 그림자 효과를 입힐 수 있으며 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어진다.

Box Shadow의 속성

box-shadow는 문법적 규칙이 강하다. 그래서 box-shadow에 사용되는 5가지의 속성, 순서 모두 규칙에 맞게 작성해야 한다.

1. h-offset : x축으로 그림자 이동정도

2. v-offset : y축으로 그림자 이동정도

3. blur : 흐린 정도

4. spread : 그림자 사이즈

5. color : 색상

.cancel-button {
  background-color: #ff4949;
  transition: box-shadow 250ms ease-in;
}

.cancel-button:hover {
  /* box shadow는 문법적 규칙 참고해서 작성 */
  /* box-shadow: x축 y축 흐린정도 그림자사이즈 색상; */
  box-shadow: 0 10px 16px 0 rgba(255, 73, 73, 0.35);
}

Opacity

요소의 투명도를 지정

opacity CSS 속성은 요소의 불투명도를 설정한다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대이다.

opacity의 속성값은 0~1사이의 값이며 소수도 가능하다.

.box {
  background-color: #ff4949;
  opacity: 0;
  opacity: 0.57;
  opacity: 1;
}

참고 자료

box-shadow - CSS: Cascading Style Sheets | MDN
opacity - CSS: Cascading Style Sheets | MDN
김버그의 CSS는 재밌다 - 기초부터 실무 레벨까지