유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Liquid Glass Effect with CSS

Better Stack

2025. 8. 2.

0

#frontend
  • CSS와 HTML을 사용하여 액체 유리 효과를 만드는 방법을 설명합니다. 🧪
  • 먼저 'card' 클래스를 가진 div를 생성해야 합니다. 🎴
  • 'card' 클래스 내에서 backdrop-filter를 사용하여 밝기를 1.1로 설정하고 흐림 효과를 2픽셀로 설정합니다. ✨
  • SVG 필터의 ID인 'displacement-filter' URL을 설정하는 것이 중요합니다. 🔑
  • 필터 내부에 이미지와 변위 맵을 만들어야 합니다. 🖼️
  • 변위 맵에서 적색 및 녹색 채널을 지정해야 합니다. 🔴🟢
  • 데이터 이미지로 적색 및 녹색 채널을 사용하는 것이 좋습니다. 📊
  • 모든 설정을 완료하면 액체 유리 효과가 적용된 카드 요소를 얻을 수 있습니다. ✅
  • 전체 튜토리얼과 소스 코드는 비디오에서 확인할 수 있습니다. 💻

Recommanded Videos