Rev. 2.73

hero.png

Sencha에서 CSS3 애니메이션을 만들어주는 데스크탑용 애플리케이션인 Sencha Animator를 릴리즈했습니다. 플래시의 타임라인을 이용한 애니메이션 생성 인터페이스와 유사한 레이아웃으로 구성되었으며, 간단한 도형 및 문자를 추가할 수 있는 생성 도구가 포홤되어 있습니다. Mac OS X, Windows, Linux에 설치할 수 있고 완성된 프로젝트를 Export(내보내기)하면 html과 css파일을 생성해 줍니다. 현재 CSS3의 애니메이션 속성은 웹킷기반 브라우저에서만 작동하므로 사파리, 크롬, 안드로이드 및 iOS 등의 모바일 브라우저에 사용될 수 있습니다. 서드-파티 플러그인을 사용하지 않고 광고를 제작할 수 있다고 강하게 피력하고 있네요. 아래는 Sencha Animator를 이용해서 만들어진 광고 예제입니다.

CSS3

Comments

Hertz Click to reveal the answer

CSS3 Ad

Pay for standard.

Drive off in premium.

Get a free double upgrade
on Hertz weekend rentals.

Plus your regular
AAA discount.

Book Now

  

AAA Members:
Free double upgrade
on Hertz rentals

Flash Ad

HSBC Click to reveal the answer

CSS3 Ad

HSBCBusiness
HSBC
The world's local bank
 
 
Can your business be a local business all around the world?
With offices in over 60 countries we can help navigate local laws, customs and risks.
Learn more>>

Flash Ad

Buick LaCrosse Click to reveal the answer

Flash Ad

CSS3 Ad

We're so confident
 in the 2010 LaCrosse
We don't have to
 say another word about it.

"The LaCrosse just may be proof that Buick's best
days are yet to come...simply stunning on the inside..." CarandDriver.com, July 2009

"Buick sees Lexus on most counts
and raises on others." Motor Trend

"2010 Buick LaCrosse CXS...
Easily the best Buick sedan in a long time."
CarandDriver.com, July 2009

"LaCrosse could be a game-changer for Buick."
Pittsburgh Post-Gazette

More Reactions On Twitter

위 화면은 sencha.com의 Arne Bech씨가 플래시로 만든 간단한 애니메이션 광고를 CSS3로 재현한 것입니다. 어느쪽이 CSS이고 플래시일까요? 이 것은 animation CSS속성을 지원하는 웹킷 계열 브라우저(사파리, 크롬)에서 정상적으로 작동합니다. 얼핏 보기에는 구별해내기가 쉽지 않군요. 해답은 "Click to reveal the answer"를 클릭하여 확인 할 수 있습니다.

Comments

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