Approfondissement CSS3

2,386 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,386
On SlideShare
0
From Embeds
0
Number of Embeds
166
Actions
Shares
0
Downloads
39
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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/

×