Futur du-positionnement-css

Click here to load reader

  • date post

    05-Dec-2014
  • Category

    Documents

  • view

    2.407
  • download

    6

Embed Size (px)

description

 

Transcript of Futur du-positionnement-css

  • 1. Positionnement CSS : lavenir du futur13 novembre 2012Raphal GoetterCheerleader Alsacrations
  • 2. Futur antrieur CSS3 Multicolumns
  • 3. Multicolumns
  • 4. Multi-columns
  • 5. Multi-columns
  • 6. Distribution
  • 7. Listes ordonnes
  • 8. CSS Multi-columns
  • 9. Futur du subjonctif flexible box model grid layout model regions exclusions
  • 10. Flexbox
  • 11. Flex en action
  • 12. Lignes et Colonnes
  • 13. Reverse
  • 14. Fluidit
  • 15. Alignements
  • 16. Ordre daffichage
  • 17. CSS Flexbox
  • 18. Grid Layout
  • 19. CSS3 Grid LayoutReprsentation virtuelle composede lignes, de colonnes et de cellules.
  • 20. body { display: grid Et hop!} La Grille
  • 21. body { display: grid; grid-columns: 250px 1fr;} Colonnes
  • 22. body { display: grid; grid-columns: 250px 1fr;}nav { grid-column: 1;}section { grid-column: 2;} Colonnes
  • 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. body { correspond 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px display: grid; grid-columns: 10px (1fr 10px)[4];} Rptitions
  • 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. body { display: grid; Template grid-template: "hh" syntax "nc" "ff";}header { grid-cell: "h";}nav { grid-cell: "n";} Template
  • 27. section { grid-row-align: center;}article { grid-column-align: center;}aside { grid-row-align: center; grid-column-align: center;} Alignements
  • 28. body { body { display: grid; display: grid; grid-template: "abcd"; grid-template:} "a" "b" "c" "d"; } Adaptatif!
  • 29. CSS Grid Layout
  • 30. CSS regions
  • 31.

    Lorem Salu bissame! Wie gehts lessamis? Hans apporte moi une Wurschtsalad avec un piconbitte, sil te plat. []

    1)

    2)

    3)

    4)

    5)

    6)

  • 32.

    Lorem Salu bissame! Wie gehts lessamis? Hans apporte moi une Wurschtsalad avec un piconbitte, sil te plat. []

    1)

    2)

    3)

    4)

    5)

    6)

    #origin { flow-into: kiwi;}#layout p { flow-from: kiwi;}
  • 33. CSS regions
  • 34. CSS exclusions
  • 35. #exclusion {float:positionned; wrap-flow: auto}
  • 36. #exclusion {float:positionned; wrap-flow: both}
  • 37. #exclusion {float:positionned; shape-inside: circle} rectangle, circle, ellipse or polygon
  • 38. http://labs.adobe.com/downloads/cssregions.html Dmo!
  • 39. CSS evolution s n s d ? me table> ositio e abl k mn gri ions / S4fra t lu / C S < / p p lay bloc ultico b ox reg sions loa t dis ine- m flex lu f inl exc
  • 40. Crdits 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. Merci! Raphal Go