CSS : 광택 효과가 적용된 메뉴바

친효스킨 : 더 아트북에 적용시키려고 준비중인 일부 메뉴 스타일을 만들어 봤습니다. 마우스를 올리면 광택이 스윽~ 하는 효과를 만들어주고 싶었습니다. 그래서 간단하게 한번 구현해 보았습니다. 저는 자바스크립트 능력이 현저히 떨어집니다. 그러므로 믿는건 HTML과 CSS 뿐입니다. 하지만 이 두가지로도 이만한 효과를 연출할 수 있습니다. CSS의 장인이 되고 싶어집니다. (웃음)

 

예시

See the Pen CSS : MenuBar by rgy0409 (@rgy0409) on CodePen.

 

이렇습니다. 마우스를 올려보세요. 그러면 스윽 광택이 흐르는 효과가 나타납니다. 메뉴는 일부러 크게 만들어 놨어요. 아마 실전에서는 작게 바뀔 것입니다. 물론 스타일이 살짝 바뀔수도 있구요. 그러면 어떤 원리로 돌아가는건지 간단 설명을 하겠습니다.

 

HTML

<ul class="wrap">
    <li><a href="#">HOME</a></li>
    <li><a href="#">CATEGORY</a></li>
    <li><a href="#">GUESTBOOK</a></li>
    <li><a href="#">LINK</a></li>
</ul>

태그 구성은 이게 전부입니다. ul 태그는 nav 시멘틱 태그로 변경될수도 있습니다. 중요한건 CSS입니다. 바로 넘어가겠습니다.

 

CSS

ul.wrap li a {
    position: relative;
    display: block;
    overflow: hidden;
    width: 250px;
    height: 120px;
    text-align: center;
    line-height: 120px;
    font-size: 2em;
    color: #555;
    transition: all .3s;
    background-color: #333;
}

ul.wrap li a::before {
    position: absolute;
    top: 0;
    left: -85px;
    content: "";
    display: block;
    width: 60px;
    height: 120px;
    transform: skewX(-20deg);
    background-color: rgba(146, 146, 146, 0.8);
}

ul.wrap li a:hover {
    color: #fff;
    background-color: #444;
}

ul.wrap li a:hover::before {
    left: 275px;
    transition: all .4s ease-in;
}

여기에서는 가상요소가 사용됩니다. ::before가 그것입니다. 그리고 이 가상요소는 광택 효과를 보여주는 것입니다. position: absolute이므로 기준은 a태그입니다. 따라서 a 선택자에 position: relative가 마크업 되어있지요. 그리고 가상요소에 보시면 transform: skewX(-20deg) 라는 옵션이 보일겁니다. 이건 X축으로 비트는 겁니다. 포토샵에서는 이것을 왜곡이라는 기능을 써서 만들 수 있구요. transform에 대한 자세한 내용은 아래의 글에 잘 정리해 두었으니 꼭 한번 확인해 보시기 바랍니다.

 

CSS3 transform 사용법 (matrix 포함)

CSS3 transform 사용법 (matrix 포함)

결국 이런 것입니다.

 

가상요소인 빨간색 박스안의 오브젝트를 메뉴 버튼 위에 마우스를 올리면 왼쪽에서 오른쪽으로 잽싸게 이동하는 애니메이션을 만들어 주는 것입니다. 따라서 ::before의 원래 위치에는 left: -85px이라는 값이, :hover::before 에는 left: 275px이 마크업 되었습니다. 그리고 이 가상 요소는 메뉴 버튼을 제외한 위치에 있으면 보이지 않아야 하기에 a 선택자에 overflow: hidden 옵션이 마크업 되어있는 것이구요. 그래도 모르시겠으면 댓글로 어떤 부분이 햇갈리는지 알려주세요. 최대한 답변을 드리겠습니다.

 

마지막으로 ul.wrap li a:hover::before 선택자에 transition: all .4s ease-in; 옵션이 들어가있습니다. 원래는 이 옵션은 hover의 원래 선택자인 ul.wrap li a::before 에 마크업 되어있는게 일반적입니다. 하지만 그렇게되면 문제가 있는데 마우스를 올렸을때는 원하는대로 왼쪽에서 오른쪽으로 가상요소 오브젝트가 이동합니다. 이윽고 다시 마우스를 메뉴에서 빼면 원위치로 돌아오는 애니메이션 연출이 보여집니다. 제가 원하는건 그냥 마우스만 올렸을 때 애니메이션 효과이고 마우스를 빼면 그냥 원위치로 초기화를 시키는 것입니다. 그렇기에 transition을 :hover 선택자에 마크업을 한 것입니다. 그러면 hover 상태에서만 transition 효과가 적용됩니다. 끝.