Schrift und Box mit Schatten

CSS3 bietet eine Eigenschaft 'text-shadow' um bei einem Buchstaben einen Schatten zu erzeugen. Mit kurzen Definitionen können beeindruckende Effekte erzielt werden.
Weiters bietet CSS3 die Eigenschaft 'box-shadow'. Damit lassen sich ohne jede Grafik Schatten um Block-Level-Elemente werfen.


Achtung: nicht alle Browser stellen die Schatten richtig dar. Betroffen sind vor allem die ältere Versionen des Internet Explorers.


Schrift mit Schatten

Die Schreibweise

.textshadow {
    text-shadow: 1px 1px 0px #000;
    /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
}

Das ist der Beispieltext der mit obigem CSS Code formatiert ist.


Beispiele

Die gezeigten Beispieltexte wurden mit einer erhöten Schriftgröße dargestellt, um den die Effekte deutlicher zu sehen.

#1

Einfacher weicher Schatten:

.textshadow {
    text-shadow: 3px 3px 3px #000;
}

Das ist der Beispieltext der mit obigem CSS Code formatiert ist.

#2

Doppelter Schatten - Darstellung eines Reliefs

.textshadow {
    text-shadow: 1px 1px #666, -1px -1px #222;
}

Das ist der Beispieltext der mit obigem CSS Code formatiert ist.

#3

Mehrfache Schatten zum Umranden der Buchstaben

.textshadow {
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF
}

Das ist der Beispieltext der mit obigem CSS Code formatiert ist.

#4

Es ist auch die RGBA-Schreibweise möglich. Somit lassen sich auch transparente Schatten erzeugen.

.textshadow {
    text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
}

Das ist der Beispieltext der mit obigem CSS Code formatiert ist.




Box mit Schatten

Die Schreibweise

.boxshadow {
    -moz-box-shadow: 5px 5px 4px 1px #111;
    -webkit-box-shadow: 5px 5px 4px 1px #111;
    box-shadow: 5px 5px 4px 1px #111;
    /* Versatz links - Versatz oben - Unschärfe - Schattenradius - Farbe */
}


weitere Beispiele

Die Beispielboxen werden mit 'div container' mit einer Größe von 100 Pixel im Quadrat gezeigt. Natürlich können auch Fotos oder Grafiken mit Schatten versehen werden.

#1

innerer Schatten

.boxshadow {
    -moz-box-shadow: inset 0 0 6px #000;
    -webkit-box-shadow: inset 0 0 6px #000; 
    box-shadow: inset 0 0 6px #000;
}

#2

Schatten nur an einer Seite.

.boxshadow {
    -webkit-box-shadow: 0 12px 6px -6px #000;
    -moz-box-shadow: 0 12px 6px -6px #000;
    box-shadow: 0 12px 6px -6px #000
}

Mein Tipp: Experimentiere mit verschiedenen Abständen, Schärfen und Farben. Es ist schon erstaunlich was alles machbar ist.
  • Montag, 30 Januar 2012

Kommentare (0)

Bitte Kommentar schreiben

Bitte einloggen, um einen Kommentar zu schreiben.