css layout
O ONTEM, O HOJE E O DEPOIS
@LOOPINFINITO
@CAIO_GONDIM @ALMIRFILHO
GLOBO.COM
LOOPINFINITO.COM.BR
tabelas
box model
flexbox
1990
1995
1998
2012
? regions exclusions&
<pre>
grid?
flexbox 2034
2047regions exclusions&
grid 2012
tabelas
O ONTEM
• 1990
html 1.0
• estrutura de documento
• layout com <pre>
primeiro site ever
• 1993
html 2.0
• <img>
• padrao IETF
• 1995
html 3.0
• <table>
• nunca foi aprovado
• text flow ao redor de <img>
• elementos matematicos
• 1997
html 3.2
• <table border=’0’>
•nasce o web designer
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...
yahoo!
apple.com
bol.com.br
uol.com.br
cade.com.br
amazon.com
globo.com
• conteudo e layout misturados
problemas
• render nao incremental
• baixa acessibilidade
box model
O HOJE
• 1996 (com o HTML 3.2)
css 1
• separa estilo da marcacao
• reuso de estilos
• independente do conteudo (?)
css 1
• block-level elements
• margin, padding e border
• width e height
• display e float
• 1998 - 2011!
css 2.1
• position
• top, bottom, left e right
• min-height e max-height
• min-width e max-width
• 1999 - HOJE
css 3
• CSS basic user interface
module level 3
• box-sizing: border-box
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
width x height
bor...
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
border-top-width
b...
2002TABLELESS
tabelas para
DADOS TABULARES
tabelas para
DADOS TABULARES
box model para
LAYOUTS
TABLELESS.COM.BR
• alinhar verticalmente
problemas
Conteudo
.box {
display: table-cell;
vertical-align: middle;
}
• igualar altura de regioes
problemas
.container {
display: table-row;
}
.column {
display: table-cell;
}
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-g...
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-g...
verdade seja dita
20132013
E AINDA
NAO SUPERAMOS
AS TABELAS
flexbox
O DEPOIS
• otimizado para UI layout
• comportamento previsivel
• agnostico de direcao
flexbox
web site
header
content
ads
ads
content2
footer
web app
footer
header
side main
os x app store
versões
• 2009: display:box; box-{*}
• 2011: display:box; flex()
• 2012: display:flex; flex-{*}
vocabulário
flex-item
flex-item
main size
crosssize
main axis
crossaxis
flex-container
grow and shrink
.a .a .b
.container {
display: flex;
flex-direction: row;
}
.container
600px
flex-grow
.a .a .b
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex-grow: 1;
flex-shri...
.a .a .b
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.container
800px
.b {
flex-basis: 333px;
flex-grow: 1;
fl...
flex-shrink
.a .a .b
.container
600px
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex...
.a .b
.container
500px
.a
.a {
flex-basis: 113px;
flex-grow: 0;
flex-shrink: 1;
}
.b {
flex-basis: 333px;
flex-grow: 1;
fl...
cálculo do espaço
.a .b
.container
800px
.c
.a {
flex: 1;
}
.b {
flex: 2;
}
.c {
flex: 1;
}
css
.container {
display: flex...
1
flex-direction: row;
2 3
1
flex-direction: column;
2
3
justify-content: flex-start;
1 2 3
justify-content: flex-end;
1 2 3
justify-content: center;
1 2 3
justify-content: space-between;
1 2 3
justify-content: space-around;
1 2 3
align-items: flex-start;
1 2 3
align-items: flex-end;
1 2 3
align-items: center;
1 2 3
align-items: stretch;
1 2 3
order: N;
1 2 3
order: N;
3 21
order: N;
3 21
mix com media queries
header
main
footer
aside1 aside2
header
main
footer
aside2
aside1
mix com media queries
centralizar elementos
.a
.container {
display: flex;
}
.container
.a {
margin: auto;
}
centralizar elementos
.a
.container
.container {
display: flex;
}
.a {
margin: auto;
}
web app flexible
web app flexible
regions
O DEPOIS
html
• separacao de conteudo e
apresentacao
• HTML como template
• layouts de impressos
Mauris iaculis porttitor
posuere. Praesent id metus
massa, ut blandit odio. Proin
quis tortor orci. Etiam at
risus et just...
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem
tempor incididunt ut lab...
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem
tempor incididunt ut lab...
conceitos importantes
•named flows
•regions
html
<div class=”content”>
<p> ... </p>
</div>
<div class=”region region-1”></div>
<img src=”” />
<div class=”region regio...
html
<div class=”content”>
<p> ... </p>
</div>
<div class=”region region-1”></div>
<img src=”” />
<div class=”region regio...
css
.content {
flow-into: lorem-ipsum;
}
.region {
flow-from: lorem-ipsum;
}
css
.content {
flow-into: lorem-ipsum;
}
.region {
flow-from: lorem-ipsum;
}
@region
.region-3::region(p) {
color: #BADA55;
}
.region-4::region(p) {
color: red;
}
regions
regions
layouts complexos
exclusions
O DEPOIS
a tirania do retângulo
ELEMENTOS DE
BLOCO SAO
QUADRADOS
a tirania do retângulo
border-radius?
a tirania do retângulo
border-radius?
• molda apenas estilo
• nao molda conteudo
a tirania do retângulo
Sed at ast molestie augue tad sitep amet leo
consequat siuop posuere. Vestibulum ante ipsum tade
pr...
shapes!
shape-inside
shape-outside
shape-inside
.circulo {
// shape-inside: circle(cx, cy, radius);
shape-inside: circle(50%, 50%, 50%);
}
Sed ast
molestie a...
shape-inside
A
Sed
molestie
augue sit
amet leo
consequat as due to a
posuere. Vestibulum ante ipsum primis in
faucibus orc...
shapes com regions
A Sed
molestie
augue sit
amet leo consequat as
due to a posuere. Vestibulum ante ipsum
primis in faucib...
shape-outside
Sed ast molestie augue sitep amet
leo consequat siuop posuere.
Vestibulum ante ipsum primis in
faucibus orci...
shape-outside
Sed ast molestie augue sitep amet
leo consequat siuop posuere.
Vestibulum ante ipsum primis in
faucibus orci...
layouts complexos
layouts complexos
layouts complexos
grid
O DEPOIS
• 2012 (W3C draft)
css grid layout
• divide o espaco em regioes
assim como tabelas...
LINHAS E
COLUNAS
diferente de tabelas...
ESTRUTURALMENTE
INDEPENDENTE
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod kracta caio gondim lorem tempor
incididunt ut lab...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio
gondim lorem tempor incididunt ut lab...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio
gondim lorem tempor incididunt ut lab...
sem
position?
esqueca!
resize?
esqueca!
mão na massa...
DEFININDO
UM GRID
html
<div class="container"></div>
css
display: grid;
css
grid-template-columns: auto auto;
1 2
display: grid;
css
grid-template-rows: auto auto auto;
1 2
3 4
5 6
grid-template-columns: auto auto;
display: grid;
css
1 2
3 4
5 6
grid-template-columns: auto auto;
AREA DA TELA
css
1 2
3 4
5 6
grid-template-columns: auto 1fr;
css
1 2
3 4
5 6
grid-template-columns: 1fr 1fr;
css
1 2
3 4
5 6
grid-template-columns: 2fr 1fr;
css
content
grid-template-columns:
auto minmax(min-content, 1fr);
1 2
3 4
5 6
css
content1
3 4
5 6
RESIZE
grid-template-columns:
auto minmax(min-content, 1fr);
css
content1
3 4
5 6
RESIZE
MAIS
grid-template-columns:
auto minmax(min-content, 1fr);
minmax()
minmax(800px, 1fr);
minmax(2fr, 3fr);
minmax(50%, 100%);
minmax(10em, 80%);
minmax(min-content, 1fr);
minmax(70%,...
mão na massa...
ASSOCIANDO
CONTEUDO
<div class="container">
html
1 2
3 4
5 6
</div>
html
<div class="reg5">c5</div>
<div class="reg1">c1</div>
<div class="reg2">c2</div>
<div class="reg3">c3</div>
<div clas...
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...
css
2
3 4
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1
css
2
3
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4
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...
css
2
5 6
.reg1 {
grid-column: 1;
grid-row: 1;
}
c1 .reg4 {
grid-column: 2;
grid-row: 2;
}
c4
.reg3, .reg6 {
grid-column: ...
e não é só isso...
•Subgrids
•Span de conteudo
•Alinhamento
TEMPLATES
grid-template
header
aside content
footer
.container {
display: grid;
grid-template-areas: "header header"
"aside content"...
grid-template
.container {
display: grid;
grid-template-areas: "header header"
"aside content"
"footer footer";
}
.reg1 { ...
templates responsivos
header
menu content aside
footer
templates responsivos
header
menu
content
footeraside
templates responsivos
@media (orientation: landscape){
.container {
grid-template-areas: "header header header"
"menu cont...
tabelas
box model
flexbox
regions exclusions
1990
1995
1998
2012
? &
<pre>
grid?
?
obrigado!
@LOOPINFINITO
LOOPINFINITO.COM.BR
CSS Layout: O ontem, o hoje e o depois
CSS Layout: O ontem, o hoje e o depois
Próximos SlideShares
Carregando em…5
×

CSS Layout: O ontem, o hoje e o depois

500 visualizações

Publicada em

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.

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
500
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
34
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS Layout: O ontem, o hoje e o depois

  1. 1. css layout O ONTEM, O HOJE E O DEPOIS @LOOPINFINITO
  2. 2. @CAIO_GONDIM @ALMIRFILHO
  3. 3. GLOBO.COM
  4. 4. LOOPINFINITO.COM.BR
  5. 5. tabelas box model flexbox 1990 1995 1998 2012 ? regions exclusions& <pre> grid?
  6. 6. flexbox 2034 2047regions exclusions& grid 2012
  7. 7. tabelas O ONTEM
  8. 8. • 1990 html 1.0 • estrutura de documento • layout com <pre>
  9. 9. primeiro site ever
  10. 10. • 1993 html 2.0 • <img> • padrao IETF
  11. 11. • 1995 html 3.0 • <table> • nunca foi aprovado • text flow ao redor de <img> • elementos matematicos
  12. 12. • 1997 html 3.2 • <table border=’0’> •nasce o web designer
  13. 13. 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
  14. 14. yahoo!
  15. 15. apple.com
  16. 16. bol.com.br
  17. 17. uol.com.br
  18. 18. cade.com.br
  19. 19. amazon.com
  20. 20. globo.com
  21. 21. • conteudo e layout misturados problemas • render nao incremental • baixa acessibilidade
  22. 22. box model O HOJE
  23. 23. • 1996 (com o HTML 3.2) css 1 • separa estilo da marcacao • reuso de estilos • independente do conteudo (?)
  24. 24. css 1 • block-level elements • margin, padding e border • width e height • display e float
  25. 25. • 1998 - 2011! css 2.1 • position • top, bottom, left e right • min-height e max-height • min-width e max-width
  26. 26. • 1999 - HOJE css 3 • CSS basic user interface module level 3 • box-sizing: border-box
  27. 27. 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
  28. 28. 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;
  29. 29. 2002TABLELESS
  30. 30. tabelas para DADOS TABULARES
  31. 31. tabelas para DADOS TABULARES box model para LAYOUTS
  32. 32. TABLELESS.COM.BR
  33. 33. • alinhar verticalmente problemas Conteudo .box { display: table-cell; vertical-align: middle; }
  34. 34. • igualar altura de regioes problemas .container { display: table-row; } .column { display: table-cell; }
  35. 35. table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group display
  36. 36. 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>
  37. 37. verdade seja dita 20132013 E AINDA NAO SUPERAMOS AS TABELAS
  38. 38. flexbox O DEPOIS
  39. 39. • otimizado para UI layout • comportamento previsivel • agnostico de direcao flexbox
  40. 40. web site header content ads
  41. 41. ads content2 footer
  42. 42. web app footer header side main
  43. 43. os x app store
  44. 44. versões • 2009: display:box; box-{*} • 2011: display:box; flex() • 2012: display:flex; flex-{*}
  45. 45. vocabulário flex-item flex-item main size crosssize main axis crossaxis flex-container
  46. 46. grow and shrink .a .a .b .container { display: flex; flex-direction: row; } .container 600px
  47. 47. 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
  48. 48. .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
  49. 49. 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; }
  50. 50. .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
  51. 51. cálculo do espaço .a .b .container 800px .c .a { flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }
  52. 52. 1 flex-direction: row; 2 3
  53. 53. 1 flex-direction: column; 2 3
  54. 54. justify-content: flex-start; 1 2 3
  55. 55. justify-content: flex-end; 1 2 3
  56. 56. justify-content: center; 1 2 3
  57. 57. justify-content: space-between; 1 2 3
  58. 58. justify-content: space-around; 1 2 3
  59. 59. align-items: flex-start; 1 2 3
  60. 60. align-items: flex-end; 1 2 3
  61. 61. align-items: center; 1 2 3
  62. 62. align-items: stretch; 1 2 3
  63. 63. order: N; 1 2 3
  64. 64. order: N; 3 21
  65. 65. order: N; 3 21
  66. 66. mix com media queries header main footer aside1 aside2
  67. 67. header main footer aside2 aside1 mix com media queries
  68. 68. centralizar elementos .a .container { display: flex; } .container .a { margin: auto; }
  69. 69. centralizar elementos .a .container .container { display: flex; } .a { margin: auto; }
  70. 70. web app flexible
  71. 71. web app flexible
  72. 72. regions O DEPOIS
  73. 73. html • separacao de conteudo e apresentacao • HTML como template • layouts de impressos
  74. 74. 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.
  75. 75. 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
  76. 76. 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
  77. 77. conceitos importantes •named flows •regions
  78. 78. html <div class=”content”> <p> ... </p> </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>
  79. 79. html <div class=”content”> <p> ... </p> </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>
  80. 80. css .content { flow-into: lorem-ipsum; } .region { flow-from: lorem-ipsum; }
  81. 81. css .content { flow-into: lorem-ipsum; } .region { flow-from: lorem-ipsum; }
  82. 82. @region .region-3::region(p) { color: #BADA55; } .region-4::region(p) { color: red; }
  83. 83. regions
  84. 84. regions
  85. 85. layouts complexos
  86. 86. exclusions O DEPOIS
  87. 87. a tirania do retângulo ELEMENTOS DE BLOCO SAO QUADRADOS
  88. 88. a tirania do retângulo border-radius?
  89. 89. a tirania do retângulo border-radius? • molda apenas estilo • nao molda conteudo
  90. 90. a tirania do retângulo Sed at ast molestie augue tad sitep amet leo consequat siuop posuere. Vestibulum ante ipsum tade primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum bdolor 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 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 temo eleifend ut et magna. Lorem ipsum dolor sito amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies actased tempor dui sagittis. In at sectum condimentum facilisis porta. Sed nec diam eu et magna. Lorem ipsum dolor sito amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies actased
  91. 91. shapes! shape-inside shape-outside
  92. 92. 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
  93. 93. 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, ...); }
  94. 94. 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
  95. 95. shape-outside 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 <div class="circulo"></div> <p>Lorem ipsum dolor sit amet...</p>
  96. 96. shape-outside 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 .circulo { float: left; shape-outside: circle(50px, 50%, 50%); }
  97. 97. layouts complexos
  98. 98. layouts complexos
  99. 99. layouts complexos
  100. 100. grid O DEPOIS
  101. 101. • 2012 (W3C draft) css grid layout • divide o espaco em regioes
  102. 102. assim como tabelas... LINHAS E COLUNAS
  103. 103. diferente de tabelas... ESTRUTURALMENTE INDEPENDENTE
  104. 104. 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
  105. 105. 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
  106. 106. 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
  107. 107. sem position? esqueca! resize? esqueca!
  108. 108. mão na massa... DEFININDO UM GRID
  109. 109. html <div class="container"></div>
  110. 110. css display: grid;
  111. 111. css grid-template-columns: auto auto; 1 2 display: grid;
  112. 112. css grid-template-rows: auto auto auto; 1 2 3 4 5 6 grid-template-columns: auto auto; display: grid;
  113. 113. css 1 2 3 4 5 6 grid-template-columns: auto auto; AREA DA TELA
  114. 114. css 1 2 3 4 5 6 grid-template-columns: auto 1fr;
  115. 115. css 1 2 3 4 5 6 grid-template-columns: 1fr 1fr;
  116. 116. css 1 2 3 4 5 6 grid-template-columns: 2fr 1fr;
  117. 117. css content grid-template-columns: auto minmax(min-content, 1fr); 1 2 3 4 5 6
  118. 118. css content1 3 4 5 6 RESIZE grid-template-columns: auto minmax(min-content, 1fr);
  119. 119. css content1 3 4 5 6 RESIZE MAIS grid-template-columns: auto minmax(min-content, 1fr);
  120. 120. 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
  121. 121. mão na massa... ASSOCIANDO CONTEUDO
  122. 122. <div class="container"> html 1 2 3 4 5 6 </div>
  123. 123. 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>
  124. 124. 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>
  125. 125. css 2 3 4 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1
  126. 126. css 2 3 5 6 .reg1 { grid-column: 1; grid-row: 1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4
  127. 127. 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
  128. 128. 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
  129. 129. e não é só isso... •Subgrids •Span de conteudo •Alinhamento
  130. 130. TEMPLATES
  131. 131. grid-template header aside content footer .container { display: grid; grid-template-areas: "header header" "aside content" "footer footer"; }
  132. 132. grid-template .container { display: grid; grid-template-areas: "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 }
  133. 133. templates responsivos header menu content aside footer
  134. 134. templates responsivos header menu content footeraside
  135. 135. templates responsivos @media (orientation: landscape){ .container { grid-template-areas: "header header header" "menu content aside" "footer footer footer"; } } @media (orientation: portrait){ .container { grid-template-areas: "header header" "menu menu" "content content" "aside footer"; } }
  136. 136. tabelas box model flexbox regions exclusions 1990 1995 1998 2012 ? & <pre> grid?
  137. 137. ?
  138. 138. obrigado! @LOOPINFINITO LOOPINFINITO.COM.BR

×