Recherche sur la technologie Image Flip Menu_CSS/HTML

Fastcompany est un travail de mise en page CSS + Div complet réalisé par le webmaster de simplebits.com

La navigation du site Web utilise le retournement d'image CSS. Ne réfléchissez pas trop, il doit utiliser un:link et un:hover pour afficher. différentes images dans différents états. Fabriqué à partir d'images d'arrière-plan. Je pense que le caractère unique de l'auteur réside dans le a:hover en CSS...

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




L'image de fond de la navigation est dans les trois états de a:link, a: survolez, et a:active Au lieu de trois images, la même image est utilisée ~ le positionnement vertical de l'arrière-plan via CSS fait changer les boutons Cela évite d'avoir besoin d'une définition unique de l'image d'arrière-plan de chaque bouton, économise beaucoup de code. , réduit le nombre d'images et télécharge plus rapidement, plus facile à gérer. Le bouton

n'est pas seulement une image d'arrière-plan, mais contient également un texte de navigation

Accueil

Utilisez CSS pour masquer le texte


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


Puisqu'il est caché, pourquoi s'embêter. Qu'en est-il de l'écriture de texte ? Le but est de pouvoir voir les liens de navigation lorsque vous utilisez un navigateur en texte brut (ou ne référencez aucun CSS
).