CSS Icons

29. Jun 2013

Das Symbol zum Öffnen der mobilen Navigation ist ab sofort über rein über CSS umgesetzt.

Das Symbol zum Öffnen der mobilen Navigation ist ab sofort über rein über CSS umgesetzt. Das hat den Vorteil, dass sich die Farbe des Icons an die Schriftfarbe der Navigation anpasst, welche über den Layoutwizard ausgewählt werden kann.

CSS-Definition des Icons

#navigationMainToggler                {display:block;cursor:pointer;color:$fontColorNavigationMain;text-decoration:none;font-size:$fontSizeNavigationLevel1;margin-right:10px;padding:12px 16px 12px 16px;text-transform:uppercase;}
#navigationMainToggler:before         {content:'';position:absolute;right:12px;width:18px;height:11px;box-sizing:border-box;border-bottom:solid 4px $fontColorNavigationMain}
#navigationMainToggler:after          {content:'';position:absolute;right:12px;width:18px;height:18px;box-sizing:border-box;border-top:solid 4px $fontColorNavigationMain;border-bottom:solid 4px $fontColorNavigationMain}
CSS Icon  zur Darstellung der mobilen Navigation
CSS Icon zur Darstellung der mobilen Navigation

Da das Icon rein über CSS definiert ist, spart man sich des Weiteren eine Get-Anfrage, um das Bild zu laden. Die verwendeten CSS-Selektoren werden bereits von älteren mobilen Safari- und Android-Browsern unterstützt, so dass dem Einsatz der CSS-Icons auf mobilen Endgeräten nichts im Wege steht.

Folgende Demonstration zeigt, wie vielfältig die Möglichkeiten sind, um Icons rein über CSS zu definieren: http://nicolasgallagher.com/pure-css-gui-icons/demo/