HTML5 Rocks

HTML5 Rocks

HTML5 특징

CSS3

CSS3의 소개와 함께 HTML에서 화려하고 아름다운 사이트와 애플리케이션을 생성하는게 어려워졌습니다. 몇가지만 언급해보면, 2D Transformations, Transitions, 3D Transforms and WebFonts 같은 많은 새로운 기법과 확장 기능이 CSS3에 포함되었습니다.

여러분은 풍부한 UX를 별다른 코딩 없이 만들 수 있습니다. 그저 이미 존재하는 애플리케이션에 CSS 조각을 적용하면 됩니다.

새로 나온 문서

Try This!

CSS3 트랜스폼은 어떠한 DOM 엘리먼트의 회전, 확대/축소, 기울임, 이동을 간단한 형식으로 적용할 수 있도록 해줍니다.

pre {
transform: rotate(-1deg) skewX(5deg);
}

전환 효과는 DOM 엘리먼트에 변경 상태에 대한 애니메이션 스타일을 지정하도록 할 수 있습니다. 예를 들어, 사용자가 엘리먼트에 커서를 올렸을 때 배경색의 애니메이션을 수행할 수 있습니다. 이 코드에 커서를 올려보세요!

pre {
  transition: all 1s ease-inout;
}

pre:hover {
  background-color: #F2F5FE;
  border-color: black;
}

3D 트랜스폼을 적용하는 것 역시 간단합니다. 그저 3차원 좌표계에 대한 트랜스폼을 지정하면 끝입니다. 이 코드에 커서를 올려보세요!

div {
  transform: rotate3d(1,1,0, 45deg);
}

데모

Arcade Fire: The Wilderness Downtown
Snow Stack

적용 사례

Typekit - Webfonts
CSS3 Maker

참고자료