그림자

제작할 디자인을 전송받았는데 디자인에 잘린 티셔츠 사진과 음영이 있습니다. 디자이너는 제품 이미지가 동적이며 콘텐츠 관리 시스템을 통해 업데이트할 수 있으므로 음영도 동적이어야 한다고 말합니다. 티셔츠 대신 바이저, 반바지 또는 기타 상품 이미지를 사용할 수 있습니다. CSS로 어떻게 하면 될까요?

CSS에는 box-shadowtext-shadow 속성이 있지만 그림은 텍스트가 아니므로 text-shadow를 사용할 수 없습니다. box-shadow를 사용하면 그림자가 티셔츠 주변이 아닌 주변 상자에 적용됩니다.

다행히도 drop-shadow() 필터라는 다른 옵션이 있습니다. 이렇게 하면 디자이너가 요청한 사항을 정확하게 수행할 수 있습니다. CSS의 그림자에는 다양한 옵션이 있으며, 각각 다른 사용 사례에 맞게 설계되었습니다.

상자 그림자

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

box-shadow 속성은 HTML 요소의 상자에 그림자를 추가하는 데 사용됩니다. 블록 요소와 인라인 요소에서 작동합니다.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow 값의 순서는 다음과 같습니다.

  1. 가로 오프셋: 양수는 왼쪽에서 밀어내고 음수는 오른쪽에서 밀어냅니다.
  2. 세로 오프셋: 양수는 위에서 아래로, 음수는 아래에서 위로 이동합니다.
  3. 흐리게 처리 반지름: 값이 클수록 그림자가 더 흐리게 처리되고 값이 작을수록 그림자가 더 선명하게 처리됩니다.
  4. 확산 반지름 (선택사항): 값이 클수록 그림자의 크기가 커지고 값이 작을수록 그림자의 크기가 작아집니다. 0으로 설정하면 흐리게 처리 반지름과 같은 크기가 됩니다.
  5. 색상: 유효한 색상 값 정의되지 않으면 계산된 텍스트 색상이 사용됩니다.

박스 그림자를 기본 외부 그림자가 아닌 내부 그림자로 만들려면 다른 속성 앞에 inset 키워드를 추가합니다.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

여러 개의 그림자

box-shadow를 사용하여 원하는 만큼 그림자를 추가할 수 있습니다. 이를 위해 쉼표로 구분된 값 집합 모음을 추가합니다.

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

box-shadow에 영향을 미치는 속성

상자에 border-radius를 추가하면 상자 그림자의 모양에도 영향을 미칩니다. 이는 CSS가 빛이 비추는 것처럼 상자의 도형을 기반으로 그림자를 만들기 때문입니다.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

box-shadow가 있는 상자가 overflow: hidden가 있는 컨테이너에 있으면 그림자도 이 오버플로를 벗어나지 않습니다.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

텍스트 음영

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

text-shadow 속성은 box-shadow 속성과 매우 유사합니다. 텍스트 노드에서만 작동합니다.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

text-shadow의 값은 box-shadow와 동일하며 순서도 동일합니다. 유일한 차이점은 text-shadow에는 spread 값과 inset 키워드가 없다는 점입니다.

box-shadow를 추가하면 상자의 도형으로 잘리지만 text-shadow에는 잘림이 없습니다. 즉, 텍스트가 완전히 또는 부분적으로 투명하면 그 텍스트를 통해 그림자가 보입니다.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

여러 개의 그림자

box-shadow와 마찬가지로 text-shadow를 사용하여 원하는 만큼 그림자를 추가할 수 있습니다. 쉼표로 구분된 값 집합 모음을 추가하면 3D 텍스트와 같은 멋진 텍스트 효과를 만들 수 있습니다.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

그림자

이미지의 잠재적 곡선을 따라가는 그림자를 만들려면 CSS drop-shadow 필터를 사용하세요. 이 그림자는 알파 마스크에 적용되므로 이 모듈의 시작 부분과 같이 컷아웃 이미지에 그림자를 추가하는 데 매우 유용합니다.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow 필터는 box-shadow와 동일한 값을 가지지만 inset 키워드와 spread 값은 허용되지 않습니다. filter 속성에 drop-shadow 값의 인스턴스를 여러 개 추가하여 원하는 만큼 그림자를 추가할 수 있습니다. 각 그림자는 마지막 그림자를 배치 참조점으로 사용합니다.

이해도 확인

그림자에 대한 지식 테스트

아래의 그림자 값 중 box-shadow에만 고유한 것은 무엇인가요?

확산 반경
inset
색상
세로 오프셋
반경 흐리게 처리
가로 오프셋

요소에 한 번에 13개의 박스 그림자만 허용됩니다.

거짓