Research on Image Flip Menu Technology_CSS/HTML

Fastcompany is a full CSS+Div layout work by the simplebits.com webmaster.

The website navigation uses CSS image flipping. Don’t think too much, it must be using a:link and a:hover to display different images in different states. Made of background-images. I think the author’s uniqueness lies in the a:hover in CSS...

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




The background image of the navigation is in the three states of a:link, a:hover, and a:active Instead of three pictures, the same picture is used ~ vertical positioning of the background through CSS makes the buttons change. This saves the need for a single definition of the background picture of each button, saves a lot of code, reduces the number of pictures, and downloads faster , easier to manage. The

button is not only a background image, but also has navigation text.

Home

Use css to hide the text


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


Since it is hidden, why bother What about writing text? The purpose is to be able to see navigation links when using a plain text browser (or not referencing any CSS).