LabEx
로그인무료 가입

CSS 동적 그림자 생성

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 CSS 를 사용하여 동적 그림자를 만드는 방법을 살펴봅니다. ::after 가상 요소와 background, filter, opacity, z-index와 같은 다양한 CSS 속성을 사용하여 box-shadow 와 유사하지만 요소 자체의 색상을 기반으로 하는 효과를 만드는 방법을 배우게 됩니다. 이 랩을 마치면 디자인에 깊이와 입체감을 더할 수 있게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 94%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

동적 그림자

index.html 및 style.css는 이미 VM 에 제공되었습니다.

요소의 색상을 기반으로 하는 그림자를 만들려면 다음 단계를 따르세요.

  1. ::after 가상 요소에 position: absolute를 사용하고 width 및 height를 100%로 설정하여 부모 요소의 사용 가능한 공간을 채웁니다.

  2. background: inherit를 사용하여 부모 요소의 background를 상속합니다.

  3. top을 사용하여 가상 요소를 약간 오프셋합니다. 그런 다음, filter: blur()를 사용하여 그림자를 만들고 opacity를 설정하여 반투명하게 만듭니다.

  4. z-index: -1을 설정하여 가상 요소를 부모 요소 뒤에 배치합니다. 부모 요소에는 z-index: 1을 설정합니다.

다음은 HTML 및 CSS 코드의 예입니다.

<div class="dynamic-shadow"></div>
.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하세요. 그런 다음, Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 동적 그림자 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.