[짧은 CSS팁] 불투명한 유리 효과
backdrop-filter를 이용한 컨테이너 안 필터 적용 효과
외국의 프리미엄 브랜드에서 많이 쓰는 효과를 소개해 드리고자 합니다.
https://www.apple.com/kr/ipad-10.2/애플의 아이패드 소개 페이지입니다. GNB가 불투명하게 처리된 것을 볼 수 있습니다.
https://www.rolls-roycemotorcars.com/en_GB/bespoke/collection-cars/wraith-kryptos-collection.html롤스로이스의 Wraith Kryptos 모델 소개에서도 GNB에 불투명 효과가 들어간 걸 확인할 수 있습니다. 위와 같은 스타일을 구현할 때 사용하는 것은 backdrop-filter입니다.
스펙 문서를 확인하면 보실 수 있는 것처럼 백드롭 필터는 CSS에서 자주 사용되는 필터를 값으로 가집니다.
수많은 백드롭 필터의 사용법이 있지만 애플의 예시처럼 만들기 위해선 saturate와 blur를 동시에 사용하면 됩니다.
backdrop-filter의 브라우저 호환성은 상당히 넓습니다. 이를 활용하면 애플 스타일의 도크 구성을 만들기도 간편하고, 상위 레이어에 반투명한 느낌을 줄 때 간편합니다.
만약 backdrop-filter가 아닌 그냥 filter를 사용하면 어떻게 될까요?
filter가 적용된 좌측, backdrop-filter가 적용된 우측filter를 사용하면 테두리를 벗어나는 모습을 확인하실 수 있습니다. 동일한 blur 필터를 사용할 때에 backdrop-filter는 컴포넌트 내부에만 영향을 주지만 filter는 테두리를 흐리게 만들게 됩니다.(codepen 링크) 이처럼 backdrop-filter는 엘리먼트 영역 안에서만 적용되는 필터라고 기억해두시면 이해하시면 됩니다.
영문 버전: https://www.nomcss.com/css/css-opaque-glass-navigation-bar
