순수 CSS를 사용하여 다채롭고 지능적인 그림자를 얻는 방법에 대한 자세한 설명

이 글에서는 순수 CSS를 사용하여 다채롭고 지능적인 그림자를 구현하는 방법을 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

전경 요소에서 특정 색상을 상속하는 그림자 효과를 만드는 방법이 궁금하신가요? 이 글을 읽고 방법을 알아보세요!

저는 며칠 전 Home Depot(Home Depot, American Home Depot Company, 세계 최고의 주택 건축 자재 및 소모품 소매업체)을 지나갔습니다. 그 곳에서는 수많은 스마트 조명을 판매하고 있었습니다. , 그 중 하나는 시리즈였습니다. 전구는 TV 뒤에 있으며, 아래 그림과 유사하게 TV 전경 화면에 표시되는 색상과 비슷한 빛을 투사합니다. Home Depot，美国家得宝公司，全球领先的家居建材用品零售商），他们正在大规模展销正在出售的智能灯，其中一种是一系列灯泡位于电视机后面，它们会投射出与电视机前景屏幕上显示的颜色相近的灯光，类似于以下图片所示。

注意电视后面发生了什么。电视机屏幕前景中显示的颜色被灯投影成彩色阴影背景。随着屏幕上颜色的变化，背景投影颜色也发生变化。真的很酷，对吧？

看到这一点后，自然而然地我首先想到的是，能否使用 web 开发技术创建一个五颜六色的，并且足够聪明可以模拟前景颜色的阴影呢？事实证明，在只使用 CSS 的情况下，完全可以实现这种效果。在本文中，我们将研究如何实现。【学习视频分享：css视频教程】

开干！

令其成真

在接下来的段落中你将会发现，刚开始时，乍一看仅使用 CSS 来创建智能的彩色阴影似乎是一项艰巨的任务，当我们循序渐进，把困难部分拆分成更小的部分时，你就会发现一切都会变得容易理解消化。在接下来的章节中，我们将创建一个如下所示的示例：

你看到的是一张寿司的图片，后面有与前景颜色相对应的阴影。为了强调我们所做的是动态的，给阴影增加了一个脉动动画效果。通过这个有效的示例，让我们深入探讨如何仅在使用 HTML 和 CSS 的情况下让一切变得生动起来。

展示图片

用于展示寿司的 HTML 如下所示并没有什么特别：

<div class="parent">
  <div class="colorfulShadow sushi"></div>
</div>

我们有一个父级 div 元素 .parent，它包含一个子级元素 .suchi 用于展示。我们通过使用一张背景图片的形式来实例化，.sushi 元素的具体样式规则如下：

.sushi {
  margin: 100px;
  width: 150px;
  height: 150px;
  background-image: url("https://www.kirupa.com/icon/1f363.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

在上面样式规则中，我们将 div 设置为 150 * 150 宽高像素，并且设置了 background-image 及相关属性，如果展示一下我们现在所实现的结果，可以看到如下图所示的内容。

创建阴影

现在我们已经展示出了我们的寿司图片，剩下更加有趣的部分就是来定义阴影。我们将使用指定一个子伪元素 ::after 来定义阴影，它将做 3 件事情：

• 直接位于图片所在 div 的后面；
• 继承与父元素相同的背景图像；
• 通过滤镜产生出多彩的 drop-shadow 阴影效果。

上述3个功能由以下2个样式规则实现：

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

花一点时间来浏览下这里的实现，密切关注每个属性和对应值。最值得注意的是 background 属性和 filter 属性。 background 的值是 inherit，这意味着它将继承父级元素的背景值：

background: inherit;

filter 属性定义了两个滤镜值：drop-shadow 和 blur

filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);

我们的 drop-shadow 滤镜设置了一个 50% 透明度的黑色阴影。blur 滤镜为为元素设置 20px 的模糊效果。这两个滤镜的结合最终就可以创造出多彩的阴影，当这两条样式规则生效时，我们就可以看到如下图出现在寿司图像后面彩色的阴影：

到这一点，我们已经实现了很多。为了完整性，如果你想要多彩的阴影具有放大缩小的动画效果，以下额外的 CSS

🎜🎜주의 TV 뒤에서 무슨 일이 일어나는가? 텔레비전 화면 전경에 표시되는 색상은 램프에 의해 유색 그림자 배경으로 투사됩니다. 화면의 색상이 변경되면 배경 투사 색상도 변경됩니다. 정말 멋지죠? 🎜🎜 이것을 보고 처음 든 생각은 웹 개발 기술을 사용하여 전경색을 시뮬레이션할 만큼 스마트한 다채로운 그림자를 만들 수 있을까?였습니다. 이 효과는 CSS만 사용해도 얻을 수 있는 것으로 나타났습니다. 이번 글에서는 그 방법을 살펴보겠습니다. [학습 영상 공유: CSS 영상 튜토리얼] 🎜🎜 시작해 보세요! 🎜

실행

🎜다음 단락에서 알 수 있듯이 CSS만 사용하여 스마트 색상 그림자를 만드는 것은 언뜻 보기에 어려운 작업처럼 보일 수 있습니다. 단계별로 진행하여 어려운 부분을 더 작은 부분으로 나누면 모든 것이 이해하고 소화하기가 더 쉬워진다는 것을 알게 될 것입니다. 다음 장에서는 다음과 같은 예제를 만들 것입니다: 🎜🎜🎜🎜보시는 것은 전경색에 해당하는 그림자가 뒤에 있는 초밥 사진입니다. 우리가 하고 있는 일이 역동적이라는 점을 강조하려면 그림자에 맥동하는 애니메이션 효과를 추가하세요. 이 실제 예제를 통해 HTML 및 CSS만 사용하여 모든 것을 생생하게 만드는 방법을 살펴보겠습니다. 🎜

이미지 표시

🎜스시를 표시하는 데 사용되는 HTML은 다음과 같으며 특별한 내용은 없습니다. 🎜

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
  /* animation time! */
  animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}

