[CSS] backdrop-filter로 배경에 효과주기

 

라이브는 물론 재탕, 삼탕으로 예능이나 드라마를 볼 때 즐겨 이용하는 티빙.

그동안은 별생각 없이 이용하고는 했었는데

어느 날 문득 스크롤을 내리다 상단바가 눈에 띄었다.

 

 

http://www.tving.com/live/list/tvingtv

 

상단에 고정된 gnb로 자체에 약간의 투명도가 있고,

스크롤을 살살 내려보면 이 밑으로 깔리는 이미지에 블러 처리가 되는 것을 볼 수 있다.

 

filter: blur는 알고 있지만 그건 나 자신에게 블러 처리를 하는 것이기 때문에

속으로 '오!'를 외치며 F12를 눌러 마우스로 이 부분을 콕 집어보니

이른바 backdrop-filter라는 것!

 

filter와 마찬가지로 blur, contrast, grayscale 등등의 효과를 줄 수 있는데

나 자신이 아닌, 말 그대로 backdrop(배경)에 효과를 줄 수 있는 기능이었다.

 

 

 

See the Pen [css]backdrop-filter by shynaunum (@shynaunum) on CodePen.

 

 

이처럼 값에 따라 소수점(또는 %)이나 각도(deg), px 등으로 수치를 입력하면 되는데

drop-shadow랑 url은 이것저것 아무리 때려 넣어봐도(?) 도통 뭐가 바뀌지 않는다.

이건 차차 다시 해봐야지.

 

 

https://caniuse.com/?search=backdrop-filter

크로스 브라우징을 위해서는 -webkit-을 브라우저 접두사로 넣어주어야 하는데

익스플로러에서는 아직 안 열어봤지만, 파이어폭스(82.0.3)에서만 해도 지원되지 않는 기능이다.

그래서 아쉬운 대로 @supports not (backdrop-filter: none) { ~~~ }을 사용해서

때에 따라 배경 투명도를 아예 없애거나, 가독성을 떨어뜨리지 않는 선까지 배경의 투명도를 올리는 방법을 사용해야 한다.

 

 

 

 

한편, css의 backdrop-filter를 응용해서 이런 재미난 것도 만들어 볼 수가 있다.

 

See the Pen GRqeVVo by shynaunum (@shynaunum) on CodePen.

 

backdrop-filter하니 가장 먼저 아이패드가 생각나서 간단하게 습작!

여기에 border에 gradation  넣고, 폴더를 열고 닫을 때 animation이랑 transition만 추가해도 훨씬 그럴싸할 것 같다.

(하지만 여기까지. 모든 브라우저 접두사도 생략.)

 

이런저런 예제를 찾다 보니 유리창에 입김을 불어서 글씨를 쓴 것 같은 효과도

바로 이 backdrop-filter를 사용하면 간단하게 만들 수 있다.

 

 

See the Pen [css]backdrop-filter3 by shynaunum (@shynaunum) on CodePen.

평소 안 쓰던 손글씨 폰트를 이럴 때 사용하면 효과가 도드라진다. :D

그리고 이렇게 mix-blend-mode도 하나 더 알게 되고.

 

filter, backdrop-filter, mix-blend-mode를 보면 photoshop의 기능과 같아서

이와 같은 기능을 한번 샥 정리해보고픈 욕구가 생긴다.