Verwendung von CSS-Box-Shadow: 13 Tricks und Beispiele
CSS ist die Sprache, mit der Entwickler eine Webseite gestalten. Es steuert, wie HTML-Elemente auf einem Bildschirm, auf Papier oder in einer anderen Form von Medien angezeigt werden. CSS bietet die volle Anpassungsfähigkeit, um die Webseite in Ihrem eigenen Bild zu gestalten.
Sie können die Hintergrundfarbe, den Schriftstil, die Schriftfarbe, den Kastenschatten, den Rand und zahlreiche andere Eigenschaften eines Elements mithilfe von CSS ändern. In diesem Handbuch werden wir Sie durch einige effektive Anwendungen von Box-Shadow führen.
Was ist CSS-Box-Shadow?
Die Box-Shadow- Eigenschaft wird verwendet, um einen Schatten auf HTML-Elemente anzuwenden. Dies ist eine der am häufigsten verwendeten CSS-Eigenschaften zum Stylen von Boxen oder Bildern.
CSS-Syntax:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- horizontaler Versatz: Wenn der horizontale Versatz positiv ist, befindet sich der Schatten rechts neben dem Feld. Wenn der horizontale Versatz negativ ist, befindet sich der Schatten links neben dem Feld.
- vertikaler Versatz: Wenn der vertikale Versatz positiv ist, befindet sich der Schatten unter dem Feld. Wenn der vertikale Versatz negativ ist, befindet sich der Schatten über dem Feld.
- Unschärferadius: Je höher der Wert, desto unschärfer wird der Schatten.
- Ausbreitungsradius: Gibt an, wie stark sich der Schatten ausbreiten soll. Positive Werte erhöhen die Ausbreitung des Schattens, negative Werte verringern die Ausbreitung.
- Farbe: Zeigt die Farbe des Schattens an. Außerdem werden alle Farbformate wie rgba, hex oder hsla unterstützt.
Die Parameter für Unschärfe, Streuung und Farbe sind optional. Der interessanteste Teil von Box-Shadow ist, dass Sie ein Komma verwenden können, um Box-Shadow-Werte beliebig oft zu trennen. Dies kann verwendet werden, um mehrere Rahmen und Schatten auf den Elementen zu erstellen.
1. Fügen Sie links, rechts und unten in der Box einen dunklen Kastenschatten hinzu
Sie können drei Seiten (links, rechts und unten) der Box mit dem folgenden Box-Shadow-CSS mit Ihrem Ziel-HTML-Element sehr dunkle Schatten hinzufügen:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;Ausgabe:
2. Fügen Sie All Sides einen Dim-Box-Schatten hinzu
Sie können allen Seiten der Box helle Schatten hinzufügen, indem Sie das folgende Box-Shadow-CSS mit Ihrem Ziel-HTML-Element verwenden:
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;Ausgabe:
3. Fügen Sie unten und rechts einen dünnen Kastenschatten hinzu
Sie können am unteren und rechten Rand des Felds Schatten hinzufügen, indem Sie das folgende Box-Shadow-CSS mit Ihrem Ziel-HTML-Element verwenden:
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;Ausgabe:
4. Fügen Sie All Sides einen dunklen Kastenschatten hinzu
Sie können allen Seiten der Box dunklen Schatten hinzufügen, indem Sie das folgende Box-Shadow-CSS mit Ihrem Ziel-HTML-Element verwenden:
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;Ausgabe:
5. Fügen Sie allen Seiten Spread Shadow hinzu
Sie können allen Seiten des Felds mit dem folgenden Befehl mit Ihrem Ziel-HTML-Element Streuschatten hinzufügen:
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;Ausgabe:
6. Fügen Sie allen Seiten einen dünnen Randschatten hinzu
Sie können allen Seiten des Felds mithilfe des folgenden CSS mit Ihrem Ziel-HTML-Element einen einfachen Rahmenschatten hinzufügen:
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;Ausgabe:
7. Fügen Sie der unteren und linken Seite einen Kastenschatten hinzu
Sie können am unteren und linken Rand des Felds einen Schatten hinzufügen, indem Sie das folgende Box-Shadow-CSS mit Ihrem Ziel-HTML-Element verwenden:
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;Ausgabe:
8. Fügen Sie oben und links einen dunklen Kastenschatten, unten und rechts einen dunklen Schatten hinzu
Sie können einen hellen Schatten oben und links im Feld sowie einen dunklen Schatten unten und rechts im Feld hinzufügen, indem Sie das folgende CSS mit Ihrem Ziel-HTML-Element verwenden:
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;Ausgabe:
9. Fügen Sie allen Seiten einen dünnen, farbigen Randschatten hinzu
Sie können allen Seiten des Felds einen einfachen farbigen Rahmenschatten hinzufügen, indem Sie das folgende Feldschatten-CSS mit Ihrem Ziel-HTML-Element verwenden:
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;Ausgabe:
10. Fügen Sie am unteren und linken Rand des Felds mehrere farbige Randschatten hinzu
Sie können am unteren und linken Rand des Felds mithilfe des folgenden CSS mit Ihrem Ziel-HTML-Element mehrere farbige Randschatten hinzufügen:
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;Ausgabe:
11. Fügen Sie unten mehrere farbige Randschatten hinzu
Sie können mehrere farbige Randschatten am unteren Rand des Felds hinzufügen, indem Sie das folgende Feldschatten-CSS mit Ihrem Ziel-HTML-Element verwenden:
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;Ausgabe:
12. Fügen Sie am unteren und rechten Rand des Felds mehrere farbige Randschatten hinzu
Sie können am unteren und rechten Rand des Felds mithilfe des folgenden CSS mit Ihrem Ziel-HTML-Element mehrere farbige Randschatten hinzufügen:
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;Ausgabe:
13. Fügen Sie links und rechts Lichtschatten hinzu und verteilen Sie unten Schatten
Sie können links und rechts helle Schatten hinzufügen und mit dem folgenden Box-Shadow-CSS mit Ihrem Ziel-HTML-Element Schatten am unteren Rand des Felds verteilen:
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;Ausgabe:
Integrieren Sie CSS in eine HTML-Seite
Jetzt wissen Sie, wie Sie coole Box-Shadow-Effekte mithilfe von CSS hinzufügen. Sie können sie auf verschiedene Arten problemlos in HTML-Elemente integrieren.
Sie können es in die HTML-Seite selbst einbetten oder als separates Dokument anhängen. Es gibt drei Möglichkeiten, CSS in ein HTML-Dokument aufzunehmen:
Internes CSS
Eingebettete oder interne Stylesheets werden mithilfe des <style> -Elements in den Abschnitt <head> eines HTML-Dokuments eingefügt. Sie können eine beliebige Anzahl von <style> -Elementen in einem HTML-Dokument erstellen, diese müssen jedoch zwischen den Tags <head> und </ head> eingeschlossen sein . Hier ist ein Beispiel, das zeigt, wie internes CSS mit einem HTML-Dokument verwendet wird:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS box-shadow</title>
<style type="text/css">
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
</style>
</head>
<body>
<div>
<h2 class="heading">Style 4<h2>
<img class="image-box" src="MUO.jpg">
</div>
</body>
</html>Inline-CSS
Inline-CSS wird verwendet, um einem HTML-Element eindeutige Stilregeln hinzuzufügen. Es kann mit einem HTML-Element über das style- Attribut verwendet werden. Das style-Attribut enthält CSS-Eigenschaften in Form von "property: value", die durch ein Semikolon ( ; ) getrennt sind.
Alle CSS-Eigenschaften müssen in einer Zeile stehen, dh es dürfen keine Zeilenumbrüche zwischen den CSS-Eigenschaften auftreten. Hier ist ein Beispiel, das zeigt, wie Inline-CSS mit einem HTML-Dokument verwendet wird:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS box-shadow</title>
</head>
<body>
<div>
<h2 class="heading" style="text-align: center;">Style 4<h2>
<img src="MUO.jpg" class="image-box" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin-left: auto; margin-right: auto;">
</div>
</body>
</html>Externes CSS
Externes CSS ist die ideale Methode, um Stile auf HTML-Dokumente anzuwenden. Ein externes Stylesheet enthält alle Stilregeln in einem separaten Dokument (CSS-Datei). Dieses Dokument wird dann mithilfe des <link> -Tags mit dem HTML-Dokument verknüpft . Diese Methode ist die beste Methode zum Definieren und Anwenden von Stilen auf HTML-Dokumente, da für die betroffene HTML-Datei nur minimale Änderungen im Markup erforderlich sind. Hier ist ein Beispiel, das zeigt, wie externes CSS mit einem HTML-Dokument verwendet wird:
Erstellen Sie eine neue CSS-Datei mit der Erweiterung .css . Fügen Sie nun den folgenden CSS-Code in diese Datei ein:
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}Zuletzt erstellen Sie ein HTML-Dokument und fügen den folgenden Code in dieses Dokument ein:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS box-shadow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h2 class="heading">Style 4<h2>
<img class="image-box" src="MUO.jpg">
</div>
</body>
</html>Beachten Sie, dass die CSS-Datei über das <link> -Tag und das href- Attribut mit dem HTML-Dokument verknüpft ist .
Alle drei oben genannten Methoden (internes CSS, Inline-CSS und externes CSS) zeigen dieselbe Ausgabe an.
Machen Sie Ihre Webseite mit CSS elegant
Durch die Verwendung von CSS haben Sie die volle Kontrolle über das Design Ihrer Webseite. Sie können jedes HTML-Element mithilfe verschiedener CSS-Eigenschaften anpassen. Entwickler aus der ganzen Welt tragen zu CSS-Updates bei, und das seit ihrer Veröffentlichung im Jahr 1996. Daher müssen Anfänger viel lernen!
Zum Glück ist CSS anfängerfreundlich. Sie können einige hervorragende Übungen machen, indem Sie mit ein paar einfachen Befehlen beginnen und sehen, wohin Ihre Kreativität Sie führt.