impressao (7)

Prévia do material em texto

WEB DESIGN 
AULA 4 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Prof. Matias Peruyera 
 
 
2 
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. 
 
 
3 
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”. 
 
 
 
4 
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 
 
 
5 
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? 
 
 
 
6 
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. 
 
 
 
7 
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; 
} 
 
 
8 
Estamos indicando que começa no começo da coluna 1 e termina no 
começo da coluna 3. Ouseja, 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. 
 
 
9 
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: 
 
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. 
 
 
10 
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. 
 
 
 
11 
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. 
 
 
12 
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: 
 
 
13 
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. 
 
 
14 
É 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 
 
 
15 
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. 
 
 
 
16 
REFERÊNCIAS 
FEELY, B. Advanced effects with CSS background blend modes. Boston: 
LogRocket, 2018. Disponível em: . Acesso em: 25 ago. 2021. 
MDN Contributors. Relationship of grid layout to other layout methods. MDN Web 
Docs. Mozilla, 2021. Disponível em: . 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: 
. Acesso em: 25 ago. 
2021. 
PAZ, M. Web Design. Curitiba: Intersaberes, 2021.