Explorando Backgrounds com Tailwind - Parte 2

Saudações, caro leitor! Estamos de volta, com mais aprendizado envolvendo o Background e o Tailwind CSS! Na última vez você aprendeu os conceitos básicos de Background Color e Background Clip.

No artigo de hoje, continuaremos os nossos estudos explorando o Background Image e outros conceitos que giram em torno dele. Recomendamos como base a leitura do artigo anterior, que aborda alguns conceitos que utilizaremos aqui, para caso haja qualquer dúvida.

Revisando

No artigo anterior, criamos uma aplicação que foi utilizada para praticar as funcionalidades que o Background pode nos proporcionar. Continuaremos com o mesmo exemplo como base, que possui o seguinte código:

No container principal, temos as seguintes classes:

• w-full - fixa a largura do contêiner para 100% do tamanho da largura disponível;
• h-screen - define a altura do contêiner para 100% da altura da viewport (ou seja, 100% da tela disponível para visualização);
• grid - habilita a organização dos elementos internos no formato grade/tabela;
• grid-cols-2 - define que a grade/tabela que estamos criando terá duas colunas;
• grid-rows-2 - define que a grade/tabela que estamos criando terá duas linhas;
• gap-1 - cria um espaçamento externo de 4px entre os elementos do contêiner principal;
• p-1 - cria um espaçamento interno de 4px para o contêiner principal.
  

Feito aquele resumo digno de esquentar os motores, estamos prontos para continuar os estudos!

Background Image

Enquanto o Background Color permite a inserção de uma cor ao fundo, o Background Image nos permite o uso de gradientes de cores e, até mesmo imagens no fundo de um elemento. Vamos entender melhor sobre como implementar ambas as possibilidades?

Gradientes Lineares

O primeiro passo para criarmos um efeito gradiente em um background é informar a direção que sua linearidade ocorrerá. Escolha uma das classes abaixo para isto:

• bg-gradient-to-t - apenas para o topo;
• bg-gradient-to-tr - para o topo e para a direita;
• bg-gradient-to-r - apenas para a direita;
• bg-gradient-to-br - para baixo e para a direita;
• bg-gradient-to-b - apenas para baixo;
• bg-gradient-to-bl - para baixo e para a esquerda;
• bg-gradient-to-l - apenas para esquerda;
• bg-gradient-to-tl - para o topo e para a esquerda.
  

Após escolher a direção, definimos a cor que o gradiente irá começar, inserindo o “from-” e uma classe de cor existente no Tailwind. Depois, definimos a cor que ele terminará, inserindo o “to-” e uma classe de cor existente. Desta forma, temos a seguinte notação:

bg-gradient-{direção} from-{cor} to-{cor}

Que tal criarmos, para cada elemento que temos no nosso projeto, uma direção diferente para um efeito gradiente com cores iguais?

Também é possível adicionar mais de duas imagens dentro da gradiência. Para isto, utilizamos o prefixo “via-” e o nome da classe que contém a cor. Veja o exemplo:

Imagens

Existem duas maneiras de inserirmos imagens ao fundo de um elemento. A primeira (que é semelhante à que utilizamos para adicionar uma nova cor que não existia no Tailwind) é criar um objeto chamado “backgroundImage” dentro do objeto “extend” do nosso Tailwind.config, onde a chave será o nome da classe criada e o valor será o endereço onde se encontra a imagem:

Também podemos adicionar imagens direto no elemento, ao invés de criar uma nova classe no Tailwind.Config:

Ao executar qualquer um dos códigos da Figura 7 ou 8, Você deve ter notado que apenas uma pequena fração de cada imagem foi exibida no fundo do elemento, como ocorre na Figura 9:

Este efeito acontece porque, por padrão, a imagem não é adaptada ao tamanho do elemento, extrapolando a exibição. Aprenderemos a seguir como resolver este problema.

Background Size

O Background Size compõe o conjunto de classes que definem o tamanho da imagem de fundo de um elemento. São elas:

• bg-auto - exibe a imagem de fundo em seu tamanho padrão (quando não utilizamos uma destas três classes, é o comportamento padrão);
• bg-cover - dimensiona a imagem de fundo e a amplia de forma que ela preencha todo o elemento;
• bg-contain - dimensiona a imagem de fundo dentro do elemento sem ampliar suas dimensões.
  

No exemplo a seguir, utilizaremos apenas duas imagens para os quatro contêineres internos, para que possamos analisar o comportamento das classes “bg-cover” e “bg-contain”:

Conseguiu notar a diferença? Enquanto a classe “bg-cover” teve de parte de si dispensada para se adaptar a todo o elemento, a classe “bg-contain” não faz isso, adaptando a imagem dentro do elemento sem perder nada. Note que, ao usar o “bg-contain”, a imagem se repetiu para preencher o espaço que ficaria vazio. Esta é outra característica que podemos definir e aprenderemos sobre ela a seguir.

