Menü-Icon mit box-shadow
Geschrieben am:
Inzwischen haben sich drei horizontale Striche als normales Icon für Menüs etabliert. Es gibt unterschiedliche Möglichkeiten, dieses Icon zu generieren, ohne auf ein Bild zurückzugreifen. Beim schönen Framework Foundation von Zurb werden die drei horizontalen Striche über die Eigenschaft box-shadow erzeugt, was ich ganz raffiniert fand, als ich es entdeckte.
Der Code hierfür sieht folgendermaßen aus:
box-shadow: 0px 10px 0px 1px #464646,
0px 16px 0px 1px #464646,
0px 22px 0px 1px #464646;
width: 16px;
height: 0px;Online testen: http://jsfiddle.net/fmaurice/P6a3f/
Es gibt also drei Schatten, von denen jeder für eine Linie zuständig ist. Die Schatten sind immer um 0px von links verschoben (erster Wert). Von oben (zweiter Wert) gibt es hingegen unterschiedliche Angaben, die die Position der Schatten betreffen: Für den ersten 10px, den zweiten 16px und den dritten 22px. Für den Grad der Verschwommenheit ist bei allen drei Schatten 0 angegeben (dritter Wert), damit sind die Schatten nicht verschwommen, sondern durchgezogene klare Linien. Der vierte Wert ist der Spread-Distance, der bei allen drei Schatten auf 1px gesetzt ist. Er bestimmt die Strichstärke.
Das Element, dem dieser Schatten zugewiesen wird, hat folgende Ausmaße:
width: 16px;
height: 0px;Die 16px sind die Breite des Elements und sind damit auch verantwortlich für die Breite der Striche – für die exakte Breite muss man allerdings den Spread Distance addieren, d.h. im Beispiel sind die Striche 18px breit. An sich ist das Element aber unsichtbar – denn es hat 0px Höhe, man sieht nur die Schatten.
Damit aber der box-shadow überhaupt sichtbar ist, ist der Wert für Spread-Distance – 1px – wichtig, denn er erlaubt es, dass die Schatten größer werden als das zugrundeliegende Element.
Eine raffinierte Technik zur Erzeugung des Menüsymbols. Einen Nachteil hat die Sache allerdings: Auf Android-Geräten machen Schatten, bei denen 0px für die Verschwommenheit angegeben ist, Probleme und sind u.U. nicht sichtbar. Andere Techniken zur Erstellung des Menüsymbols zeigt Chris Coyier, teilweise ebenfalls mit box-shadow, aber nicht genau die hier vorgestellte Technik, bei der die eigentlichen Linien durch Spread-Distance gezeichnet werden.