Approfondissement CSS3
Upcoming SlideShare
Loading in...5
×
 

Approfondissement CSS3

on

  • 2,855 views

Mon second workshop à propos de CSS3. ...

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

Statistics

Views

Total Views
2,855
Views on SlideShare
2,704
Embed Views
151

Actions

Likes
2
Downloads
36
Comments
0

9 Embeds 151

http://blog.fgribreau.com 98
http://blog.geekfg.net 29
http://www.slideshare.net 9
https://www.linkedin.com 7
http://www.linkedin.com 4
http://projets.local 1
http://feeds2.feedburner.com 1
http://translate.googleusercontent.com 1
http://www.doyoubuzz.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Approfondissement CSS3 Approfondissement CSS3 Presentation Transcript

  • 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)
  • 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;
  • 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{ 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>
  • <animation>
  • #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: infinite; } http://bit.ly/a5PMFH
  • #clouds { -webkit- animation-name: animClouds; -webkit- animation-duration: 70s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } 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 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } http://bit.ly/a5PMFH
  • ? #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } http://bit.ly/a5PMFH
  • ? #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; }
  • ? #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } 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: infinite; } http://bit.ly/a5PMFH
  • #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } #hill2 { -webkit- animation: animHill2 25s linear 0s infinite; } 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 infinite; }
  • </animation>
  • <transition>
  • Transition CSS3 <p>Hello  world</p>
  • Transition CSS3 <p>Hello  world</p> Hello world p{ color:  #00FF00; }
  • Transition CSS3 <p>Hello  world</p> Hello world Hello world p{ p:hover{ color:  #00FF00; color:  #0000FF; } }
  • Transition CSS3 <p>Hello  world</p> 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 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
  • 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
  • http://bit.ly/a5PMFH
  • http://bit.ly/a5PMFH
  • http://bit.ly/a5PMFH
  • http://bit.ly/a5PMFH
  • 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/