그림자

CSS 팟캐스트 - 017: 그림자 를 통해 개인정보처리방침을 정의할 수 있습니다.

제작할 디자인을 보냈는데 그 디자인에 티셔츠 사진이 있다고 가정해 보겠습니다. 그림자가 있습니다. 디자이너가 제품 이미지가 동적이라고 말합니다. 콘텐츠 관리 시스템을 통해 업데이트할 수 있습니다 그림자도 동적이어야 합니다. 티셔츠 대신 바이저, 반바지, 기타 물품일 수 있습니다. CSS로 어떻게 하면 될까요?

CSS에는 box-shadow 및 text-shadow 속성, 사진이 텍스트가 아니므로 text-shadow를 사용할 수 없습니다. box-shadow를 사용하면 그림자가 주변 상자에 표시됩니다. 아닙니다.

다행히도 다른 옵션이 있습니다. drop-shadow() 필터 이렇게 하면 디자이너가 요청한 작업을 정확하게 수행할 수 있습니다. CSS에는 그림자와 관련된 많은 옵션이 있습니다. 각각 다른 사용 사례에 맞게 설계됩니다

상자 그림자

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;
}

상자 그림자에 영향을 미치는 속성

상자에 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;
}

텍스트 음영

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%);
}

여러 그림자

text-shadow로 그림자를 원하는 만큼 추가할 수 있습니다. box-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 값의 여러 인스턴스를 추가하여 이러한 결과를 얻을 수 있습니다. 각 그림자는 마지막 그림자를 배치 기준점으로 사용합니다.

이해도 확인

그림자에 관한 지식 테스트