반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 CSS3 Animation and Adobe Dreamweaver

2012. 1. 29. 10:47 | Posted by 솔웅


In HTML5, Actually in CSS3, you can use animation effects with out Javascript.
Use -webkit-animation .. that's all. Too simple to make Animation effects.
Unfortunately it is working on Google Chrome and Safari browsers only.

오늘 소개해 드릴 기능은 CSS3의 animation 기능입니다.
복잡하게 자바 스크립트를 사용하지 않아도 간단하게 CSS3의 webkit 을 사용해서 애니메이션 효과를 내실 수 있습니다.



CSS

Animations

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

*Please make a better use of it. We don't want a new blink tag ;)

Pulse!


You can check it out with only Google Chrome and Apple Safari.
이 기능은 아래 O표한 브라우저들에서 작동합니다.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Not working (X)

Download below source code.
아래 소스코드 파일을 받으실 수 있습니다.



Hey guys I'd like to introduce Adobe DreamWeaver CS5 for Phone,Tablet and  PC.
Adobe DreamWeaver CS5 support 3 kine of preview screen for Phone, Tablet and PC. So you can develop web site for those 3 devices at once.
And it support hints of CSS3 functions to make easy development.
As You know HTML5,CSS3 is not Standard Skill Yet so each browsers has some of their own CSS function.
Adobe Dreamweaver provide all of the functions.

아래 하나만 더 소개 할 께요.
요즘은 홈페이지를 볼 수 있는 장치들이 컴퓨터 뿐만 아나라 전화기 그리고 태블릿에서도 볼 수가 있습니다.
그래서 앞으로는 이 3가지 장치들에서 모두 볼 수 있도록 디자인된 웹페이지를 만들어야 합니다.
어도비의 드림위버 CS5에서 이것을 지원하는 기능을 소개하고 있네요.
또 아직 표준으로 확립되지 않은 각 브라우저들만의 여러 CSS3 기능들도 코딩시 hints로 지원하고 있구요.


Click here to see more details.
여기를 클릭 하시면 좀 더 자세한 내용을 보실 수 있습니다.

반응형

Comment

이전 1 2 3 4 5 6 7 8 9 ··· 41 다음