글래스모피즘 (Glassmorphism)?
새로운 Web 트렌드의 참고 HTML 코드 도구 정리
Glassmorphism (글래스모피즘) 이란 ?
2020년 말보다 인기가 높아지고있는 스타일로, 조용히 사라져가는 트렌드 뉴 모드 필터 알고리즘의 플라스틱 질감에 유리를 통해 들여다보는 것 같은 배경 흐림(투명화)이 특징인 스타일입니다.
글래스모피즘의 스타일로 누릴 수 있는 포인트 4가지
- 투명도 (영어 : Transparency) : 배경 흐림을 사용하여 유리와 같은 효과
- 공간에 부유하는 객체를 이용한 여러 계층 레이어상의 접근
- 흐린 투명감을 돋보이게하는 선명한 배색
- 반투명 오브젝트에 약간의 테두리 테두리 추가
글래스모피즘의 스타일 사용 시 주의 할 점
올바른 투명도 설정 방법
Photoshop과 같은 디자인 도구에서는 도형 모양의 "투명도"를 낮추는 것이 아니라,
"칠"을 조정하는 것으로, 배경 흐림의 투명도는 변함없이 흐림 상태를 잘 표현할 수 있습니다.
"칠 : 100 %" 라고되어 있으면, 흐린 효과를 잘 다룰 수 없기 때문에 주의가 필요합니다.
1px 테두리에서 더 리얼한 마무리
보다 리얼하게 마무리하고 싶다면 효과를 씌운 도형 모양 내부에 1px 반투명 테두리를 추가하는 방법입니다.
이렇게함으로써 유리의 가장자리를 재현해 보이며 도형을 더 두드러지고 뚜렷하게 보여 질 수 있습니다.
글래스모피즘 필터 알고리즘을 제작할 수 있는 온라인 생성기
글라스 모드 필터 알고리즘은 CSS 스타일로 표현 될 점도 포인트로 backdrop-filter: blur()는 CSS 속성을 활용하는 것만으로 흐림 공개를 손쉽게 디자인 할 수 있습니다.
글라스 모드 필터 알고리즘을 웹 사이트에 배포하는 경우 흐림 상태는 불투명도를 토글로 조정할 수 그대로 코피 페 가능한 코드를 다운로드 할 수있는 무료 온라인 서비스 Glassmorphism CSS Generator 를 이용해 보면 좋을 것입니다.
참조 원본 링크 : Glassmorphism in user interfaces by Michal Malewics - UX Collectivre
참조 원본 링크 : Rules to play Glassmorphism safe! by Arrun Karunanithi - Prototypr.io
참조 원본 링크 : Glassmorphism - how to create in pure CSS - Albertwalicki.com
참조 원본 링크 : Glassmorphism : Upcoming UI trend by Supriya Shashivasan - DEV
Glassmorphism : Upcoming UI trend
I recently stumbled upon a design on Dribbble and learned about this new UI trend that has caught a l...
dev.to