box-shadow와 text-shadow로 깊이와 구분을 표현합니다.
box-shadow는 x, y 이동, blur, spread, color 순서이며 inset을 쓰면 안쪽 그림자가 됩니다. 그림자는 보조 표현이어야 하며 경계 구분을 그림자에만 의존하지 않습니다.
이번 예제의 출발점은 box-shadow: 0 12px 30px rgb(0 0 0 / .15);입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 blur와 alpha 값을 각각 조절하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
큰 검은 그림자를 여러 겹 쓰면 화면이 탁하고 요소 위계가 불분명해집니다.
직접 바꿔보세요blur와 alpha 값을 각각 조절하세요.