반응형

UI디자인 12

CSS로 그라디언트 테두리 버튼 디자인하기

안녕하세요 찐망고입니다.요즘 버튼모양 테두리에도 그라디언트가 들어가는 디자인을 보게 되는데요.쉽게 테두리에 그라디언트를 적용해 보겠습니다.   그라디언트는 원래 image의 영역이에요.그래서 본디 배경색에 그라디언트를 넣는 경우에도 background-image로 적용했거든요.  See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 a요소의 테두리만 그라디언트로 보이기 위해a요소 자체에 배경이미지로 그라디언트를 넣고,span요소에도 배경색을 넣고 width와 height를 2px씩 줄여서 테두리처럼 보이게 만드는 방법이 있습니다 ㅎㅎ  물론 지금은 border자..

WEB/CSS 2024.01.24

다양한 웹사이트 내비게이션 스타일 소개

안녕하세요 찐망고 입니다. 오늘은 웹내비게이션에 대해 알아보려 합니다. 웹사이트에 접속한 사용자가 현재 위치와 이동경로를 파악할 수 있도록 돕는 내비게이션은 매우 중요합니다. 이는 사용자가 빠르게 원하는 목적을 달성할 수 있도록 도와주죠. 내비게이션은 그 구성에 따라 여러 단계로 나누어집니다. 예를 들어 사이트는 노란색 컬러에 해당하는 1단 메뉴를 눌렀을 때 빨간색에 해당하는 2단 메뉴가 나오고 빨간색을 기준으로 파랑계열의 3단 메뉴가 나옵니다. 이처럼 3단계 내비게이션은 깊이가 있지만, 너무 많은 단계는 사용자에게 혼란을 줄 수 있어 피하는 게 좋습니다. 반응형 사이트를 설계할 때는 PC와 모바일에서 내비게이션을 어떻게 표현할지 고민해야 합니다. 때로는 한 개의 내비게이션을 공유하고, 때로는 두 개의 ..

반응형