Futur du-positionnement-css

3 582 vues

Publié le

0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 582
Sur SlideShare
0
Issues des intégrations
0
Intégrations
329
Actions
Partages
0
Téléchargements
34
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×