WEB DESIGN

AULA 4

Prof. Matias Peruyera

 CONVERSA INICIAL

Depois de entender os princípios básicos de HTML e CSS, assim como

entender as características das telas e de como as imagens devem ser
trabalhadas para a web, vamos trabalhar com CSS para definir o posicionamento
dos diferentes elementos em um layout, e como é possível trabalhar com vários
elementos para conseguir layouts interessantes. Os temas desta aula são:

• tipos de layout;
• layout de colunas flexíveis;
• layout com grids CSS;
• backgrounds;
• combinando várias propriedades do background.

CONTEXTUALIZANDO(PROBLEMATIZAÇÃO)

O meio digital se caracteriza pela sua inconstância. Nesse contexto, não

é possível se agarrar às formas de produção do impresso. É necessário entender
como layouts funcionam na web, como eles devem ser apresentados, e em quais
limitações e possibilidades é necessário pensar.

TEMA 1 – TIPOS DE LAYOUT

Em conteúdos anteriores você começou a aprender como usar CSS para

determinar os estilos dos seus elementos. Você trabalhou principalmente com
propriedades da tipografia, e separou seu HTML em elementos semânticos
relacionados a cada parte do seu site.
Além dessa separação, começamos a trabalhar com margens e cores de
fundo. Foi a base para o que vamos ver agora, que é como fazer layouts usando
CSS. Vamos explicar as quatro maneiras principais, segundo a divisão
apresentada no livro-base (Paz, 2021, p. 129-149).
Primeiro, preste atenção em como cada maneira de fazer os layouts
funciona. Leve em consideração que a ideia é mostrar como funciona, mas que
cada uma dessas maneiras pode apresentar muito mais possibilidades,
principalmente as mais recentes – flexbox e grid.

2
 Vamos começar pelas técnicas mais antigas, ambas parte do padrão CSS
Box Model.

1.1 Layout fixo

Antigamente, se o site coubesse em um monitor da resolução mais

popular, estava ótimo. As medidas podiam ser definidas em pixels, afinal, já
sabíamos o que esperar. Porém, as limitações dessa maneira de trabalhar
ficaram evidentes com a profusão de diferentes tipos de aparelhos acessando a
internet, como celulares (Paz, 2021, p. 144). Quando falamos de layout fixo, não
nos referimos tanto a uma técnica, mas sim ao fato do layout permanecer sempre
com o mesmo tamanho, seja feito tanto usando técnicas de CSS ou com a
arcaica técnica de diagramação em tabelas ou, mais arcaica ainda, frames.

1.2 Layout flutuante

Um layout flutuante se caracteriza por uma maior flexibilidade nos

diferentes elementos de um site. Os elementos vão se “amontoando” de acordo
com o seu tamanho, sua configuração para flutuarem, e se tivermos determinado
a possibilidade deles receberem elementos ao seu lado ou não. É complicado,
então, vamos voltar ao nosso site de receitas para ver na prática. Acrescente o
seguinte código ao CSS – seria possível incluí-lo dentro de seletores anteriores,
mas para simplificar vamos fazê-lo separadamente:

.ingredientes, .preparo {
width: 40%;
float:left;
}

O resultado é o da Figura 1. A princípio, o elemento .ingredientes, por

ter o float: left, poderia ficar à direita do header, mas como este, por padrão,
ocupa 100%, não sobra lugar para mais nada. Como tanto o .ingredientes
como o .preparo ocupam 40% da largura disponível, há espaço para os dois, e
como os dois estão configurados para flutuar para a esquerda, eles vão se
“amontoar”.

3
 Figura 1 – Exemplo de layout flutuante

Fonte: Matias Peruyera.

É possível configurar os estilos para que não permitam que elementos

flutuem perto deles. Acrescente a linha clear:both; ao seletor .ingredientes,
.preparo e veja o que acontece. Essa linha determina que o elemento fique livre

de outros elementos flutuantes em ambos os lados.

Durante muito tempo, essa foi a única técnica disponível para fazer
layouts em CSS. Além da complicação, o problema é que os elementos se
relacionam ao fluxo da página, resultando em um site não tão flexível quanto
necessário (Paz, 2021, p. 146). Algo importante nesse caso é analisar o
conteúdo e determinar, também via CSS, larguras mínimas e máximas para cada
elemento (Paz, 2021, p. 146).

