Wie letztens bereits erwähnt kann man in CSS 3 wunderbar auf Schattengrafiken verzichten. Auch wenn dieser Befehl noch nicht als Standard übernommen wurde, wird er doch von einigen Browsern unterstützt. Da Firefox und Chrome ein eigenes Präfix benötigen, kommt man nicht umhin einen Schatten mehrfach zu definieren. Die Liste zeigt die drei Befehle
- -moz-box-shadow für Firefox
- -webkit-box-shadow für Chrome
- box-shadow für alle anderen Browser, welche diese Funktion unterstützen
Mir persönlich ist das aber immer noch lieber, als mit Grafiken hantieren zu müssen, welche sich zudem noch schlecht um Boxen skalieren lassen.
Der Aufbau des Befehls ist danach aber immer gleich, bietet aber eine Vielzahl an Einstellungsmöglichkeiten:
- [[inset] offset-x offset-y [radius] [farbe],]
In eckigen Klammer geschriebene Befehle sind dabei optional.
inset
- Gibt an ob es sich um einen inneren Schatten handelt. Wird dieser Befehl weggelassen handelt es sich um einen äußeren Schatten.
offset-x, offset-y
- Gibt die Position des Schattens an. Hier kann man positive wie negative Werte angeben. Es sind die von CSS bekannten Einheiten wie px, % und em möglich.
radius
- Gibt den Radius des Schattens an und erzeugt einen weichen Verlauf innerhalb dieses Radius. Dieser wird immer zum offset hinzuaddiert. Das bedeutet, das ein Schatten mit dem offset 0 0 und zum Beispiel dem Radius 3px drei Pixel um die Box herum verläuft.
farbe
- Gibt den Farbwert des Schattens an. Wie bereits erwähnt gibt es dabei diverse Möglichkeiten
- Die einfachste Möglichkeit ist es, den Schatten per normaler oder kurzer Hexcode-Schreibweise anzugeben
– #444 macht den Schatten dunkelgrau
– #f88282 erzeugt einen rötlichen Schatten - Desweiteren kann man das ganze auch in rgb-Schreibweise notieren. Die obigen Werte entsprechen dann rgb(68,68,68) bzw. rgb(248,130,130)
- Die interessanteste Möglichkeit bietet natürlich die Notation mit rgba() somit ist es möglich dem Schatten eine Transparenz zu übergeben. Gerade Leute wie ich, die sehr häufig Layouts aus Photoshop oder Fireworks übersetzen müssen, ist das eine enorme Arbeitserleichterung, da man die Werte einfach nur aus Ebeneneinstellungen übernehmen muss.
- lässt man die Farbe des Schattens weg wird der letzte Farbwert von „color“ übernommen. Warum dafür die Textfarbe und nicht zum Beispiel die Hintergrundfarbe genommen wird ist mir allerdings schleierhaft.
Als ob das noch nicht genügend Einstellungen wären, kann man nun theoretisch beliebig viele dieser Schatten definieren und der Box zuweisen. Somit kann man den Schatten noch feiner einstellen. Durch geschickte Vergabe der offsets entsteht so zum Beispiel ein weicher, recht transparenter Schatten oben Links, der in einen gesättigteren Schatten unten rechts übergeht.
Das ganze sieht dann zum Beispiel für ein input folgendermaßen aus:
<input class="example_input"/>
.example_input {
background: #fff;
border: none;
-moz-box-shadow : inset 0 0 4px rgba(0,0,0,0.6), -1px -1px 4px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.6);
-webkit-box-shadow : inset 0 0 4px rgba(0,0,0,0.6), -1px -1px 4px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.6);
box-shadow : inset 0 0 4px rgba(0,0,0,0.6), -1px -1px 4px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.6);
padding: 2px 5px;
}