Partindo do ontem com layouts em tabelas e passando pelo hoje com o box model, iremos explorar as limitações dessas abordagens para entender o que as novas técnicas do depois – flexbox, grids, regions e exclusions – vêm a solucionar.

1. css layout
O ONTEM, O HOJE E O DEPOIS
@LOOPINFINITO

2. @CAIO_GONDIM @ALMIRFILHO

3. GLOBO.COM

4. LOOPINFINITO.COM.BR

5. tabelas
O ONTEM

6. • 1990
html 1.0
• estrutura de documento
• layout com <pre>

7. bells and whistles
“Storage of ASCII text, and
display on 24x80 screens, is in the
short term sufficient, and
essential. Addition of graphics
would be an optional extra with
very much less penetration for
the moment.”
Tim Berners-Lee

8. primeiro site ever

9. • 1993
html 2.0
• <img>
• padrao IETF

10. • 1995
html 3.0
• <table>
• nunca foi aprovado
• text flow ao redor de <img>
• elementos matematicos

11. • 1997
html 3.2
• <table border=’0’>
•nasce o web designer

12. html 3.2 spec
“HTML 3.2 includes a widely
deployed subset of the
specification given in RFC 1942
and can be used to markup
tabular material or for layout
purposes.”
W3C HTML 3.2 specification – http://www.w3.org/TR/REC-html32

13. yahoo!

14. apple.com

15. bol.com.br

16. uol.com.br

17. cade.com.br

18. amazon.com

19. globo.com

20. globo.com

21. codigo
<!-- ** M A I N T A B L E ** -->
<A NAME="topofpage">
<TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<!-- ROW 1 -->
<TR VALIGN="TOP">
<!-- ** M A R G I N M E N U ** -->
<TD WIDTH=128 ROWSPAN=3 VALIGN="TOP">
<IMG SRC="/web/19961022105458im_/http://www4.apple.com
elements/spacer2.gif"
WIDTH=128
HEIGHT=1
ALT=""><BR>
<!-- SERVER SIDE IMAGE MAP -->
<A HREF="/web/19961022105458/http://www5.apple.com/cgi
imagemap/mapserve.acgi$home/newsidebar.map">
<IMG SRC="/web/19961022105458im_/http://www4.apple.com
elements/sidebar.gif"
WIDTH=125 HEIGHT=262
BORDER=0
ALT="Navigation Graphic - See Below"
ISMAP
USEMAP="#newsidebar"></A>

22. • conteudo e layout misturados
problemas
• render nao incremental
• baixa acessibilidade

23. box model
O HOJE

24. • 1996 (com o HTML 3.2)
css 1
• separa estilo da marcacao
• reuso de estilos
• independente do conteudo (?)

25. css 1
• block-level elements
• margin, padding e border
• width e height
• display e float

26. • 1998 - 2011!
css 2.1
• position
• top, bottom, left e right
• min-height e max-height
• min-width e max-width

27. • 1999 - HOJE
css 3
• CSS basic user interface
module level 3
• box-sizing: border-box

28. margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
width x height
border-top-width
border-bottom-width
border-left-width
border-right-width
top
bottom
left
right

29. margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
border-top-width
border-bottom-width
border-left-width
border-right-width
width x height
top
bottom
left
right
box-sizing: border-box;

30. 2002TABLELESS

31. tabelas para
DADOS TABULARES
box model para
LAYOUTS

32. TABLELESS.COM