TEMA 2 – LAYOUT DE COLUNAS FLEXÍVEIS

Ao final dos anos 2000 surgiram novas técnicas para determinar o layout
de páginas HTML. Um se baseia em colunas flexíveis, e o outro implementa o
uso de um grid. Ambas especificações não se tornaram – ainda – padrões do

4
 W3C, mas já são adotadas pela maioria dos navegadores. Vamos ver como
funcionam.
Uma forma mais recente de determinar o layout de uma página é o
Flexible Box Layout ou, simplesmente, flexbox. Nessa maneira de trabalhar,
quem recebe as configurações é o elemento que contém os elementos que
queremos determinar suas posições – aquela divisão em main, section e afins é,
novamente, útil.
Vamos te mostrar como conseguir um layout similar ao anterior, mas
usando essa técnica. No seu CSS, comece retirando a propriedade float:left do
seletor .ingredientes, .preparo. Depois, acrescente o seguinte código:

article {
display:flex;
flex-wrap: wrap;
flex-direction: row;
}

Vamos ver o que cada linha faz. A linha display: flex determina que o
elemento é um flex container e, consequentemente, que os elementos que ele
contém serão flex items e se comportarão como tal. O flex-wrap: wrap permite
que os itens apareçam em múltiplas linhas, e o flex-direction: row determina que
os elementos sejam dispostos na mesma direção que a direção do texto da
página.
Salve o CSS e confira o HTML. O resultado deve ser igual ao da Figura 1,
que havia sido feito com técnicas de layout flutuante.
Experimente mudar alguns valores: mude para flex-wrap: nowrap e/ou
flex-direction: row-reverse. Teste diferentes combinações e veja os

resultados. Quais valores seriam necessários para conseguir o resultado da

Figura 2?

5
 Figura 2 – Exemplo de layout de colunas flexíveis

Fonte: Matias Peruyera.

TEMA 3 – LAYOUT COM GRIDS CSS

Enquanto o flexbox cuida de apenas uma dimensão do layout, os grids

em CSS pensam ao mesmo tempo em colunas e linhas.
De maneira similar ao flexbox, primeiro comece por determinar qual
elemento vai se comportar como “dono” do grid. Nesse caso, vamos usar o
elemento article. No seu CSS, apague o que você acrescentou quando falamos
de flexbox e acrescente o seguinte código:

article {
display:grid;
grid-template-columns: 33% 33% 33%;
}

O que esse código faz? O display: grid indica que o conteúdo deve se
comportar como um grid. o grid-template-columns: 33% 33% 33% indica que o
layout se divide em três colunas, de 33% de largura cada uma. Que são três
colunas é algo implícito, já que há três valores ali. Sua página HTML deve ficar
como a da Figura 3.

6
 Figura 3 – Exemplo de layout com grid

Fonte: Matias Peruyera.

O grid trouxe uma nova unidade de medida: fr. Essa unidade representa
uma fração do espaço disponível. Ou seja, em vez de ter calculado a
porcentagem de cada coluna, seria possível ter usado a linha grid-template-
columns: 1fr 1fr 1fr. O resultado seria o mesmo.

Vamos tentar reproduzir o layout que fizemos anteriormente. Para isso,

vamos primeiro trabalhar com um grid de duas colunas. O código é quase óbvio,
mas vamos te mostrar mesmo assim:

article {
display:grid;
grid-template-columns: 1fr 1fr;
}

Então, precisamos indicar que o elemento header ocupará a largura

inteira. No caso, não vamos indicar isso, e sim que ele vai ocupar duas
colunas – ou seja, a largura inteira da tela. O resultado é o mesmo, mas são
coisas diferentes.
A maneira de indicar isso é apresentar o final e o começo do elemento.
Veja:

header {
grid-column-start: 1;
grid-column-end: 3;
}

7
 Estamos indicando que começa no começo da coluna 1 e termina no
começo da coluna 3. Ou seja, duas colunas de largura. Verifique seu HTML e
compare com a Figura 4.

Figura 4 – Exemplo de layout com grid

Fonte: Matias Peruyera.

3.1 Quando usar cada tipo de layout?

Resumindo, flexbox é útil quando precisamos controlar o layout dentro de

