이미지 플립 메뉴 기술 연구_CSS/HTML

Fastcompany는 simplebits.com 웹마스터가 작업한 전체 CSS+Div 레이아웃입니다.

웹사이트 탐색은 CSS 이미지 뒤집기를 사용합니다. 표시하려면 a:link 및 a:hover를 사용해야 합니다. 다양한 상태의 다양한 이미지. 작성자의 독창성은 CSS의 a:hover에 있다고 생각합니다...

#nav a:hover {배경 위치: 0 -20px;}
# nav a:active {ground-position: 0 -40px;}




내비게이션의 배경 이미지는 a:link, a:의 세 가지 상태에 있습니다. hover 및 a:active 세 개의 그림 대신 동일한 그림이 사용됩니다. CSS를 통해 배경의 수직 위치를 지정하면 버튼이 변경됩니다. 이렇게 하면 각 버튼의 배경 그림에 대한 단일 정의가 필요하지 않고 많은 코드가 절약됩니다. , 사진 수를 줄이고 다운로드 속도를 높이고 관리가 더 쉽습니다.

버튼은 배경 이미지일 뿐만 아니라

홈

CSS를 사용하여 텍스트 숨기기


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


숨겨져 있으니 왜 굳이 텍스트를 작성해야 할까요? 목적은 일반 텍스트 브라우저를 사용할 때(또는 CSS를 참조하지 않을 때) 탐색 링크를 볼 수 있도록 하는 것입니다.