이번 시간에는 box-shadow를 통해 정말 간단하지만 버튼 active 상태를 유저에게 확실하게 제공할 수 있는 효과에 대해서 알아보도록 할게요!
요새 CSS 관련 글을 작성할 때 마다 내가 고민하며 구현했던 것들을 나눌 수 있다는게 즐거워요ㅠㅠㅠ
CSS 너무 재밌는 것,,,,,,,,
이제 본론으로 가보도록 하겠습니다!
오늘도 결과를 먼저 보여드리자면 메뉴 1 버튼을 보시면 왼쪽부터 기본 / hover / active 상태입니다!
확실히 hover일 때는 올려놓은 듯하게,
active 상태일 때는 마우스로 누르고 있는 것 처럼 느껴지죠?? 이런게 UI/UX이지 않을까 싶습니닿ㅎㅎㅎㅎ
먼저 box-shadow를 통해 얻을 수 있는 효과를 살짝 설명하자면,
태그의 영역에 그림자효과를 주어 박스 형태가 있을 때, 다양한 접근성을 제공할 수 있습니다!
먼저 제가 주로 쓰는 문법은 아래와 같습니다!
box-shadow : [inset 여부] [offset-x] [offset-y] [blur-radius] [color]저는 5개로 주로 사용하는데 알아보니 spread-radius까지 있더라구요... 정말 CSS는 끝없습니다...!
저는 아래와 같이 box-shadow를 줬습니다! 앞에서부터 설명하자면요~
1) 0px은 x 방향으로의 그림자는 주지 않았다는 뜻!!
(양수이면 오른쪽으로 그림자 생성 / 음수는 왼쪽으로 그림자 생성)
2) 3px은 y방향으로 3px 그림자 줌!
(양수이면 아래쪽으로 그림자 생성 / 음수이면 위쪽으로 그림자 생성)
3) 6px은 blur효과를 6px만큼 줬다는 뜻!
4) 마지막으로 색을 #adadad 로 줬습니다!
.menuButton {
padding: 12px 32px;
border: 1px solid #adadad;
border-radius:21px;
box-shadow: 0px 3px 6px #adadad;
}
그리고 hover 효과시에는 background 색만 짙은 회색으로 바꾸면 되고요!
active 효과시에만 집중해주시면 돼요!!
.menuButton:hover {
border: none;
}
.menuButton:active {
box-shadow: inset 0px 3px 6px #adadad;
background-color: white;
}box-shadow에서 inset 효과를 붙이지 않는다면 기존처럼 그림자가 테두리에 드리우는 것처럼 보여주는 효과를 갖고요 (default!!!)
inset을 준다면, 버튼요소가 안으로 움푹 파인 효과를 주며, 테두리에 그림자가 위에 올라가져 있는 효과를 갖게 됩니다!
결국엔 inset을 주게 되면
이렇게 눌려져있는 형태처럼 보이게 되는거죠!
마지막으로 영상으로 확인해보며 마무리하도록 하겠습니다~!
원래 두 번 나눠서 하려했는데 생각보다 금방 끝나서 어떻게할지 고민되네요.....
selected를 하진 않았으니 지난 시간에 배웠던 after를 활용한 밑줄 인터랙션를 합쳐서 이어서 포스팅하도록 해보겠습니다!!
위와 같은 느낌으로 selected시에 밑줄이 charging되는 형태를 구현하도록 하겠습니다!
다음시간에 봐요~!
다음 포스팅은 FE Developer - CSS, 퍼블리싱 적당히는 알자(6) : box-shadow 버튼 디자인(2) with hover, active, after 인터랙션 활용