uma coluna ou linha, e grid é útil quando precisamos controlar as colunas e as
linhas ao mesmo tempo (MDN, 2021). Camilo Micheletto (2020) complementa:
se você está usando mais de um container flex para organizar elementos em um
layout, provavelmente um deles deveria ser grid. Se você precisa aplicar diversas
propriedades nos elementos filhos para ter maior controle do layout, você
provavelmente deveria estar fazendo isso com grid.

8
 Ele ainda menciona a vantagem de usar grid ao ter que criar media
queries – explicando rapidamente, opções de CSS para diferentes tipos de telas
–, já que será necessário modificar menos elementos.
Por isso, é importante conhecer as várias maneiras de trabalhar, para
saber aproveitar o melhor de cada uma delas, tendo como resultado um código
limpo, prático e funcional.

TEMA 4 – BACKGROUNDS

Determinar o fundo de um elemento é um recurso importantíssimo para o

web design. Ele é armazenado como parte do estilo do elemento, então, não
interfere no conteúdo do HTML. Você já viu como escolher a cor de fundo de um
elemento, mas há muito mais possibilidades.
Vamos deixar de lado nosso site de receitas. Prepare um arquivo HTML
com apenas isso dentro do body:

<div class= testesfundo></div>

No arquivo CSS, crie dois seletores separados para a class testesfundo.

Um deixará o elemento sempre do mesmo tamanho e com uma borda, para que
você possa apreciar e comparar os resultados. No outro, você irá modificando
as propriedades e valores do fundo:

.testesfundo {
margin:20px;
height:600px;
width:600px;
}

.testesfundo {
background: tomato;
}

Você precisará mudar apenas o arquivo CSS – lembre de verificar que

estejam na mesma pasta, com o nome correto, e que o link, que deveria estar
no head, funcione corretamente.

9
 4.1 Cores

Vamos começar pela cor. Isso você já sabe como fazer. Para esses
exemplos, vamos determinar as cores usando nomes, para facilitar. Mas você
pode usar qualquer outra maneira mais precisa.

body {
background: tomato;
}

Também é possível indicar a cor da seguinte maneira:

background-color: tomato;

Qual a diferença? A propriedade background-color se refere à cor do

fundo, apenas. A propriedade background espera receber toda uma série de
valores para determinar como será o fundo (Paz, 2021, p. 99). Aqui, será usada
a propriedade background, que agrupará todas as definições de como deve ser
o fundo de determinado elemento.

4.2 Gradientes

Mais recentemente foram implementadas soluções para trabalhar com

gradientes em CSS, usando apenas código. Antigamente, seria usada uma
imagem de um gradiente com um pixel de largura, que seria repetida na largura
ou no comprimento. Modifique o seu CSS dessa maneira:

.testesfundo {
background: linear-gradient(blue, pink);
}

O resultado deverá ser como o da Figura 5.

10
 Figura 5 – Gradiente em CSS

Fonte: Matias Peruyera.

Por padrão, ele vai de cima para baixo. Podemos indicar que ele vá da
esquerda para a direita:

background: linear-gradient(to right, blue, magenta);

ou do canto superior esquerdo para o inferior direito:

background: linear-gradient(to bottom right, blue, magenta);

ou, ainda, especificar uma inclinação em graus, o que resulta na Figura 6:

background: linear-gradient(30deg, blue, magenta);

Figura 6 – Gradiente em CSS

Fonte: Matias Peruyera.

11
 Observe que aqui estamos usando apenas duas cores, mas um gradiente
pode ter várias. Basta enumerá-las. Experimente! O resultado não
necessariamente é agradável, mas a técnica pode ser muito útil.

TEMA 5 – COMBINANDO VÁRIAS PROPRIEDADES DO BACKGROUND

Os gradientes também podem ser compostos de cores transparentes ou

apenas de uma indicação de transparência total:

background: linear-gradient(blue, transparent);

que você já pode imaginar como vai ficar. Mas a parte divertida é combinar com
outras propriedades do fundo:

background: linear-gradient(blue, transparent), green;

Nesse código, além do gradiente, você está especificando a cor de fundo,

no caso, green. É como se você tivesse especificado background-color: green,
mas juntando tudo. Compare os resultados na Figura 7.

Figura 7 – Gradientes em CSS com transparência

Fonte: Matias Peruyera.

