맥 OS Dock 구성(Mac OS Dock)

맥 OS Dock 구성(Mac OS Dock)

순수 CSS3와 HTML이 있는 MacOS Dock 메뉴가 가능할까요? 우리는 웹 애플리케이션에서 다양한 종류의 메뉴를 봐왔습니다. 메뉴에는 다양한 스타일, 다양한 애니메이션, 다양한 색상 등이 사용됩니다. MacOS에 익숙하다면 도커 메뉴가 어떤지 잘 알고 있을 것입니다. 도커는 화면 하단에 있는 아이콘 모음입니다. Mac에 있는 일부 Apple 애플리케이션에 쉽게 액세스 할 수 있습니다.

오늘은 CSS3로 Mac 스타일의 Dock Menu를 만드는 방법을 알아보겠습니다. MacOS Docker 메뉴와 비슷하게 생긴 메뉴는 CSS3와 HTML만 사용하는 메뉴입니다. 아시다시피 CSS3 속성은 아이콘에 애니메이션 효과와 반사 효과를 추가하는 데 도움이 될 것입니다. 애니메이션 위에 마우스를 올려 놓으면 JavaScript의 도움 없이 CSS3 전환됩니다.

HTML FOR Mac OS Dock Menu

<div id="dock-container">
 <div id="dock">
   <ul>
      <li>
        <span>Address Book</span>
        <a href="#"><img src="icon-1.png"/></a>
      </li>
      <li>
        <span>App Store</span>
        <a href="#"><img src="icon-2.png"/></a>
      </li>
      <li>
         <span>Chrome</span>
         <a href="#"><img src="icon-3.png"/></a>
      </li>
      <li>
         <span>Firefox</span>
         <a href="#"><img src="icon-4.png"/></a>
      </li>
   </ul>
 </div>
</div>

여기 ul 안에 목록을 추가했습니다. html 구조를 보여주기 위해서 4개의 목록 항목을 추가했습니다. 각 목록 항목에는 스팬, 태그 및 Img 태그가 있습니다. 항목에 대해 자신의 이미지를 사용합니다. 항목 이름과 함께 스팬이 추가됩니다. 이 텍스트는 아이콘 위에 마우스를 올려 놓는 경우에만 볼 수 있습니다. 마크업이 준비되었습니다. 이제는 MacOS Dock 메뉴처럼 보이도록 요소를 스타일링해야 합니다.

CSS FOR Mac OS Dock Menu

스타일링의 첫번째 부분은 메인 구조와 리스트를 위한 것입니다.

      #dock-container {
            position: fixed;
            bottom: 0;
            text-align: center;
            right: 20%;
            left: 20%;
            width: 60%;
            background: rgba(255,255,255,0.2);
            border-radius: 10px 10px 0 0;
        }
        #dock-container li {
            list-style-type: none;
            display: inline-block;
            position: relative;
        }

ID가 dock-containe'인 구조가 추가됩니다. 우리는 고정 위치를 추가하고 바닥을 '0'으로 만들고 있습니다. 이제 창의 하단에 부착됩니다. li에서 기본 글머리 기호 스타일을 제거하고 인라인 블록으로 표시되도록 합니다. 또한 li 안의 스팬을 절대값으로 배치해야 하므로 상대 값에도 위치를 추가합니다.

구조와 li는 준비되었습니다. 이제 MacOS Dock 메뉴에서 볼 수 있는 것처럼 이미지에 대한 이미지와 리플렉션 스타일을 지정해야 합니다.

   #dock-container li img {
          width: 64px;
          height: 64px;
          -webkit-box-reflect: below 2px
                    -webkit-gradient(linear, left top, left bottom, from(transparent),
                    color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
          -webkit-transition: all 0.3s;
          -webkit-transform-origin: 50% 100%;
        }

이제 box-reflect를 사용합니다. 기억하세요. box-reflect은 웹킷에서만 지원됩니다.

CSS for adding animation for the Mac os dock menu on hover

     #dock-container li:hover img { 
          -webkit-transform: scale(2);
          margin: 0 2em;
        }
        #dock-container li:hover + li img,
        #dock-container li.prev img {
          -webkit-transform: scale(1.5);
          margin: 0 1.5em;
        }

이미지를 마우스로 가리키면 2로 확대/축소 효과를 표시하기 위해 변환합니다. 위 css의 두 번째 부분은 중첩된 아이콘의 오른쪽에 있는 아이콘을 확대 축소하거나 확대 축소하는 것입니다. CSS 인접 형제 선택자를 사용하여 스케일을 정의하기만 하면 됩니다. 이제 MacOS 도크 메뉴의 확대 축소 부분이 준비되었습니다. 이제 메뉴 항목과 관련된 텍스트를 표시하는 스팬에 스타일을 지정해야 합니다. 처음에는 숨겨지고 아이콘 위로 마우스를 이동하면 범위가 표시됩니다.

     #dock-container li span {
            display: none;
            position: absolute;
            bottom: 140px;
            left: 0;
            width: 100%;
            background-color: rgba(0,0,0,0.75);
            padding: 4px 0;
            border-radius: 12px;
        }
        #dock-container li:hover span {
            display: block;
            color: #fff;
        }

Preview

본 사이트 메인에 적용한 맥 OS 스타일의 CSS Dock Bar 입니다.