CSS3 Schlagschatten Beispiel für Untermenüs

CSS3 Schlagschatten

Der drop-shadow Parameter in CSS3 ist eine Weiterentwicklung normaler Box-Schatten-Effekte, die es erlauben, wirklich bemerkenswerte Grafiken für Webseiten zu erstellen. Es gibt unzählige Anwendungsbereiche für CSS3 Schlagschatten, angefangen mit Untermenüs von Navigationsleisten, die einen Schatten auf die 'Oberfläche' der Webseite werfen, wenn sie ausgerollt werfen, bis zu fortschrittlichen und schicken Dingen wie Eselsohren.

Vor der Einführung von CSS3 wurden diese Effekte realisiert, indem ein Bild mit einem Programm wie Photoshop erstellt, dann auf den Server hochgeladen und als normaler CSS-Hintergrund eingerichtet wurde. Obwohl es effektiv war, einen Schatten darzustellen, die nicht nur rechteckig oder anders geformt waren, war es nicht besonders elegant.

Das Bild das mit Photoshop erstellt wurde, sah vielleicht am Anfang gut aus, aber sobald Änderungen an der Webseite gemacht wurden, und das Bild vergrößert, umgesetzt oder die Form geändert werden musste, war das nicht sehr einfach. Webdesigner mussten zurück zu Photoshop und den Schatteneffekt für neue Größen und Formen neu erstellen und meist von vorne beginnen.

Mit dem Aufstieg von CSS3 allerdings, wurde alles einfacher. CSS3-Schatten können mit wenigen Code-Zeilen erstellt werden und jeder Aspekt dieser kann bearbeitet werden, was genau das Ergebnis erzielen kann, das ein Webdesigner erreichen will.