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.
- 18.0
- 12.x
- 5.1
- 23.0
- 9.0/10.0
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-shadow: 5px 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-shadow: 0 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: 0 -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-shadow: 3px 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:
blur
dropShadow
shadow
Und daraus muss man sich im wahrsten Sinne des Wortes was zusammenbasteln. Ich bringe mal ein paar kleine Beispiele.
filter: progid:DXImageTransform.Microsoft.Shadow(
Color=#aaa, Strength=10, Direction=45
);
/* Oder */
filter:progid:DXImageTransform.Microsoft.dropshadow(
OffX=5, OffY=5, Color='gray', Positive='true'
);
/* Oder */
filter: progid: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