CSS Layout: O ontem, o hoje e o depois

css layoutO 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

tabelasO 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

tabular material or for layout

purposes.”W3C HTML 3.2 specification – http://www.w3.org/TR/REC-html32

http://www.w3.org/TR/REC-html32#refs

http://www.w3.org/TR/REC-html32#refs

http://www.w3.org/TR/REC-html32

http://www.w3.org/TR/REC-html32

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 modelO 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

border-top-width

border-bottom-width

border-left-width

border-right-width

top

bottom

left

right

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

rightbox-sizing: border-box;

2002TABLELESS

tabelas paraDADOS TABULARES

tabelas paraDADOS TABULARES

box model paraLAYOUTS

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;

}

tabletable-captiontable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group

display

tabletable-captiontable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-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>

verdade seja dita

20132013

E AINDA NAO SUPERAMOS AS TABELAS

flexboxO 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 sizecr

oss

size

main axis

cros

s ax

is

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-shrink: 0;

}

.container

600px

.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

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;

}

.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

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

regionsO 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 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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim loremtempor 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 loremtempor 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 loremtempor 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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim loremtempor 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 loremtempor 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 loremtempor 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

conceitos importantes

•named flows

•regions

html

<div class=”content”>

<p> ... </p>

</div>

<div class=”region region-1”></div>

<img src=”” />




html

<div class=”content”>

<p> ... </p>

</div>


<img src=”” />




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

exclusionsO DEPOIS

a tirania do retângulo

ELEMENTOS DE BLOCO SAO QUADRADOS


border-radius?


border-radius?

• molda apenas estilo

• nao molda conteudo


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

shapes!

shape-insideshape-outside

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

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, ...);

}

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

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>

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%);}

layouts complexos

layouts complexos

layouts complexos

gridO DEPOIS

• 2012 (W3C draft)

css grid layout

• divide o espaco em regioes

assim como tabelas...

LINHAS ECOLUNAS

diferente de tabelas...

ESTRUTURALMENTE INDEPENDENTE

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

LOOPLorem ipsum

Dolor sit amet

Consectetur adipisicing

Sed do eiusmod

bla bla

footer


LOOPLorem ipsum

Dolor sit amet


Sed do eiusmod

bla bla

footer

flexivelfixo


LOOPLorem ipsum

Dolor sit amet


Sed do eiusmod

bla bla

footer

flexivel

fixo

semposition ?esqueca!

resize?esqueca!

mão na massa...

DEFININDOUM 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


display: grid;

css

1 2

3 4

5 6


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



css

content1

3 4

5 6

RESIZEMAIS



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

mão na massa...

ASSOCIANDOCONTEUDO

<div class="container">

html

1 2

3 4

5 6

</div>

html

<div class="reg5">c5</div>





• sem blocos para linha/coluna


1 2

3 4

5 6


</div>

html

• a ordem nao importa

1 2

3 4

5 6


</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-row: 2;

}

c3

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

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" "footer footer";}

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 }



.reg6 { grid-area: footer }

templates responsivos

header

menu content aside

footer


header

menu

content

footeraside


@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"; }}

tabelas

box model

flexbox

regions exclusions

1990

1995

1998

2012

? &

<pre>

grid?

?

[email protected]

LOOPINFINITO.COM.BR

CSS Layout: O ontem, o hoje e o depois

Software

Transcript of CSS Layout: O ontem, o hoje e o depois

FTIN - Módulo de WebDesign Prof. Ítalo Araújo. IMPLEMENTANDO UM LAYOUT COM HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.

Posicionamento e Layout com CSS€¦ · CSS: estático, relativo, absoluto e fixo. A propriedade CSS que possibilita posicionar um elemento qualquer é a propriedade position A propriedade

CSS CURSO W3C ESCRITÓRIO BRASILw3c.br/pub/Cursos/CursoCSS3/css-web.pdf · CSS - Curso W3C Escritório Brasil 15 4. COLUMNS Com o controle de colunas no CSS, podemos definir colunas

CONSTRUINDO UM FRAMEWORK CSS - qconsp.comWEB] Diego Eis... · PRODUTIVIDADE Menos tempo montando wireframes, menos tempo desenhando um layout, menos tempo codiﬁcando.

Tutorial CSS

Apostila de Introdu o ao CSSA sigla CSS (Cascading Style Sheets) se refere a uma linguagem de estilos que de ne o layout de documentos escritos, geralmente, em linguagem HTML. O CSS

FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

HTML, CSS - Uniandesisis3710/...Tendencias: HTML semántico, CSS para la visualización, no uso de plugins externos CSS: Fuentes para estilos Reglas CSS (externas o internas) Declaración

CSS: Conceptos básicosrua.ua.es › dspace › bitstream › 10045 › 26458 › 1 › CSS... · CSS Introducción al desarrollo web CSS Cascading Style Sheets

Css reglas1

Construindo layout de sites com CSS

HTML&CSS 3 - Introduction to CSS

Manual css

Aula 07 - CSS: Posicionamento e Layout CSS - …regilan.com.br/.../10/PW1-Aula-06-Posicionamento-e-Layout-com-CS…Existem quatro tipos de posicionamento em CSS: estático, relativo,

Laboratório de Informática CSS Layout em CSS

CSS CLASSES DIVSESPANS - univap.br · CORES EM CSS As cores em css podem ser representados por nomes. Blue, gray, red, etc. As cores em css podem ser representadas por números Hexadecimais

Criando Um Layout Com CSS a Partir Do Zero

Css Página 1 - Max Pezzin · Css Página 2 CSS Sumário Introdução ao CSS ..... 4

Blueprint CSS

HTML e CSS