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

데스크탑 브라우저, iPhone, iPad 모바일 브라우저 등에 스타일시트를 구분하기 위한 미디어 쿼리(Media Queries)를 Andy Clarke씨가 정리했습니다. 속성으로 구분하는 방법과 파일로 구분하는 두가지 방법을 모두 포함합니다.

속성으로 구분하기

스마트폰 (가로/세로):

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

스마트폰 (가로):

@media only screen and (min-width : 321px) {
/* Styles */
}

스마트폰 (세로):

@media only screen and (max-width : 320px) {
/* Styles */
}

iPad (가로/세로):

@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

iPad (가로):

@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

iPad (세로):

@media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

데스크탑 브라우저 (가로):

@media only screen and (min-width : 1224px) {
/* Styles */
}

큰 모니터:

@media only screen and (min-width : 1824px) {
/* Styles */
}

iPhone4와 같은 높은 해상도:

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

파일로 구분하기

스마트폰 (가로/세로):

<link rel="stylesheet" href="smartphone.css"
  media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

스마트폰 (가로):

<link rel="stylesheet" href="smartphone-landscape.css"
  media="only screen and (min-width : 321px)">

스마트폰 (세로):

<link rel="stylesheet" href="smartphone-portrait.css" 
  media="only screen and (max-width : 320px)">

iPad (가로/세로):

<link rel="stylesheet" href="ipad.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

iPad (가로):

<link rel="stylesheet" href="ipad-landscape.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

iPad (세로):

<link rel="stylesheet" href="ipad-portrait.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

데스크탑 브라우저 (가로):

<link rel="stylesheet" href="widescreen.css"
  media="only screen and (min-width : 1224px)">

큰 모니터:

<link rel="stylesheet" href="widescreen.css"
  media="only screen and (min-width : 1824px)">

iPhone4와 같은 높은 해상도:

<link rel="stylesheet" href="iphone4.css"
  media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

Comments