Rev. 2.73

CSS3를 이용한 개발자들의 미친짓은 끊임없이 계속되는군요. Steve Dennis씨는 순수 CSS만을 이용하여 트위터의 용량 초과 화면인 트위터 실패 고래(?)를 만들어 냈습니다. 거기에 애니메이션까지 추가했군요. border-radius 속성으로 곡선을 표현하고, animation 속성을 이용하여 애니메이션을 만들었습니다. 현재 animation 속성은 webkit 엔진을 사용하는 브라우저인 사파리와 크롬에서만 작동합니다.

Comments

이 고양이 사진은 모서리가 둥글지 않습니다.

IE-CSS3border-radius, box-shadow, text-shadow 속성을 그대로 이어 받아 htc 스크립트를 이용하여 표현해 줍니다. IE의 VML API를 이용하여 CSS3의 비주얼 효과를 표현하는 방법을 사용하기 때문에 CSS3와 동등한 수준의 결과물을 표현합니다. 특히, 속성들을 재작성 할 필요가 없다는 것이 아주 매력적이네요. CSS3를 지원하지 않는 IE(인터넷 익스플로러)에서 트릭을 이용하여 표현하는 방법이 여러가지 있습니다만 그중에서도 가장 괜찮은 솔루션으로 생각됩니다.

.box {
  /* Firefox */
  -moz-border-radius: 15px;
  /* Safari and Chrome */
  -webkit-border-radius: 15px;
  /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
  border-radius: 15px;

  /* Firefox */
  -moz-box-shadow: 10px 10px 20px #000;
  /* Safari and Chrome */
  -webkit-box-shadow: 10px 10px 20px #000;
  /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
  box-shadow: 10px 10px 20px #000;

  /* This lets IE know to call the script on all elements which get the 'box' class */
  behavior: url(ie-css3.htc);
}

filter 속성을 어줍잖게 사용하는 것 보다 낫군요. 다른 CSS3 속성들도 표현 가능해 지기를 기대합니다.

Comments