Background Repeat

Por meio do Background Repeat podemos definir se queremos que uma imagem de Background seja repetida e como ela deve fazer isto. Podemos utilizar as seguintes classes para tal:

• bg-repeat - habilita a repetição de uma imagem no fundo de um elemento (repetir a imagem de fundo é o comportamento padrão);
• bg-no-repeat - desabilita a repetição de uma imagem no fundo de um elemento;
• bg-repeat-x - define a repetição apenas no eixo x;
• bg-repeat-y - define a repetição apenas no eixo y;
• bg-repeat-round - quanto mais o espaço aumentar, mais imagens repetidas serão adaptadas até que haja espaço para que outra seja adicionada; ao adicionar uma nova, as demais se compactam para permitir um espaço para ela;
• bg-repeat-space - permite que a imagem seja repetida tanto quanto for possível e sem recortes, sendo o espaço em branco distribuído uniformemente entre as imagens repetidas.
  

No exemplo a seguir, utilizamos a funcionalidade de repetição e não repetição nos contêineres internos:

Background Position

Podemos com o uso do Background Position definir a partir de qual posição uma imagem é exibida no fundo de um elemento. As possibilidades são:

• bg-bottom - a exibição será feita a partir da parte de baixo da imagem;
• bg-center - o centro da imagem será exibido;
• bg-left - a imagem será exibida a partir do seu lado esquerdo;
• bg-left-bottom - a exibição será feita a partir da parte de baixo e à esquerda da imagem;
• bg-left-top - a exibição será feita a partir da parte de cima e à esquerda da imagem;
• bg-right - a exibição começa a partir da parte direita da imagem;
• bg-right-bottom - a exibição será feita a partir da parte de baixo e à direita da imagem;
• bg-right-top - a exibição será feita a partir da parte de cima e à direita da imagem;
• bg-top - a imagem será exibida a partir da parte de cima da imagem.
  

Para praticar e verificar o comportamento de algumas destas classes, utilizaremos a mesma imagem em dois elementos, mas com posicionamentos diferentes. Será usada a classe “bg-cover” para que as imagens sejam ampliadas e parte delas não apareçam, justamente para que possamos nós mesmos escolher qual parte será exibida:

Background Origin

O Background Origin funciona da mesma forma que o Background Clips, que abordamos no artigo anterior, só que um se aplica apenas para imagens/gradientes e o outro, apenas para backgrounds com uma única cor de fundo. Ou seja: O Background Origin delimita a área em que a imagem de fundo será aplicada em um elemento. Para isto, utilizamos uma das três possibilidades:

• bg-origin-border - estende a área de exibição da imagem ou gradiente do background inserido até a borda existente;
• bg-origin-padding - estende a área de exibição da imagem ou gradiente do background inserido até o espaçamento interno, mas sem atingir a borda;
• bg-origin-content - estende a área de exibição da imagem ou gradiente do background inserido até o conteúdo do elemento em questão, mas sem atingir o espaçamento interno.
  

Como exemplo, utilizaremos nos três primeiros contêineres internos uma das classes apresentadas para manipulação do Background Origin, aplicando a classe “bg-no-repeat” para que não sejam preenchidos os espaçamentos sem background e possamos notar a diferença entre cada uma delas:

Background Attachment

Por fim, e não menos importante, temos o Background Attachment, que permite que controlemos como uma imagem de fundo se comporta durante a rolagem. Existem três classes que podemos definir este comportamento:

• bg-fixed - a imagem de fundo fica fixa em relação à viewport, sem subir ou descer de acordo com a rolagem;
• bg-local - a imagem de fundo é exibida de acordo com o contêiner e a janela de visualização (é o comportamento padrão de exibição);
• bg-scroll - a imagem de fundo é exibida de acordo com a viewport, mas não em relação ao contêiner.
  

Observe o código a seguir:

No código da Figura 18, criamos dois contêineres dentro de um contêiner principal, onde cada um tem o mesmo conteúdo, com a diferença de que um utiliza a classe “bg-local” e o outro a classe “bg-fixed”. Note a diferença de comportamento entre as imagens de fundo:

Considerações Finais

Chegamos ao fim de uma grande jornada, onde detalhamos Background do CSS aplicado ao Tailwind. Depois de ler os dois artigos que envolvem este conceito, você aprendeu como utilizar as funcionalidades principais aplicadas a esse framework, sendo capaz de fazer coisas incríveis a partir de agora. Que tal deixar aqui nos comentários qual foi o conceito que você mais gostou dentro do Background? Aguardamos ansiosamente por sua resposta!

Se você achou esse artigo interessante, gostaria de tirar quaisquer dúvidas ou somente está afim de trocar uma ideia sobre esses e mais assuntos, você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do Linkedin!

Te espero ansiosamente!