배경
유리 뒤에 아무것도 없으면 backdrop blur 가 할 일이 없습니다. 그래서 배경을 완전히 비우지는 않습니다.
다만 파랑·보라·민트 삼색 블롭은 뺐습니다. 서로 다른 색상환 세 지점을 균등하게 흩뿌린 배경은 사람이 고른 색이 아니라 색상환을 3등분한 결과처럼 보입니다. 브랜드 파랑 한 계열 안에서 두 톤만 쓰고, 위치도 대칭을 피합니다.
블롭은 정적입니다 — 저사양 기기에서도 안전합니다. 다크에서는 같은 색상에서 명도만 낮춥니다. 밝은 파스텔을 어두운 배경에 얹으면 뿌연 얼룩이 됩니다.
import { UyooBackdrop } from "@uyoolabs/uyooglass/backdrop";
// 대시보드 레이아웃: 페이지 최상단에 한 번
<UyooBackdrop />
// 로그인 화면
<UyooBackdrop variant="auth" />두 변형
대시보드는 기본값, 로그인 화면은 auth 입니다.
variant="dashboard"
유리 카드가 블롭을 굴절시킵니다.
variant="auth"
유리 카드가 블롭을 굴절시킵니다.
이 페이지에서 바꿔 보기
사이트 전체 배경을 바꿉니다. 페이지를 떠나면 원복합니다.
블롭 색
backdrop.css
| 클래스 | 변형 | 라이트 | 다크 |
|---|---|---|---|
| uyoo-blob-a | dashboard | oklch(0.85 0.09 240) | oklch(0.42 0.1 240) |
| uyoo-blob-b | dashboard | oklch(0.86 0.08 300) | oklch(0.38 0.08 290) |
| uyoo-blob-auth-a | auth | oklch(0.86 0.07 242) | oklch(0.42 0.1 240) |
| uyoo-blob-auth-b | auth | oklch(0.88 0.045 262) | oklch(0.38 0.06 262) |