Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Approfondissement CSS3

2,419 views

Published on

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

Published in: Technology
  • Be the first to comment

Approfondissement CSS3

  1. 1. Welcome ! Le zip est disponible ici: http://bit.ly/cqp7EX Le code est disponible ici: http://bit.ly/a5PMFH
  2. 2. fgribreau.com
  3. 3. <CSS3>
  4. 4. ... lors de la dernière conférence
  5. 5. Ce que nous avions vu -border-radius -box-shadow text-shadow http://projets.geekfg.net/?/9
  6. 6. Le sujet de ce soir...
  7. 7. Un div = un calque = une image animée
  8. 8. Côté HTML
  9. 9. 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();
  10. 10. 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'});
  11. 11. Javascript ? jQuery ? (Flash ? ... lol)
  12. 12. Javascript ? jQuery ? (Flash ? ... lol)
  13. 13. Javascript ? jQuery ? (Flash ? ... lol) FTW CSS3 style !
  14. 14. Eléments à animer en CSS3 Les nuages (#clouds) Colline 2 (#hill2) Logo (#logo) Colline 1 (#hill1)
  15. 15. Animation des nuages #clouds
  16. 16. Les nuages background-­‐position:  0px  102px;
  17. 17. Les nuages background-­‐position:  0px  102px; background-­‐position:  -­‐1068px  102px;
  18. 18. Les nuages background-­‐position:  0px  102px; background-­‐position:  -­‐1068px  102px;
  19. 19. <keyframes>
  20. 20. keyframe : type d’animation mémorisant des positions fixes et qui calculera ensuite les emplacements intermédiaires.
  21. 21. Les keyframes en CSS3 @keyframes  nomAnimation{ 0%        {propriété:  valeur;} 100%    {propriété:  valeur;} } http://bit.ly/a5PMFH
  22. 22. Les keyframes en CSS3 = @keyframes  nomAnimation{ from 0%        {propriété:  valeur;} to 100%    {propriété:  valeur;} } http://bit.ly/a5PMFH
  23. 23. 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
  24. 24. 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
  25. 25. Keyframes CSS3 @-­‐webkit-­‐keyframes 4+
  26. 26. </keyframes>
  27. 27. <animation>
  28. 28. #clouds { animation-name: animClouds; } http://bit.ly/a5PMFH
  29. 29. #clouds { animation-name: animClouds; animation-duration: 70s; } http://bit.ly/a5PMFH
  30. 30. #clouds { animation-name: animClouds; animation-duration: 70s; animation-timing-function: linear; } http://bit.ly/a5PMFH
  31. 31. #clouds { animation-name: animClouds; animation-duration: 70s; animation-timing-function: linear; animation-iteration-count: infinite; } http://bit.ly/a5PMFH
  32. 32. #clouds { -webkit- animation-name: animClouds; -webkit- animation-duration: 70s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } http://bit.ly/a5PMFH
  33. 33. 6 lignes de CSS3 pour l’animation des nuages
  34. 34. Animation de la colline n°2 #hill2
  35. 35. Colline n°2 background-­‐position:  0px  258px;
  36. 36. Colline n°2 background-­‐position:  0px  258px; background-­‐position:  -­‐1110px  258px;
  37. 37. Colline n°2 background-­‐position:  0px  258px; background-­‐position:  -­‐1110px  258px;
  38. 38. @-­‐webkit-­‐keyframes  animHill2{                0%        {background-­‐position:  0px  258px;  }                100%    {background-­‐position:  -­‐1110px  258px;  } } http://bit.ly/a5PMFH
  39. 39. #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } http://bit.ly/a5PMFH
  40. 40. ? #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } http://bit.ly/a5PMFH
  41. 41. ? #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; }
  42. 42. ? #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>] ]*
  43. 43. #hill2 { -webkit- animation-name: animHill2; -webkit- animation-duration: 25s; -webkit- animation-timing-function: linear; -webkit- animation-iteration-count: infinite; } http://bit.ly/a5PMFH
  44. 44. #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
  45. 45. Animation CSS3 4+ ? -­‐webkit-­‐animation 4+
  46. 46. Animation de la colline n°1 #hill1
  47. 47. @-­‐webkit-­‐keyframes  animHill1{                0%        {background-­‐position:  0px  104px;  }                100%    {background-­‐position:  -­‐2220px  104px;  } }
  48. 48. @-­‐webkit-­‐keyframes  animHill1{                0%        {background-­‐position:  0px  104px;  }                100%    {background-­‐position:  -­‐2220px  104px;  } } #hill1 { animation: animHill1 25s linear 2s infinite; }
  49. 49. </animation>
  50. 50. <transition>
  51. 51. Transition CSS3 <p>Hello  world</p>
  52. 52. Transition CSS3 <p>Hello  world</p> Hello world p{ color:  #00FF00; }
  53. 53. Transition CSS3 <p>Hello  world</p> Hello world Hello world p{ p:hover{ color:  #00FF00; color:  #0000FF; } }
  54. 54. Transition CSS3 <p>Hello  world</p> Hello world transition css3 Hello world p{ p:hover{ color:  #00FF00; color:  #0000FF; } }
  55. 55. 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>]]*
  56. 56. Hello world transition css3 Hello world p{ p:hover{ color:  #00FF00; color:  #0000FF; } }
  57. 57. Hello world transition css3 Hello world p{ p:hover{ color:  #00FF00; color:  #0000FF; } } -webkit- transition:color 500ms ease-in 1s;
  58. 58. Hello world transition css3 Hello world p{ p:hover{ color:  #00FF00; color:  #0000FF; } } -webkit- transition:color 500ms ease-in 1s;
  59. 59. Hello world Hello world p{ p:hover{ color:  #00FF00; color:  #0000FF; } }
  60. 60. Hello world transition css3 Hello world p{ p:hover{ color:  #00FF00; color:  #0000FF; } }
  61. 61. Transitions CSS3
  62. 62. Transitions CSS3
  63. 63. Transitions CSS3 -­‐moz-­‐transition 3.7+ -­‐o-­‐transition 10.5+ -­‐webkit-­‐transition 4+
  64. 64. </transition>
  65. 65. <box-­‐sizing>
  66. 66. Box-sizing CSS3 .monDiv{ .monDiv   width:100px; } 100px Facile...
  67. 67. Box-sizing CSS3 .monDiv{ width:100px; .monDiv padding:5px; } 100px 110px Facile...
  68. 68. Box-sizing CSS3 .monDiv{ width:100px; .monDiv padding:10px; border-­‐width:20px; } 100px 120px 160px Gênant...
  69. 69. Solution ? please :’(
  70. 70. 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
  71. 71. Box-sizing CSS3 box-­‐sizing 8+ -­‐moz-­‐box-­‐sizing 1+ box-­‐sizing 7+ -­‐webkit-­‐box-­‐sizing 3+
  72. 72. </box-­‐sizing>
  73. 73. <rgba>
  74. 74. RGBA CSS3 .monDiv{   background-­‐color:rgb(0,  130,  229); } R V B .monDiv
  75. 75. RGBA CSS3 .monDiv{   background-­‐color:rgba(0,  130,  229,  0.8); } R V B Alpha .monDiv
  76. 76. RGBA CSS3 rgba 2+ rgba 10+ rgba 3.1+
  77. 77. </rgba>
  78. 78. Animation du Logo #logo
  79. 79. Nous allons voir besoin de :
  80. 80. Nous allons voir besoin de : Transition CSS3
  81. 81. Nous allons voir besoin de : Transition CSS3 RGBA
  82. 82. Nous allons voir besoin de : Transition CSS3 RGBA Box-sizing
  83. 83. http://bit.ly/a5PMFH
  84. 84. http://bit.ly/a5PMFH
  85. 85. http://bit.ly/a5PMFH
  86. 86. http://bit.ly/a5PMFH
  87. 87. http://bit.ly/a5PMFH
  88. 88. http://bit.ly/a5PMFH
  89. 89. Et voila !
  90. 90. http://projets.geekfg.net/?/10 http://projets.geekfg.net/?/11
  91. 91. One more thing... http://projets.geekfg.net/?/10 http://projets.geekfg.net/?/11
  92. 92. </CSS3>
  93. 93. Ne vous arrêtez pas à cet exposé ! (please!)
  94. 94. Ne vous arrêtez pas à cet exposé ! (please!) http://fgribreau.com
  95. 95. Ne vous arrêtez pas à cet exposé ! (please!) http://fgribreau.com http://blog.geekfg.net/

×