실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
자식 요소가 자기 클래스가 아니라 부모에 심어둔 커스텀 속성 값(--tone)을 보고 색과 아이콘을 스스로 바꿉니다. 한 곳의 값 하나만 갈면 그 아래가 전부 따라옵니다.
검은 부분은 보이고 투명한 부분은 잘리는 마스크로 가장자리 페이드, 스포트라이트, 별 모양 컷아웃을 CSS만으로 만듭니다.
CSS 커스텀 속성에 '타입'을 등록하면, 원래 툭 점프하던 그라데이션 각도/숫자도 부드럽게 흐릅니다. JS 상태 없이 CSS만으로 숫자 카운트업까지.
clamp(min, preferred, max) 한 줄로 화면 폭에 맞춰 글자 크기와 여백이 최솟값과 최댓값 사이에서 연속으로 커지고 작아집니다. 미디어쿼리 단계를 쌓을 필요가 없어요.
자식 그리드가 부모의 행/열 선을 그대로 물려받아, 제목 길이가 제각각인 카드들의 본문과 버튼 줄을 같은 높이에 딱 맞춰 정렬합니다.
text-wrap: balance로 제목 줄 길이를 비슷하게 맞추고, pretty로 본문 마지막 줄에 단어가 외롭게 남는 걸 줄입니다. 수동 줄바꿈이나 JS 없이 CSS 한 줄로.
기본 색 하나만 정하면 밝은색/어두운색/hover/테두리/반투명까지 브라우저가 계산합니다. light-dark()로 라이트/다크 색을 한 규칙에 담아요.
@starting-style 와 transition-behavior: allow-discrete 한 묶음이면 display:none에서 나타나거나 사라지는 요소도 라이브러리 없이 부드럽게 움직여요. React는 boolean 하나만 뒤집어요.
같은 카드가 좁은 칸에선 세로로, 넓은 칸에선 가로로 자동 전환됩니다. 미디어 쿼리(화면 크기 기준) 없이 컴포넌트가 자기가 담긴 칸 너비만 보고 모양을 바꿔요.
입력이 맞으면 칸이 초록, 다 체크하면 카드가 완료 색, 이미지가 있으면 레이아웃이 바뀝니다. 전부 JS 없이 CSS :has() 한 줄로 처리해요.
그리드/플렉스의 gap 한가운데에 column-rule, row-rule로 구분선을 그립니다. border나 가짜 요소로 우회하던 칸 사이 선을, 레이아웃을 1px도 밀지 않는 순수 시각 효과로 해결합니다.
열고 닫히는 네이티브 요소들의 지금 열렸는가를 단 하나의 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종. 흰 배경 위에서도 경계가 살아남는 톤.
