매슈 레이필드(Matthew Rayfield)의 개인 웹사이트는 팝업 창, 주소 표시줄과 CSS를 재료로 만든 작업을 모은다. 결과물과 제작 설명을 ‘projects’, ‘goodies’, ‘tools’ 등의 경로로 나눠 놓았다.

- [공식 웹사이트](https://matthew.rayfield.world/)

## 본문 밖에서 움직이는 것

- 《Popup Trombone》은 팝업 창을 열고 크기를 바꾸어 연주하도록 안내한다. [[팝업 악기]]에서는 창을 조절하는 손동작이 연주의 입력이 된다. ([작품 안내](https://matthew.rayfield.world/goodies/popup-trombone/))
- 주소 표시줄의 이모지를 바꾸는 실험은 [[URL]]의 해시 부분을 반복 갱신해 달, 시계와 물결을 표시한다. 글에는 동작을 켜고 끄는 예제와 코드가 함께 있다. ([주소 표시줄 애니메이션](https://matthew.rayfield.world/articles/animating-urls-with-javascript-and-emojis/))
- gif2css는 GIF의 프레임을 [[CSS]] 그레이디언트와 애니메이션으로 옮기는 도구다. 제작기는 이미지 없이 움직임을 표현하기 위해 무엇을 늘리고 줄였는지 설명한다. ([제작기](https://matthew.rayfield.world/articles/encoding-animated-gifs-into-pure-css/))
- 작업 목록은 시기별 ‘시즌’과 날짜별 목록을 함께 제공한다. 2026년에 공개한 작업도 이전의 팝업 실험, 3D 프린터 작업과 같은 홈페이지에서 찾을 수 있다. ([작업 목록](https://matthew.rayfield.world/))

## 기타 등등

- gif2css 제작기의 예제는 원본 GIF가 762킬로바이트인데 CSS로 바꾼 뒤 약 3메가바이트가 됐다. [출처](https://matthew.rayfield.world/articles/encoding-animated-gifs-into-pure-css/)
- 홈페이지의 시즌 구분은 1보다 앞선 0과 -1까지 거슬러 올라간다. [출처](https://matthew.rayfield.world/)

#웹사이트 #웹문화 #CSS #자바스크립트 #실험