Rev. 2.73

umbrUI는 HTML input 요소에 CSS3를 입혀서 만든 UI 데모입니다. 인터랙티브 디자이너인 Simon씨가 작성한 것으로 위 화면에 보이는 것과 같이 믿기 어려운 결과물들을 보여주고 있습니다. 범위 슬라이더, 체크박스, 라디오 버튼 요소에 CSS3만을 사용하였습니다. 이미지와 스크립트는 단 하나도 사용되지 않았고 버튼에 표시되는 아이콘은 Pictos Font(웹폰트)로부터 추출한 것입니다.

아쉽게도 아직까지는 사파리 브라우저만 정확하게 그려집니다. 크롬에서도 괜찮게 보이기는 하지만 3D 표현이 만족스럽지 못하네요. 아직 시기상조이기 때문에 모든 브라우저를 만족하는 코딩을 시도하지는 않았으며, 애니메이션을 부여하려고 시도했지만 :before :after와 같은 가상 클래스에는 먹히지 않고 gradients, box-shadows, text-shadows, borders 속성의 애니메이션 처리에 버그가 발견되었다고 합니다.

그래도 정말 멋진 시도내요!

<span class="slider"><input type="range" min="0" max="100" /></span> 
<input type="checkbox" data-icon1="P" data-icon2="v" /> 
<input type="radio" name="player" data-icon="4" />

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar