Schatten mit CSS und PNGs
Bei einem Entwurf einer Webseite wird sehr häufig mit Schatten gearbeitet. Das Problem besteht jetzt darin, dass man die Schatten mit ins HTML-Dokument nimmt. Hierfür gibt es viele verschiedene Möglichkeiten, dieses zu realisieren.
Im Zeitalter des Tabellendesigns hat man sich einfach ein paar Schattenbilder erzeugt und diese dann mittels einer Tabelle um das gewünschte Objekt gelegt. Dadurch hatte man dann einen Schatten, den man vom Grafikprogramm kannte. Da aber Tabellen nicht für das Layouten verwendet werden sollen, fällt diese Lösung flach.
Es muss also eine Lösung für ein „CSS-Design” her. Hierfür gibt es verschiedene Wege, dieses zu realisieren. Zum einen hat man die Möglichkeit, den Schatten mit einigen Divs zu realisieren. Diese Lösung finde ich persönlich nicht so toll. Ich habe mich lieber für die einfach Variante des Schatten entschieden.
Für diese einfache Variante benötige ich nur 2 verschachtelte Divs und ein PNG, welches die Transparenz enthält.
Durch die Verwendung des PNGs mit der Alpha-Transparenz hat man den Vorteil, dass der Schatten auf jeglichem Hintergrund funktioniert und man dafür nicht immer wieder neue Bilder und Klassen benötigt. Bei dem PNG muss man allerdings folgende Einschränkung beachten: Ältere Browser können die Tranparenz nicht darstellen.
- .schattenbox {
- width: 15em;
- background-image: url(images/schatten.png);
- }
- * html .schattenbox {
- bac\kground-image: none;
- filter: progid: DXImageTransform.Microsoft.
- AlphaImageLoader(src = 'layout/images/schatten.png',
- sizingMethod='scale');
- }
- .schattenbox div {
- padding: 0.2em;
- background-color: #f00;
- position: relative;
- top: -5px;
- left: -5px;
- }