Rev. 2.73

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

i

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

Comments

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

Comments