CSS Component UI UX

토글 버튼(컴포넌트) | Toggle Component

@Marina_uiux

일반 버튼 폭 32px 높이 20px

동그라미 폭 16px 높이 16px

 

큰 버튼 폭 44px 높이 24px

동그라미 폭 20px 높이 20px

 

체크박스, 라디오 버튼(컴포넌트) Checkbox, Radio Component

@Marina_uiux

일반 버튼 폭 16px 높이 16px

동그라미 폭 6px 높이 6px

 

큰 버튼 폭 20px 높이 20px

동그라미 폭 8px 높이 8px

 

상호작용 상태 | Interactive States

 

박스 그림자 | Box Shadow

box-shadow 값들이다. 맨 마지막은 mouse hover용 그림자라고 보면 됨

 

 

메쉬그라디언트 Mesh Gradients

https://meshgradient.com/

점들을 움직여서 내가 원하는 메쉬 그라디언트 생성

아래 컬러 4가지 커스텀 가능

이렇게 만든 배경 위에 새로운 레이어를 깔고 Noise, Soft Light Blend Mode를 설정해주면 노이즈 + 그라디언트 배경 완성