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?

Das Box Schatten Mit dieser Eigenschaft wird ein Schatten auf HTML-Elemente angewendet. Dies ist eine der am häufigsten verwendeten CSS-Eigenschaften zum Stylen von Boxen oder Bildern.

CSS-Syntax:

Kastenschatten: [horizontaler Versatz] [vertikaler Versatz] [Unschärferadius] [optionaler Ausbreitungsradius] [Farbe];

1. 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.
instagram viewer
2. 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.
3. Unschärferadius: Je höher der Wert, desto unschärfer wird der Schatten.
4. Ausbreitungsradius: Es gibt an, wie viel sich der Schatten ausbreiten soll. Positive Werte erhöhen die Ausbreitung des Schattens, negative Werte verringern die Ausbreitung.
5. Farbe: Es bezeichnet die Farbe des Schattens. 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:

Kastenschatten: 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:

Kastenschatten: 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:

Kastenschatten: rgba (0, 0, 0, 0,15) 1,95px 1,95px 2,6px;

Ausgabe:

4. Füge 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:

Kastenschatten: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Ausgabe:

5. Füge allen Seiten Spread Shadow hinzu

Sie können allen Seiten des Felds mit dem folgenden Befehl mit Ihrem Ziel-HTML-Element Streuschatten hinzufügen:

Kastenschatten: 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:

Kastenschatten: 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 Einschub;

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:

Kastenschatten: 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:

Kastenschatten: 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:

Kastenschatten: 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:

Kastenschatten: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px Einschub, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px Einschub;

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:

Kastenschatten: 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:

Kastenschatten: 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:

Kastenschatten: 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.

Verbunden: 11 Nützliche Tools zum Überprüfen, Bereinigen und Optimieren von CSS-Dateien

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 in das Feld eingefügt Abschnitt eines HTML-Dokuments mit dem Element. Sie können eine beliebige Anzahl von erstellen Elemente in einem HTML-Dokument, aber sie müssen zwischen den eingeschlossen werden und Stichworte. Hier ist ein Beispiel, das zeigt, wie internes CSS mit einem HTML-Dokument verwendet wird:

Stil 4

Inline-CSS

Inline-CSS wird verwendet, um einem HTML-Element eindeutige Stilregeln hinzuzufügen. Es kann mit einem HTML-Element über das verwendet werden Stil Attribut. Das style-Attribut enthält CSS-Eigenschaften in Form von "Eigentumswert" durch ein Semikolon getrennt (;).

Verbunden: Erfahren Sie, wie Sie zweidimensionale Websites mit CSS Grid erstellen

Alle CSS-Eigenschaften müssen in einer Zeile stehen, d. H. 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:

Stil 4

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 mit dem HTML-Dokument verknüpft Etikett. 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 dem .css Erweiterung. Fügen Sie nun den folgenden CSS-Code in diese Datei ein:

. Überschrift {
Textausrichtung: Mitte;
}
.image-box {
Bildschirmsperre;
Rand links: Auto;
Rand rechts: Auto;
Kastenschatten: 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:

Stil 4

Beachten Sie, dass die CSS-Datei über mit dem HTML-Dokument verknüpft ist Tag und href Attribut.

Alle oben genannten drei 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. Anfänger müssen also 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.

10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können

Möchten Sie mehr über die Verwendung von CSS erfahren? Probieren Sie zunächst diese grundlegenden CSS-Codebeispiele aus und wenden Sie sie dann auf Ihre eigenen Webseiten an.

Weiter lesen

Über den Autor