33. • alinhar verticalmente
problemas
Conteudo
}
?.box {
vertical-align: middle;

34. • alinhar verticalmente
problemas
Conteudo
.box {
vertical-align: middle;
}
display: table-cell;

35. • igualar altura de regioes
problemas
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
<aside>
.box {
height: 200px;
}
aside, .box {
height: 100%;
float: left;
}

36. • igualar altura de regioes
problemas
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
<aside>
.box {
height: 200px;
}
aside, .right {
height: 100%;
float: left;
}
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod ofelquys lotomania ipsum
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.

37. • igualar altura de regioes
problemas
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
<aside> .box {
height: 200px;
}
aside, .right {
height: 100%;
float: left;
}
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod ofelquys lotomania ipsum
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.

38. • igualar altura de regioes
problemas
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non<aside> Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod ofelquys lotomania ipsum
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
.box {
height: 200px;
display: table-row;
}
aside, .right {
height: 100%;
float: left;
display: table-cell;
}

39. table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
tabelas...

40. table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
<table>
tabelas...<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table>
<table> <table>

41. verdade seja dita
20132013
O GOOGLE
JA FEZ ATE UM
MEDIDOR DE KI

42. verdade seja dita
20132013
E AINDA
NAO SUPERAMOS
AS TABELAS

43. grid
O DEPOIS

44. • 2012 (draft W3C)
css grid layout
• divide o espaco em regioes

45. assim como tabelas...
LINHAS E
COLUNAS

46. diferente de tabelas...
ESTRUTURALMENTE
INDEPENDENTE

47. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non
LOOP
Lorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer

48. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio
gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non
LOOP
Lorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer
flexivelfixo

49. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio
gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non
LOOP
Lorem ipsum
Dolor sit amet
Consectetur adipisicing
Sed do eiusmod
bla bla
footer
flexivel
fixo

52. sem
position?
esqueca!
resize?
esqueca!

53. mão na massa...
DEFININDO
UM GRID

54. html
<div class="container"></div>

55. css
display: grid;

56. css
grid-definition-columns: auto auto;
1 2
display: grid;

57. css
grid-definition-rows: auto auto auto;
1 2
3 4
5 6
grid-definition-columns: auto auto;
display: grid;

58. css
1 2
3 4
5 6
grid-definition-columns: auto auto;
AREA DA TELA

59. css
1 2
3 4
5 6
grid-definition-columns: auto 1fr;

60. css
1 2
3 4
5 6
grid-definition-columns: 1fr 1fr;

61. css
1 2
3 4
5 6
grid-definition-columns: 2fr 1fr;

62. css
content
grid-definition-columns:
auto minmax(min-content, 1fr);
1 2
3 4
5 6

63. css
content1
3 4
5 6
RESIZE
grid-definition-columns:
auto minmax(min-content, 1fr);

64. css
content1
3 4
5 6
RESIZE
MAIS
grid-definition-columns:
auto minmax(min-content, 1fr);

65. minmax()
minmax(800px, 1fr);
minmax(2fr, 3fr);
minmax(50%, 100%);
minmax(10em, 80%);
minmax(min-content, 1fr);
minmax(70%, max-content);
minmax(calc(70% + 80px + 9em), 1fr);
minmax(min-content, max-content) = auto

66. mão na massa...
ASSOCIANDO
CONTEUDO

67. <div class="container">
html
1 2
3 4
5 6
</div>

68. html
<div class="reg5">c5</div>
<div class="reg1">c1</div>
<div class="reg2">c2</div>
<div class="reg3">c3</div>
<div class="reg4">c4</div>
• sem blocos para linha/coluna
<div class="reg6">c6</div>
1 2
3 4
5 6
<div class="container">
</div>

69. html
• a ordem nao importa
1 2
3 4
5 6
<div class="container">
</div>
<div class="reg5">c5</div>
<div class="reg1">c1</div>
<div class="reg2">c2</div>
<div class="reg3">c3</div>
<div class="reg4">c4</div>
<div class="reg6">c6</div>

70. css
2
3 4
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1

71. css
2
3
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4

72. css
2
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4
.reg3 {
grid-column: 1;
grid-row: 2;
}
c3

73. css
2
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4
.reg3, .reg6 {
grid-column: 1;
grid-row: 2;
}
c3
c6

74. mão na massa...
TEMPLATES

75. grid-template
header
aside content
footer
.container {
display: grid;
grid-template: "header header"
"aside content"
"footer footer";
}

76. grid-template
.container {
display: grid;
grid-template: "header header"
"aside content"
"footer footer";
}
.reg1 { grid-area: header }
.reg2 { grid-area: aside }
.reg3 { grid-area: content }
.reg4 { grid-area: content }
.reg5 { grid-area: content }
.reg6 { grid-area: footer }

77. templates responsivos
header
menu content aside
footer

78. templates responsivos
header
menu
content
footeraside

79. templates responsivos
@media (orientation: landscape){
.container {
grid-template: "header header header"
"menu content aside"
"footer footer footer";
}
}
@media (orientation: portrait){
.container {
grid-template: "header header"
"menu menu"
"content content"
"aside footer";
}
}

80. flexbox
O DEPOIS

81. • otimizado para UI layout
• comportamento previsivel
• agnostico de direcao
flexbox

82. web site
header
content
ads

83. ads
content2
footer

84. web app
footer
header
side main

85. os x app store

86. versões
• 2009: display:box; box-{*}
• 2011: display:box; flex()
• 2012: display:flex; flex-{*}

87. vocabulário
flex-item
flex-item
main size
crosssize
main axis
crossaxis
flex-container

88. grow and shrink
.a .a .b
.container {
display: flex;
flex-direction: row;
}
.container
600px

89. flex-grow
.a .a .b
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shrink: 0;
}
.container
600px

