FE Developer - CSS, 퍼블리싱 적당히는 알자(6) : box-shadow 버튼 디자인(2) with hover, active, after 인터랙션 활용

 

저번 시간에 마무리로 밑줄이 채워지는 bar 인터랙션을 알아보려해요~!

 

영상은 아래 링크에서 참고해주시면 감사하겠습니다..!(블로그 이전하면서 옮기고 있어요..!)

https://blog.naver.com/glory4god/222663114305

 

순서는 버튼에 커서를 올렸을 때(나중엔 메뉴1, 또는 메뉴2를 선택한다면 charging 되도록!!)

좌측에서 우측으로 bar가 채워지도록 만드는 과정이죠!!

 

일단 배운 after, before 둘 중 하나의 가상선택자를 사용하여, width를 0으로 놓은 후에, hover시에 width가 100%가 되도록 한다면 완성이 될 듯 하죠??!

위의 버튼 구조에서 아래처럼 css 설정해보도록 할게요

.wrap {
  position: relative;
}
.wrap::after {
  content: '';
  position: absolute;
  top: inherit;
  right: inherit;
  bottom: -8px;
  left: 0px;
  width: 0%;
  height: 4px;
  background-color: #c9c9c9;
  transition: all 1s ease-out;
}
.wrap:hover::after{
  width: 100%
}
.title { 
  @apply flex px-8 py-3 text-xl items-center;
  position: relative;
  border: 1px solid #adadad;
  border-radius:21px;
  box-shadow: 0px 3px 6px #adadad;
}
.title:hover { 
/* background-color: rgba(173,173,173, 0.5); */
border: none;
}
.title:active { 
  box-shadow: inset 0px 3px 6px #adadad;
  background-color: white;
}

 

밑줄이 좌측에서 우측 끝까지 차기위해선 wrap이라는 div tag로 전체영역을 잡고,

.wrap::after에서 색, 위치, 두께를 설정한 후 width는 0으로 고정했습니다!

 

이렇게 한 후에 .wrap:hover::after 로 hover가 될 시에 width를 100%로 하니

 

쭉 길이만큼 차는 것을 확인할 수 있을거에요!!

 

만약에, 좌측에서 우측으로 하고 싶다면, right:0에서 width 100%가 되도록 하면 되지 않을까요?

 

이렇게 방향을 다르게 하는 방법 몇가지를 소개하고 마무리하도록 할게요!!

 

1. 우측에서 좌측으로

.wrap::after {
  content: '';
  position: absolute;
  top: inherit;
  right: inherit;
  bottom: -8px;
  right: 0px;
  width: 0%;
  height: 4px;
  background-color: #c9c9c9;
  transition: all 1s ease-out;
}

 

위처럼 left : 0 을 right : 0 으로 바꿔주면 됩니다!

 

2. 가운데에서 양끝으로

.wrap::after {
  content: '';
  position: absolute;
  top: inherit;
  bottom: -8px;
  left: 50%;
  width: 0%;
  height: 4px;
  transform: translateX(-50%);
  background-color: #c9c9c9;
  transition: all 1s ease-out;
}

이 부분은 left 50%를 한 후에 transform으로 -50%만큼 이동 시켜줘야해요!!

 

만약 transform을 안해준다면 가운데서 시작해 우측으로 길이만큼 쭉 가기때문에 좌측에서 50% 위치부터 시작을 하게 돼요.

 

그러면 가운데에서 시작해서 오른쪽으로 나열되는거죠!

아래의 사진에 위의 직선같은 형태입니다!

 

그러면 정 가운데에서 시작하지 않기 때문에 transform : translateX(-50%)로 내 길이의 50% 만큼을 다시 뒤로 간다고 생각하면 돼요!

그러면 정가운데에 위치할 수 있게 되겠죠!

 

transform : translate로 가운데 정렬하는 개념도 다음 시간에 다뤄보도록 하겠습니다!

 

 

다음 포스팅은 FE Developer - CSS, 퍼블리싱 적당히는 알자(7) : UI(Box) Component 만들기 (1) / border, box-shadow, backdrop-filter, transition

 

 

 

#CSS #css#UI#버튼UI#버튼디자인#인터랙션#interaction#transition#after#hover#가상선택연산자#boxshadow