Rev. 2.73

mocha.gif

MooTools에 기반하는 Mocha UI는 Canvas태그 그래픽을 이용해 생성되는 유저 인터페이스 클래스 입니다. CSS, HTML과 절묘하게 혼합되어 생성되는 잘생긴 윈도를 사용할 수 있게 합니다. Canvas태그를 지원하지 않는 IE에서는 ExplorerCanvas 라이브러리를 사용하여 VML로 변환하고 있습니다. 이미지를 전혀 사용하지 않으며, 코너의 둥글기를 실시간으로 조정할 수 있고, 윈도의 활성화, 잡아끌기, 크기조절 등이 가능합니다. 앞으로는 IE가 Canvas태그를 지원하는 일만 남았습니다. :)

Comments

girl.jpg

Instant는 canvas 태그를 이용하여 이미지에 폴라로이드(Polaroid™) 효과를 부여하는 재미있는 자바스크립트 그래픽 라이브러리이다. instant.js를 인클루드하고 해당 이미지 태그의 클래스 애트리뷰트에 "instant"를 작성하는 것만으로 폴라로이드 이미지 효과를 부여할 수 있다. 아래의 코드처럼 커스터마이즈도 가능하다. 인터넷 익스플로러는 canvas태그를 지원하지 않기 때문에 사용할 수 없지만 향후 VML을 통하여 에뮬레이션 할 예정이라고 한다.

<script type="text/javascript" src="/javascripts/instant.js"></script>
<img src="/image/image.jpg" class="instant itiltleft icolor000000 ishadow50" alt="image" />

Comments

Canvas 태그가 지원되지 않는 익스플로러에서도 canvas 태그를 사용할 수 있도록 만들어 주는 자바스크립트 라이브러리인 ExplorerCanvas의 새버전이 나왔습니다. 종전에 소개했을 때에는 몰랐는데 Copyright를 보니 Google에서 만든 것으로 보입니다. Apache v2.0 라이센스를 따르고 있군요. 픽셀 렌더링 지원하고, 그동안 고질적인 이슈였던 물체가 캔버스 영역을 벗어나던 버그를 수정하였습니다. 이밖에도 여러 기능 추가/개선/수정이 있습니다. 다운로드는 소스포지에서 하세요. Ajaxian.com의 Dion Almaer씨는 이 라이브러리를 사용해서 야후! 파이프 같은 서비스가 가능하다고까지 하시네요(;)

참고로, 지난 2월에 퍼와서 돌려 보았던 데모에서 여러모로 발전한 모습을 볼 수 있습니다.

Comments