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