Foundations
글래스 · 블러
떠있는 레이어는 불투명 면이 아니라 반투명 유리로 처리합니다. 뒤 콘텐츠가 블러로 비쳐 깊이가 생기고, 스크롤 위에 떠있다는 신호를 줍니다. 아래 토큰만 사용하세요.
글래스 토큰
화이트 글래스 3종 + 다크 스크림. 불투명도 · 블러 · 채도(saturate) 세 값으로 정의됩니다. 컬러풀한 배경 위에서만 효과가 보입니다.
SOUND.RADAR
유리 위 텍스트는 ink로 또렷하게
Glass · Header
opacity .82 · blur 18px · sat 160%
SOUND.RADAR
유리 위 텍스트는 ink로 또렷하게
Glass · Panel
opacity .96 · blur 18px · sat 160%
SOUND.RADAR
유리 위 텍스트는 ink로 또렷하게
Glass · Bar
opacity .82 · blur 20px · sat 180%
Glass · Header
rgba(255,255,255,.82)blur(18px)
Glass · Panel
rgba(255,255,255,.96)blur(18px)
Glass · Bar
rgba(255,255,255,.82)blur(20px)
Scrim
rgba(10,10,10,.45)blur(2px)
구성 레시피
유리 한 장은 다섯 재료로 완성됩니다. 순서대로 쌓으면 사이트의 헤더 pill과 동일한 표면이 됩니다.
1
반투명 배경
background: rgba(255,255,255,.82)
블러가 깔릴 면. 콘텐츠 밀도 높으면 .96.
2
백드롭 블러
backdrop-filter: blur(18px)
뒤 콘텐츠를 흐림. -webkit- 접두사 필수.
3
채도 부스트
saturate(160%)
블러로 빠진 생기를 보정.
4
얇은 보더
1px solid rgba(229,229,229,.85)
유리의 가장자리를 정의.
5
부양 그림자
0 8px 30px rgba(20,20,20,.08)
떠있는 높이감. 레이어 깊을수록 진하게.
/* Glass · Header — 사이트 표준 */
.glass {
background:rgba(255,255,255,.82);
backdrop-filter:saturate(160%) blur(18px);
-webkit-backdrop-filter:saturate(160%) blur(18px);
border:1px solid rgba(229,229,229,.85);
border-radius:16px;
box-shadow:0 8px 30px rgba(20,20,20,.08);
}
스크림
모달 · 시트가 열릴 때 뒤를 덮는 어두운 유리. 화이트 글래스와 반대로 다크 + 약한 블러(2px)로, 초점을 앞 레이어에 묶습니다.
캠페인을 게시할까요?
게시 후에는 차트 윈도우가 시작됩니다.
취소
게시
rgba(10,10,10,.45) · blur(2px) · z-index 80
사용 규칙
권장
- · 떠있는·고정 레이어에만 — 헤더 · 드롭다운 · 모달 · 바
- · 뒤에 스크롤되는 콘텐츠가 있을 때 (블러가 비칠 대상)
- · 유리 위 텍스트는
ink로 또렷하게 - ·
-webkit-backdrop-filter항상 함께 선언
금지
- · 정적인 본문 카드·섹션에 유리 적용 (배경이 흰색이라 효과 없음)
- · 한 화면에 유리 레이어 여러 겹 중첩
- · 불투명도 .82 미만 — 텍스트 가독성 붕괴
- · 블러 22px 초과 — 성능 저하 · 뒤 형체 완전 소실
폴백
backdrop-filter 미지원 브라우저에서는 반투명 배경만 남아도 읽혀야 합니다. 불투명도를 한 단계 올린 솔리드로 대체하세요.
/* backdrop-filter 미지원 시 — 더 불투명한 솔리드로 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
.glass { background:rgba(255,255,255,.96); }
}