실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
열고 닫히는 네이티브 요소들의 지금 열렸는가를 단 하나의 CSS 가상클래스로 통일. 색/회전/백드롭이 전부 :open 으로 그려집니다.
anchor-name / anchor() / position-try-fallbacks로 위치 계산 라이브러리 없이 툴팁/팝오버 만들기
링크에 마우스를 올리면 밑줄이 슬라이드·펼침·교체·차오름·물결로 나타나는 hover 밑줄 6종 갤러리. JavaScript 없이 순수 CSS만으로.
스크롤 이벤트도 IntersectionObserver도 없이, 최신 CSS animation-timeline만으로 진행바를 채우고 요소를 등장시키는 데모.
성공·실패·정보 아이콘이 한 획씩 그려지는 결과 표시 애니메이션.
@keyframes만으로 동작하는 로딩 인디케이터 모음 — 색·속도를 CSS 변수로 한 번에.
흰 코어→컬러 헤일로로 겹친 text-shadow와 steps() 깜빡임으로 만드는 네온 사인.
background-clip:text로 그라데이션을 글자에 입히고 background-position 키프레임으로 흐름을 만드는 순수 CSS 기법. JS 0, GPU만 사용.
clip-path의 polygon · circle · inset 함수로 요소를 다양한 모양으로 잘라내고, hover 시 부드럽게 모핑되는 순수 CSS 마스킹 패턴. Hexagon·Ticket부터 spotlight 확장, 좌→우 리빌까지.
mix-blend-mode 9종을 즉시 전환하며 같은 이미지·텍스트·도형이 어떻게 합성되는지 확인하는 갤러리. Difference·Multiply·Screen의 차이를 한 화면에서 체득.
@property로 angle 변수를 등록하고 conic-gradient(from var(--angle), …)를 회전시켜 카드 보더가 색이 흐르는 듯한 효과. Vercel·Linear·요즘 SaaS 카드 강조에 자주 보이는 패턴.
opacity / translateY / filter blur가 한 번에 풀리며 멀리서 또렷해지는 듯한 깊이감 등장 효과. JS 트리거와 책임 분리.
backdrop-filter와 안쪽 1px 인셋 하이라이트로 깊이감을 만든 글래스 카드 3종. 흰 배경 위에서도 경계가 살아남는 톤.
