Rev. 2.73

Chris Coyier씨는 예술가인 Zoran Pekoviċ씨의 플래시로 만들어진 작품을 HTML, CSS, 그리고 약간의 자바스크립트를 이용하여 보여지도록 변환했습니다. 파이어폭스와 웹킷 계열 브라우저(사파리, 크롬 등)에 정상적으로 작동하며 파폭에서 더욱 깔끔한 애니메이션을 보여줍니다. 자바스크립트는 단지 z-index를 증가시키고 클래스 이름을 변경하며, 나머지는 모두 CSS로 표현되는 것입니다.

Click on the images to reveal another.

Comments

CSS3를 이용하여 다양한 시도를 즐기는 Simon씨는 또다시 CSS3를 이용하여 놀라운 것을 만들었습니다. 이번에는 금속질감을 표현한 버튼들입니다. 아래에 출력된 결과물은 CSS3의 repeating-gradient 속성과 텍스트 그리고 :before, :after와 같은 몇몇 가짜 요소를 중첩해서 만들어진 것입니다. 버튼을 클릭하면 파란색으로 빛나는 효과도 있습니다. 선형으로 만들어진 금속 버튼은 브라우저 지원이 준수한 반면, 원형 버튼은 웹킷 계열 브라우저에서만 제대로 표현됩니다.

i

참, Tom Giannattasio씨가 만든 CSS3 실험도 구경해 보라는군요.

Comments

CSS3를 이용하여 umbrUI를 만든 Simon씨가 최근 작업한 음악 재생기인 XEN 플레이어입니다. jQuery 라이브러리jPlayer 플러그인을 기반으로 만들어 졌으며, 재생/일시정지 기능을 가지고 있습니다. CSS3를 이용하여 간결하면서도 화려한 애니메이션 효과를 구현한 것에 살짝 감동 받았네요. 이것은 단지 데모일 뿐이며, 일부 브라우저에서는 버그가 발생한다고 합니다. github에서 다운로드 할 수 있습니다.

Comments