Approfondissement CSS3

Welcome ! Le zip est disponible ici: http://bit.ly/cqp7EX Le code est disponible ici: http://bit.ly/a5PMFH

fgribreau.com

<CSS3>

... lors de la dernière conférence

Ce que nous avions vu -border-radius -box-shadow text-shadow http://projets.geekfg.net/?/9

Le sujet de ce soir...

Un div = un calque = une image animée

Côté HTML

Côté HTML Côté jQuery (javascript) (function($) { window.app = { init: function() { $('#bird') .sprite({fps: 9, no_of_frames: 3}) .activeOnClick() .active(); $('#bird2') .sprite({fps: 12, no_of_frames: 3}) .activeOnClick(); $('#clouds').pan({fps: 30, speed: 0.7, dir: 'left'}); $('#hill2').pan({fps: 30, speed: 2, dir: 'left'}); $('#hill1').pan({fps: 30, speed: 3, dir: 'left'}); $('html').flyToTap();

Côté HTML Côté jQuery (javascript) $('#clouds').pan({fps: 30, speed: 0.7, dir: 'left'}); $('#hill2').pan({fps: 30, speed: 2, dir: 'left'}); $('#hill1').pan({fps: 30, speed: 3, dir: 'left'});

Javascript ? jQuery ? (Flash ? ... lol)

Javascript ? jQuery ? (Flash ? ... lol) FTW CSS3 style !

Eléments à animer en CSS3 Les nuages (#clouds) Colline 2 (#hill2) Logo (#logo) Colline 1 (#hill1)

Animation des nuages #clouds

Les nuages background-‐position: 0px 102px;

Les nuages background-‐position: 0px 102px; background-‐position: -‐1068px 102px;

keyframe : type d’animation mémorisant des positions ﬁxes et qui calculera ensuite les emplacements intermédiaires.

Les keyframes en CSS3 @keyframes nomAnimation{ 0% {propriété: valeur;} 100% {propriété: valeur;} } http://bit.ly/a5PMFH

Les keyframes en CSS3 = @keyframes nomAnimation{ from 0% {propriété: valeur;} to 100% {propriété: valeur;} } http://bit.ly/a5PMFH

Les keyframes en CSS3 = @keyframes nomAnimation{ from 0% {propriété: valeur;} to 100% {propriété: valeur;} } @keyframes animClouds{ 0% {background-‐position: 0px 102px; } 100% {background-‐position: -‐1068px 102px; } } http://bit.ly/a5PMFH

Les keyframes en CSS3 = @keyframes nomAnimation{ from 0% {propriété: valeur;} to 100% {propriété: valeur;} } @keyframes animClouds{ 0% {background-‐position: 0px 102px; } 100% {background-‐position: -‐1068px 102px; } } @-‐webkit-‐keyframes animClouds{ 0% {background-‐position: 0px 102px; } 100% {background-‐position: -‐1068px 102px; } } http://bit.ly/a5PMFH

Keyframes CSS3 @-‐webkit-‐keyframes 4+

</keyframes>

#clouds { animation-name: animClouds; } http://bit.ly/a5PMFH

#clouds { animation-name: animClouds; animation-duration: 70s; } http://bit.ly/a5PMFH

#clouds { animation-name: animClouds; animation-duration: 70s; animation-timing-function: linear; } http://bit.ly/a5PMFH

#clouds { animation-name: animClouds; animation-duration: 70s; animation-timing-function: linear; animation-iteration-count: inﬁnite; } http://bit.ly/a5PMFH

#clouds { -webkit- animation-name: animClouds; -webkit- animation-duration: 70s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: inﬁnite; } http://bit.ly/a5PMFH

6 lignes de CSS3 pour l’animation des nuages

Animation de la colline n°2 #hill2

Colline n°2 background-‐position: 0px 258px;

Colline n°2 background-‐position: 0px 258px; background-‐position: -‐1110px 258px;

@-‐webkit-‐keyframes animHill2{ 0% {background-‐position: 0px 258px; } 100% {background-‐position: -‐1110px 258px; } } http://bit.ly/a5PMFH

#hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: inﬁnite; } http://bit.ly/a5PMFH

? #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: inﬁnite; } http://bit.ly/a5PMFH

? #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: inﬁnite; }

? #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: inﬁnite; } animation: [<animation-name> || <animation-duration> || <animation- timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

#hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: inﬁnite; } http://bit.ly/a5PMFH

#hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: inﬁnite; } #hill2 { -webkit- animation: animHill2 25s linear 0s inﬁnite; } http://bit.ly/a5PMFH

Animation CSS3 4+ ? -‐webkit-‐animation 4+

Animation de la colline n°1 #hill1

@-‐webkit-‐keyframes animHill1{ 0% {background-‐position: 0px 104px; } 100% {background-‐position: -‐2220px 104px; } }

@-‐webkit-‐keyframes animHill1{ 0% {background-‐position: 0px 104px; } 100% {background-‐position: -‐2220px 104px; } } #hill1 { animation: animHill1 25s linear 2s inﬁnite; }

</animation>

Transition CSS3 Hello world

Transition CSS3 Hello world Hello world p{ color: #00FF00; }

Transition CSS3 Hello world Hello world Hello world p{ p:hover{ color: #00FF00; color: #0000FF; } }

Transition CSS3 Hello world Hello world transition css3 Hello world p{ p:hover{ color: #00FF00; color: #0000FF; } }

Hello world transition css3 Hello world p{ p:hover{ color: #00FF00; color: #0000FF; } } transition: [<transition-property> || <transition- duration> || <transition-timing-function> || <transition-delay> [, [<transition-property> || <transition- duration> || <transition-timing-function> || <transition-delay>]]*

Hello world transition css3 Hello world p{ p:hover{ color: #00FF00; color: #0000FF; } }

Hello world transition css3 Hello world p{ p:hover{ color: #00FF00; color: #0000FF; } } -webkit- transition:color 500ms ease-in 1s;

Hello world Hello world p{ p:hover{ color: #00FF00; color: #0000FF; } }

Hello world transition css3 Hello world p{ p:hover{ color: #00FF00; color: #0000FF; } }

Transitions CSS3

Transitions CSS3 -‐moz-‐transition 3.7+ -‐o-‐transition 10.5+ -‐webkit-‐transition 4+

</transition>

<box-‐sizing>

Box-sizing CSS3 .monDiv{ .monDiv width:100px; } 100px Facile...

Box-sizing CSS3 .monDiv{ width:100px; .monDiv padding:5px; } 100px 110px Facile...

Box-sizing CSS3 .monDiv{ width:100px; .monDiv padding:10px; border-‐width:20px; } 100px 120px 160px Gênant...

Solution ? please :’(

Box-sizing CSS3 .monDiv{width:100px; padding:10px; border-‐width:20px;} Sans Avec <=> (Box-‐sizing: content-‐box) Box-‐sizing: border-‐box .monDiv .monDiv 100px 60px 120px 80px 160px 100px

Box-sizing CSS3 box-‐sizing 8+ -‐moz-‐box-‐sizing 1+ box-‐sizing 7+ -‐webkit-‐box-‐sizing 3+

</box-‐sizing>

<rgba>

RGBA CSS3 .monDiv{ background-‐color:rgb(0, 130, 229); } R V B .monDiv

RGBA CSS3 .monDiv{ background-‐color:rgba(0, 130, 229, 0.8); } R V B Alpha .monDiv

RGBA CSS3 rgba 2+ rgba 10+ rgba 3.1+

</rgba>

Animation du Logo #logo

Nous allons voir besoin de :

Nous allons voir besoin de : Transition CSS3

Nous allons voir besoin de : Transition CSS3 RGBA

Nous allons voir besoin de : Transition CSS3 RGBA Box-sizing

http://bit.ly/a5PMFH

Et voila !

http://projets.geekfg.net/?/10 http://projets.geekfg.net/?/11

One more thing... http://projets.geekfg.net/?/10 http://projets.geekfg.net/?/11

</CSS3>

Ne vous arrêtez pas à cet exposé ! (please!)

Ne vous arrêtez pas à cet exposé ! (please!) http://fgribreau.com

Ne vous arrêtez pas à cet exposé ! (please!) http://fgribreau.com http://blog.geekfg.net/

http://blog.fgribreau.com	55
http://blog.geekfg.net	29
http://www.slideshare.net	9
http://projets.local	1
http://feeds2.feedburner.com	1
http://translate.googleusercontent.com	1

Approfondissement CSS3

by Francois-G Ribreau on Mar 24, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 96

Statistics

Approfondissement CSS3 — Presentation Transcript