Hauptmenü

Untermenü

CSS3 - Rahmen - Schatten

1. Was zum Teufel haben Schatten bei Rahmen verloren?

Gute Frage. Und ich habe auch lange überlegt, ob ich das Thema nicht als eigenständigen Punkt behandle. Da ich aber kein Freund von endlos langen Menüs bin, ist das halt hier gelandet. Denn auch ein Schatten stellt einen Rahmen dar, der ein Element umfließt.

2. Die gute Nachricht

Alle modernen Browser können damit umgehen.

Die schlechte Nachricht

Schatten im Browser sehen eigentlich nie so aus, wie sich das unsere Designer in Photoshop zusammenklicken. Niemals. Also macht denen frühzeitig klar, dass das nicht eins zu eins umsetzbar ist.

3. box-shadow

Der grundsätzliche Aufbau besteht aus maximal vier Werten und sieht folgendermaßen aus:


[X-Achse][Y-Achse][Unschärfe][Ausbreitung][Farbe]

Bei der X- und Y-Achse handelt es sich um die Verschiebung des Schattens zum Elements. Die Unschärfe definiert die Ausbreitung sowie Abschwächung und die Ausbreitung legt fest ob der Schatten zusätzlich zur Unschärfe noch größer sein soll. Diese Angabe ist optional und sieht meiner Meinung nach auch nicht so dolle aus.

inherit

Wenn man statt obiger Angaben diesen Wert nimmt, so erbt das Element die Schatten-Eigenschaft vom überordneten Elternelement. Allerdings nur von dem, weitere Vererbungsschritte zum Beispiel vom Großelternelement gibt es nicht. Außerdem kann man mit inset einen inneren Schatten vergeben.

Ein wichtiger Hinweis

Wenn man einem Element einen Schatten verpasst, so wird der nicht zum Abstand hinzugezählt! Legt man also zum Beispiel eine Unschärfe von 10 Pixeln fest, so muss man mit Sicherheit noch entsprechend ein margin vergeben, damit der Schatten nicht in ein vorheriges oder nachfolgendes Element hinein läuft.

4. Beispiele

Damit ihr euch das besser vorstellen könnt, habe ich den betroffenen Elementen eine graue Hintergrundfarbe gegeben. Außerdem konzentriere ich mich beim Code nur auf die box-shadow-Anweisungen. Den Rest, den ich hier benötige, damit es nicht zu grauselig aussieht, lass ich weg.

Ein unscharfer Schlagschatten, der sich nach rechtes unten ausdehnt

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Der Code


box-shadow5px 5px 10px #888;

Ein scharfer Rundumschatten mit zusätzlicher Ausbreitung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Der Code


box-shadow0 0 0 10px #888;

Ein unscharfer Schlagschatten, der sich nach oben ausdehnt

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


box-shadow-5px 10px #888;

5. Mehrere Schatten

Auch das ist genau wie bei text-shadow möglich. Da es da aber wirklich barbarisch aussah, wollte ich nicht weiter darauf eingehen. Die Details zum Prinzip hole ich daher hier nach. Also! Wenn man mit mehreren Schatten (sowohl bei text-shadow als auch bei box-shadow) arbeitet, so muss man sich das als eine Art von Zwiebel vorstellen. Also die Sache mit den Häuten und den Oger.

Denn besagte Schatten liegen schichtweise übereinander. Der erste Wert überdeckt also immer den nachfolgenden, so lange der keine anderen Angaben zur Achse, Unschärfe oder Ausdehnung hat. Solltet ihr also mal das Design für den CSD umsetzen, so könnt ihr zum Beispiel so vorgehen.

Der CSD-Schatten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


box-shadow3px 3px 2px #c5190b,
            6px 6px 2px #d67b10,
            9px 9px 2px #f7da00,
            12px 12px 2px #0a7e4d,
            15px 15px 2px #30509d,
            18px 18px 2px #760a6d;

Alle Schatten werden einfach durch ein Komma voneinander getrennt. Dann gibt man die entsprechende Farbe an und legt sowohl bei der X- als auch Y-Achse eine "hochzählende" Verschiebung an. Und nein, ich bin nicht schwul. Und ja, ich lebe in Köln.

6. Inside Microsoft

Da sich die Damen und Herren aus Redmond irgendwann bewusst wurden, dass ihr Internet Explorer doch ziemlich hinterher hinkt, haben die sich etwas einfallen lassen. Nämlich die schon erwähnten filter-Eigenschaften. Und damit kann man auch dem Internet Explorer 8 und abwärts Schatten beibringen. Leider ist das in diesem Fall ziemlich in die Hose gegangen, da eigentlich nichts richtig funktioniert. Also Möglichkeiten gibt es:

Und daraus muss man sich im wahrsten Sinne des Wortes was zusammenbasteln. Ich bringe mal ein paar kleine Beispiele.


filterprogid:DXImageTransform.Microsoft.Shadow(
  Color=#aaa, Strength=10, Direction=45
);
/* Oder */
filter:progid:DXImageTransform.Microsoft.dropshadow(
  OffX=5OffY=5Color='gray'Positive='true'
);
/* Oder */
filterprogid:DXImageTransform.Microsoft.Blur(
  PixelRadius=5
);

Mein Tipp

Vergesst es. Ist sauviel Arbeit, das Ergebnis sieht immer noch sch***ße aus und die Mühen sind das Ergebnis nicht wert.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt