Der Schlagschatten ist ein Effekt, der beim Rendern auf der Webseite einen Schatten hinter die ausgewählten HTML-Elemente fallen lässt oder hinzufügt. Dieser Effekt kann mit der „ Schlagschatten() „Methode als Wert für CSS“ Filter ”-Eigenschaft oder die Verwendung der „ Box Schatten ' Eigentum. Durch die Verwendung der „Box-Shadow“-Eigenschaft können die visuelle Verbesserung, das Benutzererlebnis, die Hervorhebung und der Fokus auf ein bestimmtes HTML-Zielelement gelenkt werden.
In dieser Anleitung wird die Vorgehensweise zum Erstellen eines Schlagschatteneffekts mithilfe der Box-Shadow-Eigenschaft veranschaulicht:
-
- Erstellen Sie mithilfe der Box-Shadow-Eigenschaft einen festen Schlagschatten
- Erstellen Sie mit der Box-Shadow-Eigenschaft einen verschwommenen Schlagschatten
- Erweitern Sie den Schlagschattenbereich
Wie erstelle ich Schlagschatten in CSS3 mithilfe der Box-Shadow-Eigenschaft?
Der ' Box Schatten Mit dieser Eigenschaft kann der Entwickler eine visuelle Hierarchie erstellen, indem er die relative Position von Elementen auf der Seite angibt. Dadurch können Webseitenersteller die Illusion erzeugen, dass Objekte Schatten auf Oberflächen werfen, wodurch Elemente interaktiver wirken.
Syntax
Die Eigenschaft „box-shadow“ hat die folgende Syntax:
Box Schatten: [ horizontaler Versatz ] [ vertikaler Versatz ] [ Unschärferadius ] [ Ausbreitungsradius ] [ Farbe ] ;
Eine Erklärung der in der obigen Syntax verwendeten Begriffe:
-
- Zunächst war das „ horizontaler Versatz ” ruft/speichert die X-Achsenposition und das „ Negativ Der Wert „“ setzt den Schatten nach links und umgekehrt.
- Der ' vertikaler Versatz Der Wert speichert die Position der Y-Achse, der Wert „ positiv Der Wert „“ setzt den Schatten nach unten und umgekehrt im Fall von „ Negativ ' Wert.
- Als nächstes wird das „ Unschärferadius Der Wert „Wie der Name schon sagt“ legt die Unschärfe des Schattens fest.
- Der ' Ausbreitungsradius Der Wert gibt an, um wie viel Radius sich der Schatten ausdehnen soll.
- Der ' Farbe „ legt die Schattenfarbe fest, sie kann im „ HSL ' oder ' RGB ”-Format ebenfalls.
Lassen Sie uns nun zum besseren Verständnis einige Beispiele durchgehen:
Beispiel 1: Anwenden eines festen Schlagschattens mithilfe der Box-Shadow-Eigenschaft
Zum Festlegen des festen Schlagschattens werden nur die Richtungen und die Schattenfarbe als Wert in das Feld „ Box Schatten ' Eigentum:
< Stil >.boxShadowExample {
Breite: 210px;
Rand: 2px feste Maisseide;
Höhe: 210px;
Hintergrundfarbe: #f0f0f0;
box-shadow: 10px 10px waldgrün;
}
Stil >
Im obigen Code:
-
- Zuerst wird das HTML-Element mit der Klasse „ boxShadowExample “. Und der Wert von „ 210px ” wird bereitgestellt an die „ Höhe ' Und ' Breite ' Eigenschaften. Nutzen Sie auch die „ Grenze ' Und ' Hintergrundfarbe ”-Eigenschaften zur besseren Visualisierung.
- Als nächstes legen Sie den Wert „ 10px 10px waldgrün ' zum ' Box Schatten ” CSS-Eigenschaft. Der ' 10px „ist der horizontale und vertikale Versatz, der den Ort bestimmt, an dem der Schatten angewendet werden muss. Und das ' Waldgrün „ist die Farbe des Schattens.
Nach der Kompilierung sieht die Webseite folgendermaßen aus:
Die Ausgabe bestätigt, dass mithilfe der Box-Shadow-Eigenschaft ein Schlagschatten vom Volumenkörpertyp platziert wurde.
Beispiel 2: Anwenden eines verschwommenen Schlagschattens mithilfe der Box-Shadow-Eigenschaft
Um den bereits aufgetragenen Schatten unscharf zu machen, wird vor der Farbe für „ Box Schatten ' Eigentum. Besuchen Sie den unten aktualisierten Code:
< Stil >.boxShadowExample {
Breite: 210px;
Rand: 2px feste Maisseide;
Höhe: 210px;
Hintergrundfarbe: Weißrauch;
box-shadow: 10px 10px 15px waldgrün;
}
Stil >
Gemäß dem obigen Code ist der Schatten jetzt „ 15px ' verschwommen. Nach Abschluss der Kompilierungsphase sieht die Webseite folgendermaßen aus:
Die obige Abbildung zeigt, dass der Schatten jetzt unscharf ist.
Beispiel 3: Erweitern des Schlagschattenbereichs
Der Spread-Wert wird dem „ Box Schatten ”-Eigenschaft zum Erweitern des Schattenbereichs. Der Wert des Spreads muss im numerischen Format angegeben werden. Wie im folgenden Codeausschnitt wird der Schattenbereich erweitert auf „ 20px ”:
< Stil >.boxShadowExample {
Breite: 210px;
Rand: 2px feste Maisseide;
Höhe: 210px;
Hintergrundfarbe: Weißrauch;
box-shadow: 10px 10px 15px 20px waldgrün;
}
Stil >
Nach der Ausführung sieht der Schlagschatten nun so aus:
Wie Sie sehen können, wird der Schattenbereich jetzt um 20 Pixel vergrößert.
Abschluss
Der ' Box Schatten „Eigenschaft wird für die Schaffung eines“ genutzt Schlagschatten ”-Effekt auf ausgewählte HTML-Elemente. Der ' Schlagschatten „Eigenschaft akzeptiert fünf Werte“, horizontaler Versatz “, „ vertikaler Versatz “, „ Unschärferadius “, „ Ausbreitungsradius ' Und ' Farbe “. Die Werte „horizontaler Versatz“ und „vertikaler Versatz“ legen die Abmessungen des Schattens fest, von dem aus der Schlagschatten entstehen soll. Der Wert „Unschärferadius“ macht den Schatten unscharf und der Wert „Ausbreitungsradius“ erweitert den Schattenbereich.