90. .a .a .b
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.container
800px
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shrink: 0;
}
flex-grow

91. flex-shrink
.a .a .b
.container
600px
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shrink: 0;
}

92. .a .b
.container
500px
.a
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shrink: 0;
}
flex-shrink

93. cálculo do espaço
.a .b
.container
800px
.c
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
css
.container {
display: flex;
}

94. cálculo do espaço
.a .b
.container
800px
.c
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
css
.container {
display: flex;
}

95. cálculo do espaço
.a .b
.container
800px
.c
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
css
.container {
display: flex;
}

96. cálculo do espaço
.a .b
.container
800px
.c
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
css
.container {
display: flex;
}

97. cálculo do espaço
.a .b
.container
800px
.c
1 + 2 + 1 = 4
800 / 4 = 200
.a = 1 * 200
.b = 2 * 200
.c = 1 * 200
unidade
proporção
200px 400px 200px

98. 1
flex-direction: row;
2 3

99. 1
flex-direction: column;
2
3

100. justify-content: flex-start;
1 2 3

101. justify-content: flex-end;
1 2 3

102. justify-content: center;
1 2 3

103. justify-content: space-between;
1 2 3

104. justify-content: space-around;
1 2 3

105. align-items: flex-start;
1 2 3

106. align-items: flex-end;
1 2 3

107. align-items: center;
1 2 3

108. align-items: stretch;
1 2 3

109. order: N;
1 2 3

110. order: N;
3 21

111. order: N;
3 21

112. mix com media queries
header
main
footer
aside1 aside2

113. header
main
footer
aside2
aside1
mix com media queries

114. não é só isso
• respeita media-queries
• respeita max-width, min-width, ...
• inline ou em block

115. centralizar elementos
.a
.container {
display: flex;
}
.container
.a {
margin: auto;
}

116. centralizar elementos
.a
.container
.container {
display: flex;
}
.a {
margin: auto;
}

117. web app flexible

118. web app flexible

119. regions
O DEPOIS

120. html
• separacao de conteudo e
apresentacao
• HTML como template
• layouts de impressos

