Home-theater-designers
CSS ist die Sprache, die Entwickler verwenden, um eine Webseite zu 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 Rahmenschatten, den Rand und zahlreiche andere Eigenschaften eines Elements mit CSS ändern. In diesem Handbuch führen wir Sie durch einige effektive Anwendungen von Box-Shadow.
Was ist CSS-Box-Shadow?
Die Box Schatten -Eigenschaft wird verwendet, um einen Schatten auf HTML-Elemente anzuwenden. Es ist eine der am häufigsten verwendeten CSS-Eigenschaften zum Gestalten 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 von der Box. Und wenn der horizontale Versatz negativ ist, befindet sich der Schatten links von der Box.
- vertikaler Versatz: Wenn der vertikale Versatz positiv ist, befindet sich der Schatten unter der Box. Und wenn der vertikale Versatz negativ ist, befindet sich der Schatten über der Box.
- Unschärferadius: Je höher der Wert, desto verschwommener wird der Schatten.
- Spreizradius: Es gibt an, wie weit sich der Schatten ausbreiten soll. Positive Werte erhöhen die Streuung des Schattens, negative Werte verringern die Streuung.
- Farbe: Es bezeichnet die Farbe des Schattens. Außerdem unterstützt es jedes Farbformat wie rgba, hex oder hsla.
Die Parameter Unschärfe, Streuung und Farbe sind optional. Der interessanteste Teil von Box-Shadow ist, dass Sie Box-Shadow-Werte beliebig oft durch Kommas trennen können. Dies kann verwendet werden, um mehrere Ränder und Schatten auf den Elementen zu erstellen.
1. Fügen Sie links, rechts und unten in der Box einen Dim-Box-Shadow hinzu
Sie können drei Seiten (links, rechts und unten) der Box sehr schwache Schatten hinzufügen, indem Sie das folgende Box-Shadow-CSS mit Ihrem Ziel-HTML-Element verwenden:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;Ausgabe:
2. Fügen Sie All Sides einen Dim-Box-Shadow 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 der unteren und rechten Seite einen dünnen Kastenschatten hinzu
Sie können der unteren und rechten Seite der Box Schatten hinzufügen, indem Sie das folgende Box-Shadow-CSS mit Ihrem Ziel-HTML-Element verwenden:
wie man ss auf Snap macht, ohne dass sie 2021 wissen
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;Ausgabe:
4. Fügen Sie All Sides einen Dark Box-Shadow 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 auf allen Seiten Spreizschatten hinzu
Sie können allen Seiten der Box mit dem folgenden Befehl mit Ihrem Ziel-HTML-Element Spreizschatten 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 der Box einen einfachen Rahmenschatten hinzufügen, indem Sie das folgende CSS mit Ihrem Ziel-HTML-Element verwenden:
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 Box-Schatten hinzu
Sie können der unteren und linken Seite der Box 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 der oberen und linken Seite einen Dim-Box-Schatten hinzu, den unteren und rechten Seiten einen dunklen Schatten
Sie können der oberen und linken Seite der Box einen hellen Schatten sowie der unteren und rechten Seite der Box einen dunklen Schatten 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 der Box einen einfachen farbigen Rahmenschatten hinzufügen, indem Sie das folgende Box-Shadow-CSS mit Ihrem HTML-Zielelement verwenden:
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;Ausgabe:
10. Fügen Sie der unteren und linken Seite der Box mehrere farbige Randschatten hinzu
Sie können der unteren und linken Seite des Felds mehrere farbige Rahmenschatten hinzufügen, indem Sie das folgende CSS mit Ihrem HTML-Zielelement verwenden:
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:
Fehler beim Zugriff auf Ordnerinhalte nicht hochgeladen
11. Fügen Sie unten mehrere farbige Randschatten hinzu
Sie können dem unteren Rand der Box mehrere farbige Rahmenschatten hinzufügen, indem Sie das folgende Box-Shadow-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 der unteren und rechten Seite der Box mehrere farbige Randschatten hinzu
Sie können dem unteren und rechten Rand des Felds mehrere farbige Rahmenschatten hinzufügen, indem Sie das folgende CSS mit Ihrem HTML-Zielelement verwenden:
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 auf der linken und rechten Seite helle Schatten hinzu, verteilen Sie Schatten nach unten
Sie können der linken und rechten Seite helle Schatten hinzufügen und den unteren Rand der Box mit dem folgenden Box-Shadow-CSS mit Ihrem Ziel-HTML-Element 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 mithilfe von CSS coole Box-Shadow-Effekte hinzufügen. Sie können sie auf verschiedene Weise problemlos in HTML-Elemente integrieren.
Verwandt: 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 einzubinden:
Internes CSS
Eingebettete oder interne Stylesheets werden innerhalb der Abschnitt eines HTML-Dokuments mit dem Element. Sie können beliebig viele erstellen Elemente in einem HTML-Dokument, aber sie müssen zwischen den und Stichworte. Hier ist ein Beispiel, das zeigt, wie Sie internes CSS mit einem HTML-Dokument verwenden:
CSS box-shadow
.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 4
Inline-CSS
Inline-CSS wird verwendet, um einem HTML-Element eindeutige Stilregeln hinzuzufügen. Es kann mit einem HTML-Element über das Stil Attribut. Das style-Attribut enthält CSS-Eigenschaften in Form von 'Eigentumswert' durch Semikolon getrennt ( ; ).
Verwandte: Erfahren Sie, wie Sie mit CSS Grid zweidimensionale Websites erstellen
Alle CSS-Eigenschaften müssen in einer Zeile stehen, d. h. es sollten keine Zeilenumbrüche zwischen den CSS-Eigenschaften vorhanden sein. Hier ist ein Beispiel, das zeigt, wie Sie Inline-CSS mit einem HTML-Dokument verwenden:
CSS box-shadow
Style 4
Externes CSS
Externes CSS ist die ideale Methode, um Stile auf HTML-Dokumente anzuwenden. Ein externes Stylesheet enthält alle Style-Regeln in einem separaten Dokument (.css-Datei), dieses Dokument wird dann mit dem HTML-Dokument über die Schild. Diese Methode ist die beste Methode zum Definieren und Anwenden von Stilen auf die HTML-Dokumente, da die betroffene HTML-Datei nur minimale Änderungen im Markup erfordert. Hier ist ein Beispiel, das zeigt, wie externes CSS mit einem HTML-Dokument verwendet wird:
Erstellen Sie eine neue CSS-Datei mit dem .css Verlängerung. 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;
}Erstellen Sie abschließend ein HTML-Dokument und fügen Sie den folgenden Code in dieses Dokument ein:
woran erkenne ich ob mir jemand auf facebook folgt
CSS box-shadow
Style 4
Beachten Sie, dass die CSS-Datei über . mit dem HTML-Dokument verknüpft ist tag und href Attribut.
Alle oben genannten drei Methoden (Internal CSS, Inline CSS und External CSS) zeigen die gleiche Ausgabe an.
Gestalten 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 mit verschiedenen CSS-Eigenschaften anpassen. Entwickler aus der ganzen Welt tragen zu CSS-Updates bei, und zwar seit der Veröffentlichung im Jahr 1996. Anfänger müssen also viel lernen!
Zum Glück ist CSS anfängerfreundlich. Sie können einige ausgezeichnete Übungen machen, indem Sie mit ein paar einfachen Befehlen beginnen und sehen, wohin Ihre Kreativität Sie führt.
Teilen Teilen Tweet Email 10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen könnenBenötigen Sie Hilfe bei CSS? Probieren Sie zunächst diese grundlegenden CSS-Codebeispiele aus und wenden Sie sie dann auf Ihre eigenen Webseiten an.
Weiter lesen Verwandte Themen- Programmierung
- Web-Design
- CSS
Yuvraj studiert Informatik an der University of Delhi, Indien. Seine Leidenschaft gilt der Full-Stack-Webentwicklung. Wenn er nicht gerade schreibt, erforscht er die Tiefe verschiedener Technologien.
Mehr von Yuvraj ChandraAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren