Box Schatten
Mit CSS3 können Sie Schatteneffekten zu erstellen!
CSS3 Schatteneffekte
Mit CSS3 können Sie Schatten auf Text und Elemente hinzuzufügen.
In diesem Kapitel werden Sie über die folgenden Eigenschaften erfahren:
-
text-shadow -
box-shadow
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit- oder -moz- gibt die erste Version , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3 Text-Schatten
Die CSS3 text-shadow Eigenschaft gilt Schatten Text.
In seiner einfachsten zu verwenden, geben Sie nur die horizontale Schatten (2px) und die vertikale Schatten (2px):
Textschatten-Effekt!
Als nächstes eine Farbe auf den Schatten hinzufügen:
Textschatten-Effekt!
Dann fügen Sie eine Unschärfe-Effekt auf den Schatten:
Textschatten-Effekt!
Das folgende Beispiel zeigt einen weißen Text mit schwarzem Schatten:
Textschatten-Effekt!
Das folgende Beispiel zeigt einen roten Neon-Leuchten Schatten:
Textschatten-Effekt!
Mehrere Schatten
So fügen Sie mehr als ein Schatten auf den Text, können Sie eine durch Kommata getrennte Liste von Schatten hinzufügen.
Das folgende Beispiel zeigt einen roten und blauen Neon-Leuchten Schatten:
Textschatten-Effekt!
Das folgende Beispiel zeigt einen weißen Text mit schwarz, blau und dunkelblau Schatten:
Textschatten-Effekt!
Beispiel
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Versuch es selber " CSS3 box-shadow Eigenschaft
Die CSS3 box-shadow Eigenschaft trifft Schatten auf Elemente.
In seiner einfachsten zu verwenden, geben Sie nur den horizontalen Schatten und die vertikale Schatten:
Als nächstes eine Farbe auf den Schatten hinzufügen:
Als nächstes wird eine Unschärfe-Effekt auf den Schatten hinzufügen:
Sie können auch Schatten auf die hinzufügen :: vor und :: after Pseudo-Klassen, einen interessanten Effekt zu erzeugen:
Beispiel
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} Versuch es selber " Karten
Ein Beispiel für die Verwendung der box-shadow Eigenschaft papierähnlichen Karten zu erstellen:
1
1. Januar 2016
Hardanger, Norwegen
Beispiel
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
Probieren Sie es aus (Text - Karte) » Probieren Sie es aus (Bild Card)» Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
CSS3 Schatten Eigenschaften
In der folgenden Tabelle sind die CSS3 Schatten Eigenschaften:
| Eigentum | Beschreibung |
|---|---|
| box-shadow | Fügt eine oder mehrere Schatten auf ein Element |
| text-shadow | Fügt eine oder mehrere Schatten auf einen Text |