WWW = Wieso? Weshalb? Warum?

Es beginnt, wie so oft, mit einer einfach Anfrage an Google: "CSS3 angehobene Ecken Schatten". Es dauerte auch nicht lange, bis ich dann auch die richtigen Suchbegriffe fand: "CSS3 lifted corners". Und dann begann die Offenbarung! Am Anfang war da nur der ganz einfache Schattenwurf. Und dann findet man immer mehr über das, was man mit dem kleinen Vielkönner "box-shadow" so alles anstellen kann.

Am Ende wurden die Ergebnisse wiederverwendbar in einer eigenen CSS-Datei zusammengefasst, die zur freien Verfügung als Download angeboten wird. Doch immer schön der Reihe nach ...

Die einfachste Form des Schattenwurfs

... besteht darin, einfach nur den vertikalen und den horizontalen Versatz des Schattens anzugeben.

Das Kernproblem dabei: es funktioniert nicht - zumindest nicht im Safari für Windows.

.shadow {
  box-shadow: 0.5em 0.5em; /* Funktioniert nicht im Safari für Windows! */
}

Farbbestimmung

Da man aber ohnehin nicht zwingend die vom Browser als Default verwendete Farbe akzeptieren will, ist es nicht allzu schlimm, die Farbe des Schlagschatten selbst festzulegen.

Und schon funktioniert es auch im Safari für Windows.

.shadow.color {
  box-shadow: 1em 1em #777; /* So funktioniert es jetzt auch im Safari! */
}

Verlaufende Ränder

Schatten wirken realistischer, wenn sie nicht zu scharfe Ränder haben. Deshalb kann man hier auch eine Breite für den verlaufenden Rand von Schatten angeben.

.shadow.blur {
  box-shadow: 1em 1em 1em #777;
}

Interessant dabei ist die Auswirkung dieses Parameters auf die Breite des Schattens: Wir haben hier extra denselben Offset wie im Beispiel darüber genommen und die Verlaufsbreite auf denselben Wert gesetzt.

Ergebnis: der Schatten scheint schmäler zu werden, entpuppt sich aber beim genaueren Hinsehen als breiter. Ich konnte noch keine belegenden Quellen finden, aber mir scheint es, als würde die Breite des Gesamten Schattens um die Hälfte(!) der Verlaufsbreite vergrößert, dafür beginnt der Verlauf um ebenfalls die Hälfte der angegebenen Verlaufsbreite innerhalb der normalen Kante. Nur eine Vermutung ...

Zerlaufende Ränder

Je mehr man den Verlaufsradius vergrößert, desto breiter wird nicht nur die Streuung und der Verlauf des Schattens, sondern desto heller wird auch der Schatten selbst. Ein in manchen Fällen durchaus gewollter Effekt.

.shadow.blur.xxl {
  box-shadow: 1em 1em 5em #777;
}

Grosse Ränder

Will man den Schatten vergrößern, ohne dabei an Farbdichte zu verlieren, gibt es einen weiteren Parameter für box-shadow, die Schattenbreite. Damit kann man die Größe des Schattens anpassen, die sich ansonsten stur an der Größe des "schattenwerfenden" Elements orientiert. Man kann den Schatten damit sogar über das ursprüngliche Element hinaus wachsen lassen.

Da sich diese Angabe jedoch schwer generalisieren läßt, haben wir sie nicht in die CSS-Datei mit aufgenommen.

.shadow.xxl {
  box-shadow: 1em 1em 1em 2em #777;
}

Schatten an allen Seiten

Um jedoch ein Element an allen Seiten mit einem (kleinen!) Schatten zu versehen, gibt es einfachere - und ästhetischere - Möglichkeiten. Die einfachste davon ist, einfach den Offset in beide Richtung auf Null setzen und den Verlaufsradius auf einen nicht zu großen Wert setzen - sonst wird der Schatten nahezu unsichtbar.

.shadow.all {
  box-shadow: 0 0 1em #777;
}

Mehrfacher Schattenwurf

Auch wenn es vielleicht nur noch bedingt "realistisch" aussieht, in manchen Fällen kann es aus künstlerischen Gründen heraus notwendig sein, mehr als nur einen Schatten zu werfen. Trotzdem haben wir mangels Verallgemeinerungspotential diese Möglichkeit nicht in die CSS-Datei aufgenommen.

.shadow.multiple {
  box-shadow:  1em  1em             #777
            , -1em -1em             #090
            ,  0em  0em 0.5em 0.5em #c60;
}

Sie sehen, was passiert, wenn man an einigen Stellen die Angaben für Streuradius und Größe weglässt?

Schatten nach innen

Mit dem vorangehenden Schlüsselwort "inset" macht man aus dem Schlagschatten übrigens einen Innenschatten. Alle anderen Parameter behalten ihre bisherige Gültigkeit, nur das eben der Schatten anders angeordnet wird. Besonders beliebt ist dieser Innenschatten z.B. für Eingabefelder in Formularen.

.shadow.inset {
  box-shadow: inset 0.25em 0.25em 0.25em 0.25em #777;
}

Schatten nur an der Unterkante

Will man aus irgendeinem Grund nur an einer Seite einen Schatten, so ist das mit einem kleinen Kniff machbar.

  • horizontal offset = 0;
    ...ist ein Teil der Magie hier => schaltet den Schatten an der rechten Seite aus.
  • vertical offset = 1em;
    ...ist nicht wirklich ein Teil der Magie hier => der hier angegebene Wert sollte einfach nur größer sein als die
  • blur width = 0.5em;
    ...ist ein Teil der Magie hier => Wert sollte kleiner sein als [vertical offset].
  • shadow width = -0.5em;
    ...ist der Teil der Magie hier => der Wert muss exakt dem von [blur width] entsprechend, nur negativ!
.shadow.bottom {
  box-shadow: 0 1em 0.5em -0.5em #777;
}

Schatten nur an der rechten Kante

Funktioniert im Prinzipp wie das obige Beispiel, nur dass hier die Off-Set-Parameter anders gesetzt werden.

  • horizontal offset = 1em; ...ist nicht wirklich ein Teil der Magie hier => der hier angegebene Wert sollte nicht kleiner sein als die [blur width].
  • vertical offset = 0; ...ist hier ein Teil der Magie => schaltet den Schatten an der Unterkante aus.
  • blur width = 0.5em; ...ist hier ein Teil der Magie => Wert sollte größer sein als [vertical offset].
  • shadow width = -0.5em; ...ist hier der Teil der Magie => der Wert muss exakt dem von [blur width] entsprechend, nur negativ!
.shadow.right {
  box-shadow: 1em 0 0.5em -0.5em #777;
}

Schatten nur an der Oberkante

Ist beinahe identisch mit "Schatten nur an der Unterkante", nur das für das [vertical offset] ein negativer Wert gesetzt wird.

.shadow.top {
  box-shadow: 0 -1em 0.5em -0.5em #777;
}

Schatten nur an der linken Kante

Ist beinahe identisch mit "Schatten nur an der rechten Kante", nur das für das [horizontal offset] ein negativer Wert gesetzt wird.

.shadow.left {
  box-shadow: -1em 0 0.5em -0.5em #777;
}