121. Mauris iaculis porttitor
posuere. Praesent id metus
massa, ut blandit odio. Proin
quis tortor orci. Etiam at
risus et justo dignissim
congue. Donec congue
lacinia dui, a porttitor
lectus condimentum
laoreet. Nunc eu
ullamcorper orci. Quisque
eget odio ac lectus
vestibulum faucibus eget in
metus. In pellentesque
faucibus vestibulum. Nulla
at nulla justo, eget luctus
tortor. Nulla facilisi. Duis
aliquet egestas purus in
blandit. Curabitur
vulputate, ligula lacinia
scelerisque tempor, lacus
lacus ornare ante, ac
egestas est urna sit amet
arcu. Class aptent taciti
sociosqu ad litora torquent
per conubia nostra, per
inceptos himenaeos. Sed
layout em colunas
Phasellus molestie magna
non est bibendum non
venenatis nisl tempor.
Suspendisse dictum feugiat
nisl ut dapibus. Mauris
iaculis porttitor posuere.
Praesent id metus massa,
ut blandit odio. Proin quis
tortor orci. Etiam at risus
et justo dignissim congue.
Donec congue lacinia dui, a
porttitor lectus
condimentum laoreet. Nunc
eu ullamcorper orci. Quisque
eget odio ac lectus
vestibulum faucibus eget in
metus. In pellentesque
faucibus vestibulum. Nulla
at nulla justo, eget luctus
tortor. Nulla facilisi. Duis
aliquet egestas purus in
blandit. Curabitur
vulputate, ligula lacinia
scelerisque tempor, lacus
lacus ornare ante, ac
egestas est urna sit amet
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Vivamus luctus urna sed
urna ultricies ac tempor dui
sagittis. In condimentum
facilisis porta. Sed nec diam
eu diam mattis viverra.
Nulla fringilla, orci ac
euismod semper, magna diam
porttitor mauris, quis
sollicitudin sapien justo in
libero. Vestibulum mollis
mauris enim. Morbi euismod
magna ac lorem rutrum
elementum. Donec viverra
auctor lobortis.
Pellentesque eu est a nulla
placerat dignissim. Morbi a
enim in magna semper
bibendum.

122. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod kracta caio
gondim lorem
tempor incididunt ut labore
et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation
ullamco laboris nisi ut aliquip
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do
eiusmod kracta caio
gondim lorem
tempor incididunt ut
labore et dolore magna
aliqua. Ut enim ad minim
veniam,
Mauris iaculis porttitor posuere.
Praesent id metus massa, ut
blandit odio. Proin quis tortor orci.
Etiam at risus et justo dignissim
congue. Donec congue lacinia dui, a
porttitor lectus condimentum
laoreet. Nunc eu ullamcorper orci.
Quisque eget odio ac lectus
vestibulum faucibus eget in metus.
In pellentesque faucibus
vestibulum. Nulla at nulla justo,
eget luctus tortor. Nulla facilisi.
Duis aliquet egestas purus in
blandit. Curabitur vulputate, ligula
lacinia scelerisque tempor, lacus
lacus ornare ante, ac egestas est
urna sit amet arcu.
layouts complexos

123. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod kracta caio
gondim lorem
tempor incididunt ut labore
et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation
ullamco laboris nisi ut aliquip
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do
eiusmod kracta caio
gondim lorem
tempor incididunt ut
labore et dolore magna
aliqua. Ut enim ad minim
veniam,
Mauris iaculis porttitor posuere.
Praesent id metus massa, ut
blandit odio. Proin quis tortor orci.
Etiam at risus et justo dignissim
congue. Donec congue lacinia dui, a
porttitor lectus condimentum
laoreet. Nunc eu ullamcorper orci.
Quisque eget odio ac lectus
vestibulum faucibus eget in metus.
In pellentesque faucibus
vestibulum. Nulla at nulla justo,
eget luctus tortor. Nulla facilisi.
Duis aliquet egestas purus in
blandit. Curabitur vulputate, ligula
lacinia scelerisque tempor, lacus
lacus ornare ante, ac egestas est
urna sit amet arcu.
layouts complexos

124. conceitos importantes
•named flows
•regions

125. html
<div class=”content”> ... </div>
<div class=”region region-1”></div>
<img src=”” />
<div class=”region region-2”></div>
<div class=”region region-3”></div>
<div class=”region region-4”></div>

126. html
<div class=”content”> ... </div>
<div class=”region region-1”></div>
<img src=”” />
<div class=”region region-2”></div>
<div class=”region region-3”></div>
<div class=”region region-4”></div>

127. css
.content {
flow-into: lorem-ipsum;
}
.region {
flow-from: lorem-ipsum;
}

128. css
.content {
flow-into: lorem-ipsum;
}
.region {
flow-from: lorem-ipsum;
}

129. @region
@region .region-3 {
p {
color: #BADA55;
}
}
@region .region-4 {
p {
color: red;
}
}

130. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod kracta caio
gondim lorem
tempor incididunt ut labore
et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation
ullamco laboris nisi ut aliquip
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit, sed do
eiusmod kracta caio
gondim lorem
tempor incididunt ut
labore et dolore magna
aliqua. Ut enim ad minim
veniam,
Mauris iaculis porttitor posuere.
Praesent id metus massa, ut
blandit odio. Proin quis tortor orci.
Etiam at risus et justo dignissim
congue. Donec congue lacinia dui, a
porttitor lectus condimentum
laoreet. Nunc eu ullamcorper orci.
Quisque eget odio ac lectus
vestibulum faucibus eget in metus.
In pellentesque faucibus
vestibulum. Nulla at nulla justo,
eget luctus tortor. Nulla facilisi.
Duis aliquet egestas purus in
blandit. Curabitur vulputate, ligula
lacinia scelerisque tempor, lacus
lacus ornare ante, ac egestas est
urna sit amet arcu.
layouts complexos

131. regions

132. regions

133. layouts complexos

134. exclusions
O DEPOIS

135. a tirania do retângulo
ELEMENTOS DE
BLOCO SAO
QUADRADOS

136. a tirania do retângulo
border-radius?

137. a tirania do retângulo
border-radius?
• molda apenas estilo
• nao molda conteudo

138. shapes!
shape-inside
shape-outside

139. shape-inside
.circulo {
// shape-inside: circle(cx, cy, radius);
shape-inside: circle(50%, 50%, 50%);
}
Sed ast
molestie augue sitep
amet leo consequat siuop
posuere. Vestibulum ante ipsum
primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin
vel ante a orci tempus eleifend ut et
magna. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus
luctus urna sed urna ultricies ac
tempor dui sagittis. In condimentum
facilisis porta. Sed nec diam eu
diam mattis viverra. Nulla
fringilla, orci ac amet
euism Sed

140. shape-inside
A
Sed
molestie
augue sit
amet leo
consequat as due to a
posuere. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
posuere cubilia Curae; Proin vel
ante a orci tempus eleifend
ut et magna. Lorem
ipsum dolor sit amet,
consectetur adipiscing
elit. Vivamus luctus urna
sed urna ultricies
ac am
.estrela {
shape-inside: polygon(0px 150px, ...);
}

141. shapes com regions
A Sed
molestie
augue sit
amet leo consequat as
due to a posuere. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Proin vel
ante a orci tempus eleifend
ut et magna. Lorem ipsum
dolor sit amet, soc at
consectetur adipisg elit.
Vivamus luctus urna sed
urna ultricies
ser am
Sed ast
molestie augue sitep
amet leo consequat siuop
posuere. Vestibulum ante ipsum
primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin
vel ante a orci tempus eleifend ut et
magna. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus
luctus urna sed urna ultricies ac
tempor dui sagittis. In condimentum
facilisis porta. Sed nec diam eu
diam mattis viverra. Nulla
fringilla, orci ac amet
euism Sed

142. shape-outside
p {
// shape-outside: circle(cx, cy, radius);
shape-outside: circle(-50px, 50%, 50%);
}
Sed ast molestie augue sitep amet
leo consequat siuop posuere.
Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
posuere cubilia Curae; Proin vel
ante a orci tempus eleifend ut
et magna. Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Vivamus luctus
urna sed urna ultricies ac
tempor dui sagittis. In
condimentum facilisis porta. Sed
nec diam eu diam mattis viverra.
nulla fringilla, orci ac amet euism
sed orci ac amet euism

143. shape-outside
.circulo {
// shape-outside: circle(cx, cy, radius);
shape-outside: circle(-100px, 50%, 50%);
}
Sed ast molestie augue sitep amet
leo consequat siuop posuere.
Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
posuere cubilia Curae; Proin vel
ante a orci tempus eleifend ut
et magna. Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Vivamus luctus
urna sed urna ultricies ac
tempor dui sagittis. In
condimentum facilisis porta. Sed
nec diam eu diam mattis viverra.
nulla fringilla, orci ac amet euism
sed orci ac amet euism
-100px
50%

144. layouts complexos

145. layouts complexos

146. obrigado!
@LOOPINFINITO
LOOPINFINITO.COM.BR