Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Layout em Grade do CSS e Quadrinhos (explicado por Barry o Gato)

by
Read Time:6 minsLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

A Grade do CSS é bem bacana para projetar histórias em quadrinhos online, especialmente se quisermos que sejam flexíveis. Nesse tutorial, usaremos Barry, o gato, para demonstrar como criar um quadrinho responsivo.

Barry o Gato

Para o tutorial, peguei algumas artes no GraphicRiver. Sleepy Fat Cat é uma fonte de exibição, mas vem com adoráveis vetores de gatos–perfeito para essa demo!

Sleepy Fat Cat on GraphicRiver
Fonte Sleepy Fat Cat, no GraphicRiver

Preparando o Navegador

Não esqueçamos que é preciso um navegador de ponta para ver a Grade do CSS em ação, então, leia Layout em Grade do CSS: Um Guia de Início Rápido se o seu não suportar. Eis o que tentaremos criar:

Veja a demo completa no CodePen e como ela responde aos diferentes tamanhos de tela.

1. Marcação HTML

Comecemos criando algum HTML:

Aqui temos um <section> agindo como nossa grade e vários <div class="panel"> sendo nossos itens de grade.

Alguns paineis tem texto neles, mas o resta será para as imagens dos quadrinhos. Temos duas opções: podemos adicionar nossas imagens em linha, dentro dos painéis, ou através do CSS. Faremos o último porque o controle é maior no posicionamento e dimensionamento dos gráficos, mas há quem diga que imagens em linha são mais acessíveis. Faça sua escolha.

2. Estilos Básicos

Para a bola (de pelos) continuar rolando, adicionemos alguns estilos, cobrindo a tipografia e cores:

Vamos de Kalam, uma fonte web do Google, para nosso texto–estilo escrita à mão é perfeito para quadrinhos. Precisamos adicioná-la no CSS ou em um link no cabeçalho do documento:

KalamKalamKalam
Kalam no Google Fonts

3. Nossa Grade

Começando pelo mobile, posicionaremos as coisas em uma coluna com um único painel em cada linha:

Olhando nossos tutoriais anteriores sobre Grade, talvez lembre que grid-template-columns diz quantas colunas teremos e o quão largas serão. grid-template-rows faz o mesmo para linhas e definiremos onze delas. As que contem imagens terão 200px de altura e as contendo texto serão dimensionadas automaticamente pelo conteúdo. Por fim, grid-gap definirá nosso espaçamento.

Adicionemos estilos gerais aos nossos painéis:

As propriedades background não causam qualquer impacto visual ainda, mas causarão assim que adicionarmos as imagens. E a box-shadow agem como borda. Também podemos usar a propriedade border, mas a box-shadow costuma dar mais flexibilidade.

Vejamos o que temos até agora!

4. Imagens de Gatos

A internet existe para que mesmo, não é? Preparei alguns imagens SVG para adicionar aos painéis, uma-a-uma:

Parece bom!

Mas não queremos bordas ao redor de todos os painéis. Removeremo-nos (usando box-shadow: none;) dos que contem texto, além do da primeira e última imagens.

5. Consultas de Mídia

Essas imagens ainda não estão perfeitas... Pobre Barry, ficando todo cortado. É hora de ir além do mobile e alterar nossa grade para áreas de visualização maiores. Adicionemos alguns consultas de mídia: uma em 400px e outra em 600px (valores arbitrários, use os que quiser):

Nós os usaremos pra alterar o layout da grade em cada caso.

Usaremos duas colunas e dez linhs para telas um pouco maiores e três colunas e cinco linhas para ainda maiores.

Abrangendo

Agora que não estão presos a uma única coluna, podemos ser mais criativos. Precisamos, por exemplo, que o título tome toda a largura do quadrinho. O mesmo é verdadeiro do texto dos painéis e da nota sobre direitos de cópia. Mesmo algumas imagens seriam melhor com toda a largura dos painéis. Assim, adicionaremos esses detalhes à primeira consulta de mídia:

Mudamos a tipografia em alguns lugares, também. No final, temos isso:

Nosso layout de duas colunas está ótimo! Porém, o de três precisa de ajustes.

Está quase funcionando...

6. Ajustando o Layout de Três Colunas

Como colocamos o mobile primeiro, as regras aplicadas à nossa primeira consulta de mídia ainda se aplicam a telas maiores. Precisamos trabalhar os painéis e resetar alguns estilos.

Comecemos fazendo .panel-title tomar três colunas ao invés de duas. Assim, .panel-3 (com texto) pode voltar para grid-column: span 1; ou grid-column: auto;

O mesmo se aplica a .panel-6. Com mais algumas mudanças, devemos ter algo assim:

Um Pouquinho de Flexbox

Queremos que o primeiro diálogo seja centralizado verticalmente, então usamos flexbox para isso. Adicionemos isso à segunda consulta de mídia:

before flexbox after flexboxbefore flexbox after flexboxbefore flexbox after flexbox
Antes e depois dos flexbox

7. Sobrepondo Painéis

A Grade não nos restringe a blocos equidistantes seguindo o fluxo da página. Também podemos sobrepor os painéis. Tornaremos o texto final um pouco mais interessante, atribuindo à mesmo localização da grade que o próximo painel:

Aqui, posicionamos ambos .panel-7 e .panel-8 em grid-column: 1; e grid-row: 4;. Isso significa que ambos ocupam o mesmo espaço e o que vem por último no DOM aparece em cima do primeiro.

Podemos usar z-index para alterar a ordem de pilhagem, assim, dando z-index: 1; para .panel-7, ele vem para frente:

Nota: como removemos uma linha, precisamos checar se grid-template-rows está certa.

Adicionemos mais um pouco de estilo ao "Naaah". De novo, os itens de grade não são tão restritos quanto se pensa–podemos mexê-los com margens negativas e até transformações, sem problemas. Adicionando mais alguns estilos ao painel e parágrafos dentro dele, obtemos:

Conclusão

Muito bem–eis o que construímos!

Um exercício legal para usar a Grade do CSS além de introduzir alguns novos conceitos ao mesmo tempo. Espero que tenha curtido–se não se importar, tirarei um cochilo agora.

Leitura Adicional

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.