요즘 새롭게 부상할 디자인 트렌드로 글래스모피즘이 부상할 것이라는 이야기가 나오고 있습니다. 글래스모피즘 디자인은 표면이 반투명 유리 재질의 표면을 통해 배경이 흐릿하게 나오는 디자인 철학을 뜻합니다.
이미 macOS의 빅 서 (Big Sur)에서 전반적으로 새롭게 글래스모피즘 디자인이 적용된 것을 볼 수 있습니다.
이러한 디자인의 CSS를 직접 만들 수 있지만, 이런 스타일을 만들어주는 외부 사이트들이 굉장히 많습니다. 이런 사이트를 활용하는 것이 많이 도움이 됩니다.
Blur value– 블러 강도를 조절합니다. 높을수록 흐려지고, 낮을수록 선명해집니다.Transparency– 반투명 강도를 조정합니다. 높을수록 반투명 강도도 높아집니다.Color– 기본 색상은 흰색이며, 다른 색상을 지정할 수 있습니다.Show Outline– 체크박스 선택시 희미한 경계선이 나타나며, 해제시엔 아무것도 표시되지 않습니다.CSS– 해당 CSS를 원하는 곳에 가져다 사용하면 됩니다.
backdrop-filter는 요소 뒤에서 나타날 수 있는 효과를 적용하는 CSS 속성으로, 요소 뒤에서 효과가 적용되므로 반투명 효과가 같이 적용되어야 해당 효과가 나타날 수 있습니다. 이 속성이 유리 재질처럼 보이게 하는 핵심 원리입니다.
0개의 댓글