software

Liquid Glass UI 2026 — CSS @property 모핑 카드, Zero JavaScript

발행: (2026년 3월 14일 오전 03:09 GMT+9)
1 분 소요
원문: Dev.to

Source: Dev.to

Liquid glass morphing cards (CSS‑only)

  • 순수 CSS만으로 구축 – JavaScript 없이 동작합니다.
  • CSS @property를 사용해 원뿔형 그라디언트 회전 테두리를 애니메이션합니다.
  • 사용자 정의 속성 --shine-x와 --shine-y로 제어되는 호버 반짝임 효과.
  • 굴절 깊이를 위해 backdrop-filter를 적용합니다.
  • SVG feTurbulence를 이용해 입자(그레인) 오버레이를 추가합니다.
  • 시각적 포인트를 위한 스태거드 스파크라인 바를 제공합니다.

이 모든 효과는 CSS만으로 구현되었습니다.

0 조회
#CSS #UI components #morphing cards #CSS @property #conic-gradient #backdrop-filter #pure CSS #web design
원문 보기
Share:
Back to Blog

관련 글

더 보기 »

CSS 앵커 포지셔닝 메뉴 하이라이트

현대적인 네비게이션 메뉴를 만들고, 활성 항목이 부드럽게 움직이는 인디케이터로 강조됩니다. 깔끔하고 가벼운 디자인을 위해 최신 CSS 기술을 사용했습니다.

당신의 디자인 시스템에 결합 문제가 있습니다

소개 나는 직설적으로 씁니다, 나는 당신의 시간을 소중히 여깁니다—불필요한 말은 줄이고, 가치 있는 내용에 집중합니다. 인기 있는 컴포넌트 라이브러리를 선택하고 Button 컴포넌트를 찾아보세요. 그러면 다음을 보게 됩니다: 구조...