요소에 그림자를 적용
box-shadow
CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가한다.
쉼표로 구분해서 여러 그림자 효과를 입힐 수 있으며 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어진다.
box-shadow
는 문법적 규칙이 강하다. 그래서 box-shadow
에 사용되는 5가지의 속성, 순서 모두 규칙에 맞게 작성해야 한다.
h-offset : x축으로 그림자 이동정도
v-offset : y축으로 그림자 이동정도
blur : 흐린 정도
spread : 그림자 사이즈
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
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는 재밌다 - 기초부터 실무 레벨까지