Sobrepor vários fundos pode ser bem poderoso. Teste este código e veja
o que acontece. Repare que começamos a quebrar as linhas, para facilitar a
compreensão do código.

.testesfundo {
background:

12
 linear-gradient(blue, transparent),
linear-gradient(to right, gold, red);
}

A princípio, os gradientes variam as cores de maneira uniforme. Mas é

possível indicar em qual porcentagem ou quantidade de pixels do “caminho”
queremos que a cor seja mais ou menos intensa. Vamos acrescentar essa
indicação ao código que gerou a Figura 5. Compare com a Figura 8.

linear-gradient(blue 70%, magenta);

Figura 8 – Gradiente em CSS

Fonte: Matias Peruyera.

E com esse valor é que podemos usar os gradientes não para fazer
gradientes, mas para fazer listras. Se a partir da segunda cor você indicar duas
porcentagens, você estará indicando o começo e o fim da listra. Copie o seguinte
código e compare o resultado com a Figura 9:

linear-gradient(blue 70%, magenta 70% 100%);

Figura 9 – Gradiente em CSS sendo usado para formar listras

Fonte: Matias Peruyera.

13
 É possível combinar várias dessas técnicas para conseguir resultados
mais complexos. Vamos te apresentar um exemplo baseado no trabalho de
Bennett Feely (2018). Recomendamos que você visite o link disponível nas
referências para mais aplicações interessantes dessas técnicas.

.testesfundo {
background:
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 25%,
dodgerblue 0,
dodgerblue 50%
),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 25%,
tomato 0,
tomato 50%
);
background-blend-mode: multiply;
background-size: 80px 80px;
}

É uma combinação de tudo o que você viu até agora, e mais duas novas
propriedades. O resultado é a Figura 10.

Figura 10 – Combinação de gradientes em CSS formando uma textura

Fonte: Matias Peruyera.

A primeira propriedade nova que exploramos aqu é background-blend-

mode, que controla a maneira como as cores se mesclam ao se sobrepôr – como

14
 as camadas do Photoshop. Essa maneira de mesclar as cores não é
exclusividade do background, então, saiba que pode ser útil em outras ocasiões.
A outra é o background-size, que determina o tamanho de cada “unidade” do
background.

TROCANDO IDEIAS

Realmente é necessário trabalhar dessa maneira? Não é mais fácil fazer

no Photoshop? Discuta com seus colegas sobre quais as vantagens e
desvantagens dessas técnicas, principalmente no que se refere ao trabalho com
código em comparação com o trabalho com softwares de diagramação e
ilustração.

NA PRÁTICA

Você já tem quase tudo o que é necessário para produzir seu portfólio.
Agora que você sabe produzir layouts usando CSS, pode começar a produzir o
seu portfólio. Se for uma única página, tranquilo. Se forem várias, produza um
template e vá duplicando os arquivos e mudando o conteúdo. Lembre-se de
manter todo o CSS em um único arquivo, e de explorar as técnicas de resetar o
CSS caso queira descobrir técnicas mais complexas.

FINALIZANDO

Nesta aula você viu brevemente como trabalhar com várias maneiras de
produzir um layout em CSS. Considere que, mais do que ensinar, mostramos a
você o caminho: há muitas possibilidades, opções, técnicas e – claro
– gambiarras para conseguir o que você quer ou precisa. Tome isso como ponto
de partida, tenha sempre à mão referências de HTML e CSS para consultas
eventuais, e conheça o verdadeiro potencial dessas técnicas.

15
 REFERÊNCIAS

FEELY, B. Advanced effects with CSS background blend modes. Boston:

LogRocket, 2018. Disponível em: <https://blog.logrocket.com/advanced-effects-
with-css-background-blend-modes-4b750198522a/>. Acesso em: 25 ago. 2021.

MDN Contributors. Relationship of grid layout to other layout methods. MDN Web
Docs. Mozilla, 2021. Disponível em: <https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout>. Acesso
em: 25 agos. 2021.

MICHELETTO, C. Quando utilizar CSS Grid ou Flexbox? Dicas de um

Desenvolvedor Frontend. Brasil: Le Wagon, 2020. Disponível em:
<https://www.lewagon.com/pt-BR/blog/css-grid-ou-flexbox>. Acesso em: 25 ago.
2021.

PAZ, M. Web Design. Curitiba: Intersaberes, 2021.

16