@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}

🎜부모 div가 있습니다. 요소.parent, 표시할 하위 요소 .uchi가 포함되어 있습니다. 배경 이미지를 사용하여 인스턴스화합니다. .sushi 요소의 특정 스타일 규칙은 다음과 같습니다. 🎜rrreee🎜위 스타일 규칙에서 div를 150 * 150 픽셀의 너비와 높이를 설정하고 Background-image 및 관련 속성을 설정한 결과를 지금 보여드리면 아래와 같은 내용을 볼 수 있습니다. 🎜🎜🎜

그림자 만들기

🎜이제 스시 이미지가 표시되었으므로 더 흥미로운 부분은 그림자를 정의하는 것입니다. 3 작업을 수행하는 하위 의사 요소 ::after를 지정하여 그림자를 정의합니다. 🎜

• 여기서 를 직접 찾습니다. 이미지는 div 뒤에 있습니다.;
• 상위 요소와 동일한 배경 이미지를 상속합니다.
• 필터를 통해 다채로운 그림자 그림자 효과를 생성합니다. .

🎜위의 3개 함수는 다음 2가지 스타일 규칙에 따라 구현됩니다. 🎜rrreee🎜잠시 시간을 내어 여기에서 구현을 살펴보고 각 속성과 해당 값에 주의를 기울이세요. 가장 주목할만한 것은 Background 속성과 filter 속성입니다. 배경의 값은 inherit입니다. 이는 상위 요소의 배경 값을 상속한다는 의미입니다. 🎜rrreee🎜 filter 속성은 두 개의 필터를 정의합니다. 필터 값: drop-shadow 및 blur🎜rrreee🎜저희 drop-shadow 필터는 50%로 설정되어 있습니다. 투명성을 위한 검은 그림자. blur 필터는 요소에 대해 20px의 흐림 효과를 설정합니다. 이 두 필터의 조합은 궁극적으로 다채로운 그림자를 만들 수 있습니다. 이 두 가지 스타일 규칙이 적용되면 아래와 같이 스시 이미지 뒤에 나타나는 다채로운 그림자를 볼 수 있습니다. 🎜🎜🎜🎜지금까지 우리는 많은 것을 성취했습니다. 완전성을 기하기 위해 확대 및 축소 애니메이션으로 다채로운 그림자를 원하는 경우 다음 추가 CSS를 사용하면 이를 달성하는 데 도움이 될 수 있습니다. 🎜

.colorfulShadow {
  position: relative;
}
.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
  /* animation time! */
  animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}

@keyframes oscillate {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.3, 1.3);
  }
}

如果你想在不使用循环动画效果的情况下增强交互性，也可以使用 CSS transition 来改变阴影的行为，如在 hover 操作情况下。需要强调的难点是对待伪元素只需要像对待用 HTML 创建的或 JavaScript 动态创建的元素一样，唯一的不同是这个元素完全是仅使用 CSS 创建的！

结论

伪元素允许我们使用 CSS 来创建通常在 HTML 和 JavaScript 领域内完成的元素创建任务。对于我们多彩的智能阴影来说，我们依赖于父元素有一个背景图像集，这使得我们定义一个既可以继承父级背景细节又可以设置模糊效果和投影效果的子元素变得容易。虽然这一切都很好，减少了我们大量的复制粘贴工作，但是这种方法也不是很灵活。

如果我想将这样的阴影应用到一个不只是带有背景图像的空元素上，该怎么办呢？如果我有一个 HTML 元素如一个按钮或组合框，我想应用这种阴影效果呢？一种解决方案是依靠  JavaScript 复制 DOM 中的相应元素，将其放置在前台元素底层，应用过滤器，这样也是一种方法。虽然这可以实现效果，但我想到这个有点重复 DOM 元素的沉重过程就不寒而栗。更糟糕的是，JavaScript 没有将你想提供的任意视觉意向转换为渲染目标位图的能力！

更多编程相关知识，请访问：编程视频！！

위 내용은 순수 CSS를 사용하여 다채롭고 지능적인 그림자를 얻는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!