Approfondissement CSS3
104
-
Upload
francois-guillaume-ribreau -
Category
Technology
-
view
1.907 -
download
3
description
Mon second workshop à propos de CSS3. Veille HTML5/CSS3 sur Twitter: @FGRibreau N'hésitez pas à me faire parvenir vos corrections et suggestions :) Démonstrations (Safari/Chrome seulement): http://projets.geekfg.net/?/10 http://projets.geekfg.net/?/11
Transcript of Approfondissement CSS3
Welcome !
http://bit.ly/a5PMFHLe code est disponible ici:
Le zip est disponible ici: http://bit.ly/cqp7EX
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
(function($) { window.app = { init: function() { $('#bird') .sprite({fps: 9, no_of_frames: 3}) .activeOnClick() .active(); $('#bird2') .sprite({fps: 12, no_of_frames: 3}) .activeOnClick();
$('html').flyToTap(); if (window.Touch || document.location.hash.indexOf('iphone') > -‐1) { // iPhone/iPad $('body').addClass('platform-‐iphone'); // bird constraint is slightly smaller $('#bird').spRandom({top: -‐10, left: -‐10, right: 150, bottom: 100, speed: 3500, pause: 5000}); $('#bird2').spRandom({top: 70, left: 100, right: 200, bottom: 340, speed: 4000, pause: 3000}); if (document.location.hash.indexOf('iphone') > -‐1) { $('body').addClass('platform-‐iphone'); } } else { // non-‐iPhone // bird constraint is slightly wider var stage_left = (($('body').width() -‐ 866) / 2); var stage_top = 30; $('#bird').spRandom({top: stage_top -‐ 20, left: stage_left -‐ 20, right: 400, bottom: 140, speed: 3500, pause: 5000}); $('#bird2').spRandom({top: stage_top + 70, left: stage_left + 100, right: 200, bottom: 340, speed: 4000, pause: 3000}); } },
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'});
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)
Javascript ? jQuery ? (Flash ? ... lol)
FTW
C S S 3 s t y l e !
Les nuages (#clouds)
Eléments à animer en CSS3
Colline 2 (#hill2)
Colline 1 (#hill1)
Logo (#logo)
Animation des nuages #clouds
Les nuages
background-‐position: 0px 102px;
Les nuages
background-‐position: 0px 102px;
background-‐position: -‐1068px 102px;
Les nuages
background-‐position: 0px 102px;
background-‐position: -‐1068px 102px;
<keyframes>
keyframe : type d’animation mémorisant des positions fixes 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{0% {propriété: valeur;}100% {propriété: valeur;}
}=from
to
http://bit.ly/a5PMFH
Les keyframes en CSS3
@keyframes nomAnimation{0% {propriété: valeur;}100% {propriété: valeur;}
}
@keyframes animClouds{ 0% {background-‐position: 0px 102px; } 100% {background-‐position: -‐1068px 102px; }}
=fromto
http://bit.ly/a5PMFH
Les keyframes en CSS3
@keyframes nomAnimation{0% {propriété: valeur;}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; }}
=fromto
http://bit.ly/a5PMFH
4+
@-‐webkit-‐keyframes
Keyframes CSS3
</keyframes>
<animation>
#clouds {
}
animation-name: animClouds;
http://bit.ly/a5PMFH
#clouds {
}
animation-duration: 70s; animation-name: animClouds;
http://bit.ly/a5PMFH
#clouds {
}
animation-timing-function: linear;animation-duration: 70s; animation-name: animClouds;
http://bit.ly/a5PMFH
#clouds {
}
animation-timing-function: linear;animation-duration: 70s; animation-name: animClouds;
animation-iteration-count: infinite;
http://bit.ly/a5PMFH
#clouds {
}
animation-timing-function: linear;animation-duration: 70s; animation-name: animClouds;
animation-iteration-count: infinite;
-webkit--webkit--webkit--webkit-
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;
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 {
}
animation-timing-function: linear;
animation-duration: 25s;
animation-name: animHill2;
animation-iteration-count: infinite;
-webkit-
-webkit-
-webkit-
-webkit-
http://bit.ly/a5PMFH
#hill2 {
}
animation-timing-function: linear;
animation-duration: 25s;
animation-name: animHill2;
animation-iteration-count: infinite;
-webkit-
-webkit-
-webkit-
-webkit- ?http://bit.ly/a5PMFH
#hill2 {
}
animation-timing-function: linear;
animation-duration: 25s;
animation-name: animHill2;
animation-iteration-count: infinite;
-webkit-
-webkit-
-webkit-
-webkit- ?
#hill2 {
}
animation-timing-function: linear;
animation-duration: 25s;
animation-name: animHill2;
animation-iteration-count: infinite;
-webkit-
-webkit-
-webkit-
-webkit- ?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 {
}
animation-timing-function: linear;
animation-duration: 25s;
animation-name: animHill2;
animation-iteration-count: infinite;
-webkit-
-webkit-
-webkit-
-webkit-
http://bit.ly/a5PMFH
#hill2 {
}
animation-timing-function: linear;
animation-duration: 25s;
animation-name: animHill2;
animation-iteration-count: infinite;
-webkit-
-webkit-
-webkit-
-webkit-
-webkit-#hill2 {
}animation: animHill2 25s linear 0s infinite;
http://bit.ly/a5PMFH
4+
-‐webkit-‐animation
Animation CSS3
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 infinite;
</animation>
<transition>
<p>Hello world</p>
Transition CSS3
Hello world
<p>Hello world</p>
p{color: #00FF00;
}
Transition CSS3
Hello world Hello world
<p>Hello world</p>
p{color: #00FF00;
}
p:hover{color: #0000FF;
}
Transition CSS3
Hello world Hello world
<p>Hello world</p>
p{color: #00FF00;
}
p:hover{color: #0000FF;
}
Transition CSS3
transition css3
p{color: #00FF00;
}
p:hover{color: #0000FF;
}
Hello world Hello worldtransition css3
transition: [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> [, [<transition-property> || <transition-
duration> || <transition-timing-function> || <transition-delay>]]*
p{color: #00FF00;
}
p:hover{color: #0000FF;
}
Hello world Hello worldtransition css3
transition:color 500ms ease-in 1s;
p{color: #00FF00;
}
p:hover{color: #0000FF;
}
Hello world Hello worldtransition css3
-webkit-
transition:color 500ms ease-in 1s;
p{color: #00FF00;
}
p:hover{color: #0000FF;
}
Hello world Hello world
-webkit-
transition css3
p{color: #00FF00;
}
p:hover{color: #0000FF;
}
Hello world Hello world
p{color: #00FF00;
}
p:hover{color: #0000FF;
}
Hello world Hello worldtransition css3
Transitions CSS3
Transitions CSS3
3.7+
10.5+
4+
-‐moz-‐transition
-‐o-‐transition
-‐webkit-‐transition
Transitions CSS3
</transition>
<box-‐sizing>
.monDiv
100px
.monDiv{ width:100px;}
Facile...
Box-sizing CSS3
100px
.monDiv{width:100px;padding:5px;
}
.monDiv
110px
Facile...
Box-sizing CSS3
100px
.monDiv{width:100px;padding:10px;border-‐width:20px;
}
.monDiv
120px
Gênant...
160px
Box-sizing CSS3
Solution ? please :’(
100px
.monDiv
120px
160px
Sans<=> (Box-‐sizing: content-‐box)
Avec Box-‐sizing: border-‐box
Box-sizing CSS3.monDiv{width:100px; padding:10px; border-‐width:20px;}
.monDiv
60px
80px
100px
8+
1+
7+
3+
-‐moz-‐box-‐sizing
box-‐sizing
-‐webkit-‐box-‐sizing
box-‐sizing
Box-sizing CSS3
</box-‐sizing>
<rgba>
.monDiv
.monDiv{ background-‐color:rgb(0, 130, 229);}
RGBA CSS3
R V B
.monDiv
.monDiv{ background-‐color:rgba(0, 130, 229, 0.8);}
RGBA CSS3
R V B Alpha
2+
10+
3.1+
rgba
rgba
rgba
RGBA CSS3
</rgba>
Animation du Logo #logo
Nous allons voir besoin de :
Transition CSS3
Nous allons voir besoin de :
Transition CSS3
RGBA
Nous allons voir besoin de :
Transition CSS3
Box-sizing
RGBA
Nous allons voir besoin de :
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.comhttp://blog.geekfg.net/
