[CSS] 나이키사이트처럼 배경 블러 효과 넣기

최근 마우스오버나 딤처리 배경에서 블러효과가 들어간 디자인을 많이 보실 수 있는데요,
나이키 공식 웹사이트에서는 gnb에서 메가메뉴를 펼쳤을 때 나머지 웹페이지의 배경을 어둡게 dim처리 하면서 블러효과를 주어 포커싱되는 인터랙션을 사용하고 있습니다.

이 배경 블러 효과를 사용하는 소스는 css 스타일 소스로 backdrop-filter 입니다.
backdrop filter로 검색하시면 MDN 문서에서 다양한 적용 값을 확인해보실 수 있어요.

 

출처 : MDN web docs

 

 

 

나이키 공식 웹사이트에서의 적용 사례입니다.

 

 

gnb가 스크롤 시 상단 고정될 때 gnb 메뉴 자체의 배경에 blur 효과를 주어 배경이 100% 일 때보다 답답한 느낌을 줄이고 투명도로 인한 개방감을 준 사례입니다.

 

 

div의 배경컬러를 지정할 때 함께 사용하는 속성이므로 배경 컬러와 함께 사용 및 배경 컬러 적용 시 opacity를 주어야 함께 적용되는 것을 확인하실 수 있습니다.

div {background:rgba(0,0,0,0.8); backdrop-filter: blur(5px);}

 

 

div 부분에 지정한 클래스를 입력하고 background-color 로 opacity가 적용된 rgba값을 적용하거나, 앞서 제가 포스팅한 글 중 hex코드 4개를 사용하는 opacity가 이미 적용된 8자리 컬러코드를 사용하셔도 됩니다.

이 backdrop filter 효과를 사용하여 해외 개발자나 퍼블리셔들은 김서린 거울이나 창문의 이미지를 표현한 레퍼런스들을 작업하기도 했습니다. 트렌디한 투명카드 디자인도 가능하므로 활용성이 무궁한 소스가 될 듯 합니다.