CSS Schatten-Effekte

Kaffee
Schatten

Erstellen Sie mit CSS Schatten-Effekte!

Bewegen Sie den Mauszeiger darauf!

CSS Schatten-Effekte

Durch die Verwendung von CSS können Sie Schatten auf Text und Elementen hinzufügen.

In unserem Tutorial werden Sie die folgenden Eigenschaften lernen:

  • text-shadow
  • box-shadow

CSS Text-Schatten

CSS text-shadow Die Eigenschaft fügt dem Text einen Schatten hinzu.

Die einfachste Verwendung ist, nur die horizontale Schatten (2px) und die vertikale Schatten (2px) zu spezifizieren:

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px;
}

Try It Yourself

Fügen Sie dann eine Farbe zum Schatten hinzu:

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px red;
}

Try It Yourself

Fügen Sie dann einen unscharfen Effekt zum Schatten hinzu:

Text Shadow Effect!

Example

h1 {
  text-shadow: 2px 2px 5px red;
}

Try It Yourself

Der folgende Beispiel zeigt weißen Text mit schwarzen Schatten:

Text Shadow Effect!

Example

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Try It Yourself

Der folgende Beispiel zeigt die Neon-Licht-Schatten in Rot:

Text Shadow Effect!

Example

h1 {
  text-shadow: 0 0 3px #FF0000;
}

Try It Yourself

Mehrere Schatten

Um mehrere Schatten in einem Text hinzuzufügen, können Sie eine durch Kommas getrennte Schattenliste hinzufügen.

Der folgende Beispiel zeigt die Neon-Licht-Schatten in Rot und Blau:

Text Shadow Effect!

Example

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Try It Yourself

The following example shows white text with black, blue, and dark blue shadows:

Text Shadow Effect!

Example

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Try It Yourself

You can also use the text-shadow property to create a solid border (no shadow) around the text:

Border around the text!

Example

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Try It Yourself