권장 브라우저 안내

이 웹사이트는 Internet Explorer 9 버전 이상에서만 이용 가능합니다.
편리한 사이트 이용을 위하여 최신 브라우저로 업그레이드해주시기 바랍니다.

다크 모드로 보기 라이트 모드로 보기

저희와 함께 하시겠습니까?

프로젝트 의뢰는 아래로 문의 주시기 바랍니다.
websre@naver.com
Tel: 1800-9356

본문 바로가기

News

웹스리퍼블릭의 공지사항을 확인하세요.

Our News. Get the latest news from Websrepublic right now Our News. Get the latest news from Websrepublic right now Our News. Get the latest news from Websrepublic right now
News
October 12, 2018
Article

CSS 트릭으로 링크 호버를 재미있게 표현하는 방법

본문

수많은 페이지에 존재하는 기존 링크는 밑줄, 점선, 색상 등등 몇 가지로 사용자의 시선을 끄는 획일적인 형태를 취하고 있다.

 

링크는 해당 페이지에서 대상 페이지나 구매 페이지로 연결하게 되므로 기능적인 측면에서 유용하여 방문자의 클릭을 유발하기 위해 시인성이 높고 두드러지게 하는 것이 좋다.

 

정적인 기본 링크에 마우스 오버 효과를 독특하게 구현하여 동적인 링크를 제공하면 사용자의 시선을 사로잡아 클릭 빈도를 높일 수 있다. 그런 까닭에 개발자는 다양한 방법으로 마우스 오버 효과를 구현하는 방법을 연구해 왔다.

 

99F6FF3A5BBDA23511

 

오늘은 CSS 트릭을 이용해 더욱 생동감이 넘치고 눈길을 사로잡을 수 있는 마우스 오버 효과인 호버 상태를 독특하게 표현하는 방법을 알아 본다.

 

SVG 태그 소스를 활용 CSS 'background-image' 속성에 SVG를 사용하는 방법이다.

 

이 CSS 트릭을 이용해 링크의 호버상태를 파형, 배경효과, 아웃라인, 그라데이션, Raised Text Effect, 글꼴 전환, 턴업 효과 등 다양하게 구현할 수 있다.

 

CSS 코드 몇 줄을 추가해서 페이지 링크를 흥미롭고 재밌게 구현하는 것이 어렵지 않고 이를 통해 사용자에게 색다른 경험을 줄 수 있다는 점에서 신선한 변화가 될 것이다.

 

자세한 구현 방법은 다음 링크를 참고하면 된다. [CSS Trick 소스 보기 : Having fun with link hover effects ]



출처: http://designlog.org/2512645?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+DesignlogOfMaru+(DESIGN+LOG+-+Design+%26+Digital+Convergence+Webzine) [디자인 로그(DESIGN LOG)] 

Contact us

궁금하신 사항을 남겨주세요!
확인 후 빠른 답변 드리겠습니다.
  • T. websre@naver.com
  • M. 1800-9356
  • 예산을 선택해 주세요.
    • 100만원 이하
    • 300만원 이하
    • 500만원 이하
    • 700만원 이하
    • 1000만원 이하
    • 1000만원 ~ 2000만원
    • 2000만원 이상


디자인 샘플보기

상담톡
궁금한게 있으신가요? 무엇이든 물어보세요.