10가지 멋진 CodePen 데모 (2026년 3월)

Source: Dev.to

2026 F1 Drivers Custom Select using appearance: base-select

Chris Bolson이 만든 커스텀 셀렉트는 제가 본 것 중 가장 인상적인 사례 중 하나입니다. 네이티브 HTML <select>처럼 보이기도 하지 않죠. UX가 부드럽고 깔끔해서 꼭 한번 써볼 가치가 있습니다.

Custom Select by Temani Afif

Temani Afif의 커스텀 셀렉트 역시 일반적인 컨트롤에서 벗어납니다. 과일을 쏘아 터뜨리면서 선택을 하는 방식으로, 장난기 넘치는 실험이며 반드시 시도해볼 만합니다.

Demo of lighter operator in SVGFECompositeElement

Safari 팀이 최근 feComposite 요소에 대한 지원을 추가했습니다. Jen Simmons가 만든 이 데모는 새로운 속성이 없었다면 원형 주변에 빛이 나타나지 않았을 정도로 작동 방식을 보여줍니다.

Neon Iridescent Ribbon using p5.js

Margarita가 만든 컬러풀한 리본이 화면을 가로질러 움직이는 편안한 애니메이션입니다. 데모 상단에서 설정을 바꾸면 실시간으로 변화가 적용돼 p5.js를 배우기에 좋습니다.

Untitled (Opposite Directions CodePen challenge)

“Opposite Directions” 챌린지의 일환으로 Shivani가 만든 재미있는 애니메이션입니다. 두 팀의 도형(Cyan과 Magenta)이 중앙에서 충돌하면서 반대 코너를 향해 움직이며, 캐릭터가 움직이는 모습을 보며 어느 팀이 이길지 추측하는 재미가 있습니다.

CSS position: sticky for Single‑Axis Scroll Containers

Bramus가 새로운 Chrome Canary 기능을 시연합니다. 이 기능은 대형 데이터 테이블에서 헤더나 열을 고정(sticky)시키는 작업을 간소화해, 방대한 테이블을 다루는 데 큰 변화를 가져올 수 있습니다.

CodePen TV – 100 % Pure CSS

Ben Evans가 또 다른 놀라운 CSS 아트를 공유합니다. HTML과 CSS만으로 완전히 인터랙티브한 TV 세트를 구현했으며, 일러스트를 탐색하고 모든 버튼을 눌러볼 수 있습니다.

Using sibling-index() to hue‑shift / increment opacity in SVG paths

Many Nicole의 일러스트는 상대 색상과 새로운 sibling-index() 함수를 활용해 블롭을 이루는 선들의 색조를 바꾸는 방법을 보여줍니다.

The CSS if() Function

Rob이 만든 CSS if() 함수 튜토리얼은 스타일시트 내에서 인라인 조건문을 사용할 수 있게 해줍니다. 데모와 지식 테스트가 포함돼 이 새로운 기능을 배우기에 훌륭한 자료입니다.

Gekke zoom dingen

Cyd Stumpel의 “미친” 줌 데모는 스크롤에 따라 움직이는 애니메이션과 스케일링을 결합했습니다. 효과는 패럴랙스와 비슷하지만 독특하고 멋져서 향후 프로젝트에 차용하기 좋은 아이디어입니다.