Ich stelle oft eine Frage: Kann ich Schatten mit Gradientenfarben anstelle von festen Farben erstellen? Es gibt keine besonderen Eigenschaften in CSS, um dies zu erreichen (glauben Sie mir, ich habe danach gesucht), und alle Blog -Beitr?ge, die Sie dazu finden, sind im Grunde einige ?hnliche CSS -Tricks mit Gradienten. Wir werden als n?chstes einige dieser Tipps abdecken.

Aber zuerst ... ist ein weiterer Artikel über Gradientenschatten? Wirklich?

Ja, dies ist ein weiterer Beitrag zu diesem Thema, aber es ist anders. Zusammen werden wir die Grenzen überschreiten und eine L?sung finden, die etwas abdeckt, das ich nirgendwo anders gesehen habe: Transparenz . Die meisten Tipps funktionieren, wenn Elemente nicht transparente Hintergründe haben, aber was ist, wenn wir transparente Hintergründe haben? Wir werden diese Situation hier besprechen!

Bevor wir anfangen, lassen Sie mich meinen Gradienten -Schattengenerator vorstellen. Sie müssen nur die Konfiguration anpassen und k?nnen den Code abrufen. Aber lesen Sie weiter, denn ich werde Ihnen helfen, die gesamte Logik hinter dem Generieren des Codes zu verstehen.

Katalog

• Nicht-transparente L?sung
• transparente L?sung
• abgerundete Ecken
hinzufügen
• Zusammenfassung

Nicht-transparente L?sung

Beginnen wir mit L?sungen, die 80% der gemeinsamen Situationen funktionieren. Der typischste Fall ist, dass Sie ein Element mit einem Hintergrund verwenden und ihm einen Gradientenschatten hinzufügen müssen. Hier besteht keine Notwendigkeit, Transparenz zu berücksichtigen.

Die L?sung besteht darin, sich auf ein Pseudoelement zu verlassen, das den Gradienten definiert. Sie setzen es hinter das eigentliche Element und wenden einen Unsch?rfenfilter darauf an.

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

Der Code sieht viel aus, weil er viel hat. Hier erfahren Sie, wie Sie Box-Shadow anstelle eines Gradienten verwenden, wenn wir feste Farben anstelle von Gradienten verwenden.

<code>box-shadow: 10px 8px 10px 5px orange;</code>

Dies sollte Ihnen eine gute Vorstellung davon geben, was der Wert im ersten Code -Stück tut. Wir haben X- und Y -Offsets, Fuzzy -Radius und Diffusionsabstand. Beachten Sie, dass wir einen negativen Diffusionsabstandswert aus der Einschubeigenschaft ben?tigen.

Dies ist eine Demo, die nebeneinander mit klassisch

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

Wir verwenden nicht Z -Index: -1, sondern eine negative übersetzung entlang der Z -Achse. Wir haben alles in translate3d () eingestellt. Vergessen Sie nicht, das Transformationsstil zu verwenden: Preserve-3D auf dem Hauptelement;

Soweit ich wei?, hat diese L?sung keine Nebenwirkungen ... aber vielleicht sehen Sie eine. Wenn ja, teilen Sie bitte den Kommentarbereich mit und versuchen Sie, eine L?sung zu finden!

Wenn Sie aus irgendeinem Grund keine 3D-Konvertierung verwenden k?nnen, besteht eine andere L?sung darin, sich auf zwei Pseudo-Elemente zu verlassen-:: vor und :: Nachher. Einer erstellt einen Gradientenschatten, der andere kopiert den Haupthintergrund (und andere Stile, die Sie m?glicherweise ben?tigen). Auf diese Weise k?nnen wir die Stapelreihenfolge von zwei Pseudoelementen leicht steuern.

<code>box-shadow: 10px 8px 10px 5px orange;</code>

Es ist wichtig zu beachten, dass wir die dazu zwingen, einen Stapelkontext zu erstellen, indem wir Z-Index: 0 oder ein anderes Attribut deklarieren, das dasselbe tut. Vergessen Sie auch nicht, dass das Pseudo-Element die Füllkiste des Hauptelements als Referenz behandelt. Wenn das Hauptelement Grenzen hat, muss dies bei der Definition des Pseudo-Element-Stils berücksichtigt werden. Sie werden feststellen, dass ich Inset: -2px auf :: nach der Betrachtung von Grenzen benutze, die für Hauptelemente definiert sind.

beschnitten werden kann. In der Tat gibt es keine M?glichkeit, dies zu tun, aber wir k?nnen es mit einem bestimmten Polygonmuster simulieren:

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

Der blaue Bereich ist der Teil, der nach dem Auftragen des Clip-Pfads sichtbar ist. Ich benutze Blue nur, um das Konzept zu veranschaulichen, aber in Wirklichkeit sehen wir nur Schatten innerhalb des Bereichs. Wie Sie sehen k?nnen, definieren wir vier Punkte und ihre Werte sind sehr gro? (b). Mein gro?er Wert ist 100Vmax, aber es kann jeder gro?e Wert sein, den Sie wollen. Die Idee ist sicherzustellen, dass wir genug Schattenraum haben. Wir haben vier weitere Punkte, die die Eckpunkte des Pseudoelements sind.

Pfeile geben den Pfad an, der das Polygon definiert. Wir beginnen von (-b, -b) und bis wir erreichen (0,0). Insgesamt brauchen wir 10 Punkte. Nicht 8 Punkte, weil die beiden Punkte ((-b, -b) und (0,0)) zweimal im Pfad wiederholt werden.

Wir müssen auch das Letzte tun , n?mlich den Diffusionsabstand und den Offset. Die obige Demonstration funktioniert einfach, weil dies ein spezieller Fall ist, sowohl der Offset- als auch der Diffusionsabstand sind gleich 0.

in (den Bereich innerhalb des grünen Randes im Beispiel) erregen. Wir müssen die Position der vier Punkte im Clip-Pfad einstellen.

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

<code>box-shadow: 10px 8px 10px 5px orange;</code>

Ben?tigen wir noch 3D -Conversion -F?higkeiten?

hinzufügen

Dieser Teil ist sehr langweilig und es f?llt mir schwer, eine allgemeine L?sung zu finden, die nicht auf magische Zahlen beruht. Am Ende hatte ich eine sehr komplexe L?sung, die nur eine Pseudoelement verwendet, aber der Code ist ein Chaos und deckt nur einige spezifische Situationen ab. Ich denke nicht, dass es sich lohnt, diesen Weg zu erkunden.

Um den Code zu vereinfachen, habe ich beschlossen, ein zus?tzliches Element einzufügen. Im Folgenden sind die Marke:

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

Ich verwende benutzerdefinierte Element , um potenzielle Konflikte mit externen CSS zu vermeiden. Ich kann

<code>box-shadow: 10px 8px 10px 5px orange;</code>

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

<code>.box {
  position: relative;
  z-index: 0; /* 我們強(qiáng)制創(chuàng)建一個(gè)堆疊上下文 */
}
/* 創(chuàng)建陰影 */
.box::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -5px;
  transform: translate(10px, 8px);
  background: /* .. */;
  filter: blur(10px);
}
/* 復(fù)制主元素樣式 */
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* 繼承在主元素上定義的所有裝飾 */
  background: inherit;
  border: inherit;
  box-shadow: inherit;
}</code>

<code>clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)</code>

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

<code>box-shadow: 10px 8px 10px 5px orange;</code>

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

Das obige ist der detaillierte Inhalt vonVerschiedene M?glichkeiten, CSS -Gradientenschatten zu erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!