Futur du-positionnement-css

3,091 views
2,920 views

Published on

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,091
On SlideShare
0
From Embeds
0
Number of Embeds
314
Actions
Shares
0
Downloads
31
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Futur du-positionnement-css

  1. 1. Positionnement CSS : l’avenir du futur13 novembre 2012Raphaël GoetterCheerleader Alsacréations
  2. 2. Futur antérieur▪ CSS3 Multicolumns
  3. 3. Multicolumns
  4. 4. Multi-columns
  5. 5. Multi-columns
  6. 6. Distribution
  7. 7. Listes ordonnées
  8. 8. CSS Multi-columns
  9. 9. Futur du subjonctif▪ flexible box model▪ grid layout model▪ regions▪ exclusions
  10. 10. Flexbox
  11. 11. Flex en action
  12. 12. Lignes et Colonnes
  13. 13. Reverse
  14. 14. Fluidité
  15. 15. Alignements
  16. 16. Ordre daffichage
  17. 17. CSS Flexbox
  18. 18. Grid Layout
  19. 19. CSS3 Grid Layout« Représentation virtuelle composéede lignes, de colonnes et de cellules. »
  20. 20. body { display: grid Et hop !} La Grille
  21. 21. body { display: grid ; grid-columns: 250px 1fr;} Colonnes
  22. 22. body { display: grid ; grid-columns: 250px 1fr;}nav { grid-column: 1;}section { grid-column: 2;} Colonnes
  23. 23. body { display: grid ; grid-columns: 250px 1fr; grid-rows: 100px 300px;}nav { grid-column: 1; grid-row: 1;}article { grid-column: 1; grid-row: 2;}…
  24. 24. body { correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px display: grid ; grid-columns: 10px (1fr 10px)[4];}… Répétitions
  25. 25. body { display: grid; grid-columns: 250px 1fr; grid-rows: 100px 300px;}header { grid-column: 1; grid-row: 1; grid-column-span: 2;}… Distribution
  26. 26. body { display: grid; Template grid-template: "hh" syntax "nc" "ff";}header { grid-cell: "h";}nav { grid-cell: "n";}… Template
  27. 27. section { grid-row-align: center;}article { grid-column-align: center;}aside { grid-row-align: center; grid-column-align: center;} Alignements
  28. 28. body { body { display: grid; display: grid; grid-template: "abcd"; grid-template:} "a" "b" "c" "d"; } Adaptatif !
  29. 29. CSS Grid Layout
  30. 30. CSS regions
  31. 31. <div id="origin"><p>Lorem Salu bissame ! Wie gehts lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, sil te plaît. […]</p></div><div id="layout"> <p>1)</p> <p>2)</p> <img src="img.jpg" alt=""> <p>3)</p> <p>4)</p> <p>5)</p> <p>6)</p></div>
  32. 32. <div id="origin"><p>Lorem Salu bissame ! Wie gehts lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, sil te plaît. […]</p></div><div id="layout"> <p>1)</p> <p>2)</p> <img src="img.jpg" alt=""> <p>3)</p> <p>4)</p> <p>5)</p> <p>6)</p></div>#origin { flow-into: kiwi;}#layout p { flow-from: kiwi;}
  33. 33. CSS regions
  34. 34. CSS exclusions
  35. 35. #exclusion {float :positionned ; wrap-flow: auto}
  36. 36. #exclusion {float :positionned ; wrap-flow: both}
  37. 37. #exclusion {float :positionned ; shape-inside: circle} ‘rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’
  38. 38. ▪ http://labs.adobe.com/downloads/cssregions.html Démo !
  39. 39. CSS evolution s n s d ? me table> ositio e abl k mn gri ions / S4 fra t lu / C S < / p p lay bloc ultico b ox reg sions loa t dis ine- m flex lu f inl exc
  40. 40. Crédits photos▪ http://www.flickr.com/photos/41597157@N00/6919795175/▪ http://www.flickr.com/photos/8070463@N03/2484684062/▪ http://www.flickr.com/photos/7762644@N04/2220008689/▪ http://www.flickr.com/photos/please/131241808/▪ www.GdeFon.ru (CSS evolution)▪ http://www.flickr.com/photos/7900943@N06/3084329562/▪ http://www.toutsaufsarkozy.com
  41. 41. Merci ! Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter

×