Ausführliche Erklärung, wie man mit reinem CSS farbenfrohe und intelligente Schatten erzielt

In diesem Artikel erhalten Sie eine detaillierte Einführung in die Methode zur Realisierung farbenfroher und intelligenter Schatten mithilfe von reinem CSS. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Haben Sie sich jemals gefragt, wie Sie einen Schlagschatteneffekt erstellen können, der bestimmte Farben von einem Vordergrundelement übernimmt? Lesen Sie diesen Artikel und finden Sie heraus, wie!

Ich bin vor ein paar Tagen bei Home Depot (Home Depot, American Home Depot Company, der weltweit führende Einzelhändler für Hausbaumaterialien und -zubehör) vorbeigekommen. Dort wurden eine große Anzahl intelligenter Leuchten zum Verkauf angeboten , eine davon war eine Reihe von Die Glühbirnen befinden sich hinter dem Fernseher und projizieren ein Licht, das der Farbe ähnelt, die auf dem Vordergrundbildschirm des Fernsehers angezeigt wird, ähnlich dem unten abgebildeten. 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

🎜🎜Achtung Was passiert hinter dem Fernseher? Die im Vordergrund des Fernsehbildschirms dargestellten Farben werden von der Lampe in einen farbigen Schattenhintergrund projiziert. Wenn sich die Farben auf dem Bildschirm ändern, ändert sich auch die Farbe der Hintergrundprojektion. Wirklich cool, oder? 🎜🎜Nachdem ich das gesehen hatte, war mein erster natürlicher Gedanke: Könnte ich Web-Entwicklungstechniken verwenden, um einen farbenfrohen Schatten zu erstellen, der intelligent genug ist, um die Vordergrundfarbe zu simulieren? Es stellt sich heraus, dass dieser Effekt nur mit CSS erreicht werden kann. In diesem Artikel schauen wir uns an, wie das geht. [Teilen von Lernvideos: CSS-Video-Tutorial] 🎜🎜 Fangen wir an! 🎜

Machen Sie es möglich

🎜Wie Sie in den folgenden Abschnitten entdecken werden, scheint das Erstellen intelligenter farbiger Schatten nur mit CSS auf den ersten Blick eine schwierige Aufgabe zu sein, aber Wenn wir Schritt für Schritt vorgehen und die schwierigen Teile in kleinere Teile aufteilen, werden Sie feststellen, dass alles leichter zu verstehen und zu verdauen ist. In den folgenden Kapiteln erstellen wir ein Beispiel wie dieses: 🎜🎜🎜🎜Was Sie sehen, ist ein Bild von Sushi mit einem Schatten dahinter, der der Vordergrundfarbe entspricht. Um hervorzuheben, dass das, was wir tun, dynamisch ist, fügen Sie dem Schatten einen pulsierenden Animationseffekt hinzu. Lassen Sie uns anhand dieses Arbeitsbeispiels untersuchen, wie Sie alles zum Leben erwecken, indem Sie nur HTML und CSS verwenden. 🎜

Bild anzeigen

🎜Der HTML, der zum Anzeigen von Sushi verwendet wird, sieht so aus und ist nichts Besonderes daran: 🎜

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

🎜Wir haben ein übergeordnetes div element.parent, das ein untergeordnetes Element .suchi zur Anzeige enthält. Wir instanziieren es, indem wir ein Hintergrundbild verwenden. Die spezifischen Stilregeln des .sushi-Elements lauten wie folgt: 🎜rrreee🎜In den obigen Stilregeln setzen wir div auf 150 * 150 Breite und Höhe in Pixeln und legen Sie background-image und zugehörige Attribute fest. Wenn wir die Ergebnisse anzeigen, die wir jetzt erzielt haben, können wir den Inhalt wie unten gezeigt sehen. 🎜🎜🎜

Schatten erstellen

🎜Da wir nun unser Sushi-Bild angezeigt haben, ist der interessantere Teil die Definition der Schatten. Wir definieren den Schatten, indem wir ein untergeordnetes Pseudoelement ::after angeben, das 3 Dinge tut: 🎜

• Lokalisieren Sie direkt , wo der Das Bild befindet sich hinter dem Div;
• Erbt das gleiche Hintergrundbild wie das übergeordnete Element;
• Erzeugt durch Filter farbenfrohe Schlagschatten-Schatteneffekte .

🎜Die oben genannten 3 Funktionen werden durch die folgenden 2 Stilregeln implementiert: 🎜rrreee🎜Nehmen Sie sich einen Moment Zeit, um die Implementierung hier zu durchsuchen und achten Sie genau auf jedes Attribut und den entsprechenden Wert. Die bemerkenswertesten sind das Attribut background und das Attribut filter. Der Wert von background ist inherit, was bedeutet, dass es den Hintergrundwert des übergeordneten Elements erbt: 🎜rrreee🎜Das Attribut filter definiert zwei Filter Filterwerte: drop-shadow und blur🎜rrreee🎜Unser drop-shadow-Filter ist auf 50 % eingestellt Schwarzer Schatten für Transparenz. Der blur-Filter legt einen Unschärfeeffekt von 20px für das Element fest. Die Kombination dieser beiden Filter kann letztendlich bunte Schatten erzeugen. Wenn diese beiden Stilregeln wirksam werden, können wir die bunten Schatten sehen, die hinter dem Sushi-Bild erscheinen, wie unten gezeigt: 🎜🎜🎜🎜Bis hierher haben wir viel erreicht. Der Vollständigkeit halber: Wenn Sie bunte Schatten mit einer Animation zum Vergrößern und Verkleinern wünschen, kann Ihnen das folgende zusätzliche CSS dabei helfen: 🎜

.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 没有将你想提供的任意视觉意向转换为渲染目标位图的能力！

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

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man mit reinem CSS farbenfrohe und intelligente Schatten erzielt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!