Crie Fundos Quadriculados Impressionantes com CSS

Introdução

Neste laboratório, exploraremos a programação CSS para criar um padrão de fundo quadriculado (checkerboard). Você aprenderá a usar técnicas de gradiente CSS para projetar um padrão quadriculado visualmente atraente que pode aprimorar vários projetos web. O padrão quadriculado é um elemento de design clássico, consistindo em quadrados coloridos alternados dispostos em uma grade, semelhante a um tabuleiro de xadrez.

Ao concluir este laboratório, você obterá experiência prática com backgrounds CSS, gradientes e criação de padrões - habilidades valiosas para o design web moderno.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível intermediário com uma taxa de conclusão de 80%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Compreendendo os Arquivos do Projeto

Antes de começarmos a criar nosso padrão quadriculado, vamos examinar os arquivos do projeto que foram fornecidos na VM.

Abra o arquivo index.html no editor, clicando nele no painel do explorador de arquivos.

O arquivo HTML inicial deve ser semelhante a este:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- You will add your code here -->
  </body>
</html>

Agora, abra o arquivo style.css no editor.

O arquivo CSS inicial deve estar vazio ou conter estilos mínimos:

/* CSS styles will be added here */

Vamos iniciar nosso servidor de desenvolvimento para ver o estado inicial de nossa página web.

Para visualizar sua página web no navegador, clique no botão "Go Live" no canto inferior direito do editor. Isso iniciará um servidor ao vivo e exibirá sua página web na aba Web 8080.

Você deve ver uma página em branco neste ponto, pois ainda não adicionamos nenhum conteúdo ou estilos.

Criando a Estrutura HTML

Agora que entendemos nossos arquivos de projeto, vamos criar a estrutura HTML para o nosso padrão quadriculado.

Abra o arquivo index.html no editor novamente.
Precisamos adicionar um elemento container para o nosso padrão quadriculado. Dentro da tag <body>, substitua o comentário por um elemento <div> que tenha a classe "checkerboard":

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

Salve o arquivo index.html pressionando Ctrl+S ou clicando em File > Save.
Agora, vamos adicionar algum CSS básico para definir as dimensões do nosso quadriculado. Abra o arquivo style.css e adicione o seguinte código:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

Este código CSS faz o seguinte:

Define a largura e a altura do nosso quadriculado para 240 pixels
Define a cor de fundo para branco (#fff)

Salve o arquivo style.css.
Atualize a aba Web 8080 para ver as alterações.

Você deve agora ver um quadrado branco com uma largura e altura de 240 pixels. Esta será a tela para o nosso padrão quadriculado.

Criando o Primeiro Gradiente

Agora, vamos começar a criar nosso padrão quadriculado usando gradientes CSS. Vamos adicionar o primeiro gradiente linear para criar parte do padrão.

Compreendendo os Gradientes Lineares CSS

Os gradientes lineares CSS permitem que você crie transições suaves entre duas ou mais cores em linha reta. A função linear-gradient() recebe um ângulo e uma série de paradas de cor (color stops) como parâmetros. Usaremos essa técnica para criar nossos quadrados quadriculados.

Siga estes passos:

Abra o arquivo style.css.
Vamos modificar nossa classe .checkerboard para incluir o primeiro gradiente linear:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
    45deg,
    #000 25%,
    transparent 25%,
    transparent 75%,
    #000 75%,
    #000
  );
  background-size: 60px 60px;
}

Deixe-me explicar o que este gradiente faz:

45deg especifica o ângulo do gradiente
#000 25% cria uma cor preta de 0% a 25% do espaço disponível
transparent 25% cria uma cor transparente começando em 25%
transparent 75% mantém a cor transparente até 75%
#000 75% transiciona de volta para preto em 75% e continua até o fim
background-size: 60px 60px define o tamanho de cada célula de gradiente repetida

Salve o arquivo style.css.
Atualize a aba Web 8080 para ver as alterações.

Você deve agora ver um padrão começando a se formar, mas ainda não é um quadriculado completo. O primeiro gradiente cria apenas uma porção do padrão. No próximo passo, adicionaremos um segundo gradiente para completar o quadriculado.

Completando o Padrão Quadriculado

Agora, vamos adicionar o segundo gradiente linear para completar nosso padrão quadriculado e torná-lo repetível em todo o elemento.

Abra o arquivo style.css novamente.
Modifique a classe .checkerboard para incluir um segundo gradiente linear que criará o padrão alternado:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    ),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

O que adicionamos:

Um segundo linear-gradient() que é semelhante ao primeiro, mas com um ângulo de -45deg para criar o padrão alternado
A propriedade background-repeat: repeat garante que os padrões se repitam em todo o elemento

A combinação desses dois gradientes em ângulos diferentes cria o clássico padrão quadriculado. O primeiro gradiente cria um conjunto de quadrados diagonais, enquanto o segundo gradiente cria outro conjunto que preenche as lacunas.

Salve o arquivo style.css.
Atualize a aba Web 8080 para ver o resultado final.

Você deve agora ver um padrão quadriculado completo com quadrados pretos e brancos alternados. O padrão deve se repetir em todo o elemento de 240px por 240px.

Como o Padrão Funciona

O efeito quadriculado é criado por:

Usando dois gradientes lineares com ângulos opostos (45deg e -45deg)
Cada gradiente cria um padrão de quadrados pretos nos cantos
As áreas transparentes permitem que o fundo branco apareça
A propriedade background-size controla o tamanho de cada quadrado no padrão
A propriedade background-repeat faz com que o padrão se repita em todo o elemento

Esta técnica demonstra o poder dos gradientes CSS para criar padrões complexos sem a necessidade de arquivos de imagem, resultando em tempos de carregamento mais rápidos e melhor escalabilidade.

Resumo

Parabéns por completar o laboratório do Padrão de Fundo Quadriculado. Neste laboratório, você:

Criou uma estrutura HTML para hospedar seu padrão quadriculado
Aprendeu a usar gradientes lineares CSS para criar padrões
Combinou múltiplos gradientes em diferentes ângulos para criar um efeito quadriculado
Aplicou propriedades de dimensionamento e repetição para aperfeiçoar o padrão

Este padrão quadriculado demonstra uma poderosa técnica CSS que pode ser aplicada a muitos projetos de design web. A abordagem que você aprendeu - usar gradientes em vez de imagens - resulta em tempos de carregamento mais rápidos e melhor escalabilidade para suas páginas web.

Agora você pode usar esse conhecimento para criar outros padrões e efeitos visuais usando gradientes CSS. Você pode considerar experimentar com:

Cores diferentes para o quadriculado
Alterar o tamanho dos quadrados
Usar ângulos diferentes para os gradientes
Criar outros padrões geométricos como listras ou pontos

As técnicas que você aprendeu neste laboratório fornecem uma base para criar padrões de fundo sofisticados com CSS puro.