기초FOX · Shadow
깊이
번지는 그림자 대신 먹색 네모 그림자를 오른쪽 아래로 딱딱하게 붙여요. 그림자가 클수록 화면 위로 더 높이 떠 있어요.
그림자 세 단계
번짐(blur)은 없고 밀어내는 거리만 달라요.
SHADOW 1 / 2 / 3
shadow-1
shadow-2
shadow-3
USAGE
--nm-shadow-12px버튼, 칩, 입력칸처럼 작은 부품--nm-shadow-24px카드, 창, 목록 묶음--nm-shadow-36px팝업, 바텀시트, 스낵바처럼 위에 뜨는 것올리면 뜨고, 누르면 가라앉아요
마우스를 올리면 1px 위로 떠오르며 그림자가 3px로 커져요. 누르면 2px 아래로 눌려 들어가며 그림자가 사라져요. 손에 닿는 느낌을 그림자 거리로 보여 줘요.
HOVER AND PRESS
올려 보고 눌러 보세요.
hover: translate(-1px, -1px) shadow 3px
active: translate(2px, 2px) shadow none포커스 링
키보드로 이동하면 종이색 틈 2px 바깥에 보라 링 2px이 생겨요. 누가 어디에 있는지 언제나 보여야 해서 없애지 않아요.
FOCUS RING
포커스가 있는 칸
Tab 키를 눌러 위 버튼으로 이동해 보세요.box-shadow: var(--nm-focus);
/* 0 0 0 2px paper, 0 0 0 4px accent */