Rev. 2.73



Web Designer Wall의 Nick La씨는 CSS3를 이용하여 위와 같은 아름다운 드롭다운 네비게이션을 구현했습니다. 더불어 CSS3를 지원하지 않는 브라우저에서도 최소한의 모습을 유지하고 정상적으로 동작하도록 만들었습니다. :hover 액션을 적절히 사용하여 자바스크립트를 사용하지 않고도 서브메뉴 출력과 포커스 효과를 훌륭하게 구현으며, CSS3를 지원하는 브라우저인 경우 border-radius, box-shadow, text-shadow 속성이 활성화 되어 마치 그래픽 디자인한 듯한 느낌을 받게 됩니다. 놀랍게도 가로 1px짜리 반투명 png 이미지를 하나만 사용하여 여러 요소의 background 속성에 범용으로 사용하는 모습은 매우 인상적입니다.

Comments

analogseconds.png analogminutes.png analoghours.png
digitalhours.gif digitalminutes.gif digitalseconds.gif
 
 

Jon Combe씨는 HTML과 자바스크립트 그리고 CSS3의 회전 속성을 이용하여 위 두가지 모양의 시계는 만들었습니다. <canvas>또는 <svg>요소를 이용한 표현 수단으로만 가능했던 많은 것들이 일반 요소(<img>, <div>)들에 회전 속성을 정의하여 손쉽게 처리할 수 있게된 것입니다. 단, 최신 버전의 브라우저에서만 지원하는 점과 구현 과정에 놓여있는 명세이기 때문에 브라우저마다 별도의 처리를 필요로하는 번거로움이 따릅니다만, 미리 숙지해서 나쁠 건 없겠죠?

Comments