Django 포스팅
Doyeon0430 | 2023년 07월 03일
이번시간에는 버튼 디자인에 필수 요소인 테두리(border) 디자인을 소개하겠습니다.
CSS로 다양한 테두리를 표현할 수 있으며 대표적으로 사용되는 5가지 효과를 가져왔습니다.
그럼 지금부터 border를 사용해 테두리 경계선 디자인을 제작하겠습니다.
첫 번째는 기본적으로 사용되는 둥근 모양 테두리 경계선입니다.
border-radius를 사용해 만들 수 있습니다.
두 번째는 방향에 따라 조절할 수 있는 테두리 경계선입니다.
border-radius에 값을 시계방향으로 [왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래] 입력할 수 있습니다.
다른 각도로 독특한 표현을 구상합니다.
세 번째는 그라데이션이 추가된 테두리 경계선입니다.
border-image와 border-image-slice를 사용해 그라데이션 효과를 줬습니다.
왼쪽에서 오른쪽으로 색깔이 이동되며 slice는 1이 기본값입니다.
네 번째는 그림자가 추가된 테두리 경계선입니다.
box-shadow를 사용해 그림자 효과를 넣어봤습니다.
그림자 조절은 [X축 Y축 blur color]대로 진행합니다.
그림자가 사진에도 많이 쓰일만큼 사물의 입체감을 표현하기 좋습니다.
다섯 번째는 애니메이션이 추가된 테두리 경계선입니다.
transition을 사용해 애니메이션 효과를 넣어봤습니다.
마우스를 테두리에 올리면 hover와 focus가 작동합니다.
그렇게 물체의 역동적인 표현을 나타낼 수 있습니다.
글을 마치며 버튼이나 경계선에 효과를 적용해봤습니다.
유저의 시선을 사로잡을 수 있는 장점이 있습니다.
댓글 (0)
간편 댓글 작성
