Rev. 2.73

findmebyip.png

FindMeByIP.com에서는 CSS3의 주요 속성과 선택자, HTML5의 요소와 속성 그리고 웹앱을 위한 특징들 등에 대하여 주요한 OS, 브라우저들을 대상으로 지원여부를 한눈에 확인할 수 있는 호환성 테이블을 제공합니다. OS는 윈도와 맥으로 구분되었고, 브라우저는 Chrome4, Firefox3/3.6, Opara10/10.5, Safari4, IE6/7/8로 구분되어 있습니다. IE6/7/8은 되는게 거의 없네요.

Comments

normals.jpg

Jonas Wagner씨는 <canvas>요소와 자바스크립트를 이용하여 노멀 매핑(Normal mapping)퐁 쉐이딩(phong shading) 효과를 동적으로 구현했습니다. 2차원적인 이미지에 빛의 반사와 그림자가 입체적으로 생성되는 효과를 만들어낸 것입니다. 이것은 두 장의 자료형 이미지를 사용하여 복잡한 산술연산을 거쳐 만들어진 결과입니다. 마우스 커서가 광원의 중심이 되며 빛의 위치에 따라 이미지가 입체적으로 생성되는 모습을 확인할 수 있습니다. WebGL 3D 엔진인 CopperLicht와 결합되면 대박이겠는데요!

Comments

Font size
Display options

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! .


David Desandro씨는 CSS를 이용하여 CURTIS라는 이름의 글꼴을 만들었습니다. 한 문자를 구성하기 위해 아래와 같은 마크업이 사용되며 서너개의 <span>요소들로 알파벳 문자 하나가 만들어집니다. 그리고 이 글꼴은 Creative Commons Attribution 라이센스에 따라 사용할 수 있습니다. Liveposter라는 서비스에 이 CSS 골꼴이 사용되고 있군요. 미친짓이라는 것에 공감하지만 한편으로는 웹 폰트를 로드하거나 이미지를 사용하는 것보다 낫겠다는 생각도 드네요.

<span class="css_char r">
  R
  <span class="inside split_vert"></span>
  <span class="outside split_vert"></span>
  <span class="stroke"></span>
  <span class="fill"></span>
</span>

Comments