Forschung zur Image-Flip-Menü-Technologie_CSS/HTML

Fastcompany ist eine vollständige CSS+Div-Layout-Arbeit des simplebits.com-Webmasters.

Die Website-Navigation verwendet CSS-Bildspiegelung, zur Anzeige müssen a:link und a:hover verwendet werden Verschiedene Bilder in verschiedenen Zuständen. Ich denke, die Einzigartigkeit des Autors liegt im a:hover in CSS...

#nav a:hover {background-position: 0 -20px;}
# nav a:active {background-position: 0 -40px;}




Das Hintergrundbild der Navigation befindet sich in den drei Zuständen a:link, a: Hover und a:active Anstelle von drei Bildern wird dasselbe Bild verwendet. Durch die vertikale Positionierung des Hintergrunds durch CSS ändern sich die Schaltflächen. Dies erspart die Notwendigkeit einer einzelnen Definition des Hintergrundbilds für jede Schaltfläche und spart viel Code , reduziert die Anzahl der Bilder und ist schneller und einfacher zu verwalten. Die Schaltfläche

ist nicht nur ein Hintergrundbild, sondern enthält auch Navigationstext

Startseite

Verwenden Sie CSS, um den Text auszublenden


#nav a {padding: 20px 0 0 0;overflow: versteckt;}


Warum sollte man sich die Mühe machen, Text zu schreiben? Der Zweck besteht darin, Navigationslinks sehen zu können, wenn man einen Nur-Text-Browser verwendet (oder kein CSS referenziert).