CSS 디자인
CSS Component UI UX
박금향
2023. 8. 29. 14:16
토글 버튼(컴포넌트) | Toggle Component
일반 버튼 폭 32px 높이 20px
동그라미 폭 16px 높이 16px
큰 버튼 폭 44px 높이 24px
동그라미 폭 20px 높이 20px
체크박스, 라디오 버튼(컴포넌트) Checkbox, Radio Component
일반 버튼 폭 16px 높이 16px
동그라미 폭 6px 높이 6px
큰 버튼 폭 20px 높이 20px
동그라미 폭 8px 높이 8px
상호작용 상태 | Interactive States
박스 그림자 | Box Shadow
box-shadow 값들이다. 맨 마지막은 mouse hover용 그림자라고 보면 됨
메쉬그라디언트 Mesh Gradients
점들을 움직여서 내가 원하는 메쉬 그라디언트 생성
아래 컬러 4가지 커스텀 가능
이렇게 만든 배경 위에 새로운 레이어를 깔고 Noise, Soft Light Blend Mode를 설정해주면 노이즈 + 그라디언트 배경 완성