CSS

Aviso: Este post foi traduzido para o português usando um modelo de tradução automática. Por favor, me avise se encontrar algum erro.

Partes do CSS (seletor, propriedades, valores)

Em CSS, podem falar de 3 partes principais:

• Seletor: É a parte que seleciona o elemento ao qual será aplicado o estilo.
• Propriedade: É a parte que define o estilo que será aplicado ao elemento.
• Valor: É a parte que define o valor da propriedade que será aplicada ao elemento.

Para adicionar comentários em CSS usa-se /* comentário */.

A linha que tem propriedade: valor; é chamada de **declaração**.

seletor {
propriedade: valor;   /* comentário */
}

Seletores

Há vários tipos de seletores:

• Seletor universal: Seleciona todos os elementos da página. Utiliza o asterisco *.
• Seletor de tipo: Seleciona todos os elementos de um tipo. Utiliza o nome do tipo de elemento. Por exemplo, p seleciona todos os parágrafos.
• Seletor de classe: Seleciona todos os elementos que tenham uma classe. Utiliza o nome da classe. Por exemplo, .classe seleciona todos os elementos que tenham a classe clase. Isso é útil, porque se quisermos que todos os botões sejam iguais, no HTML colocamos <button class="botao"> e no CSS colocamos .botao { /* estilos */ }. Assim, todos os botões terão os mesmos estilos, e se quisermos que um botão seja diferente, adicionamos outra classe.
• Seletor de pseudo-classe: Seleciona todos os elementos que tenham uma pseudo-classe. Utiliza-se o nome da pseudo-classe. Por exemplo, :hover seleciona todos os elementos que estejam sendo selecionados pelo mouse. Isso é útil, porque se quisermos que um botão mude de cor quando o mouse estiver em cima, no CSS colocamos .botao:hover { /* estilos */ }. Assim, o botão terá os estilos desejados quando o mouse estiver em cima. Algumas pseudo-classes são:
• :hover: Seleciona todos os elementos que estão sendo selecionados pelo mouse.
• :active: Seleciona todos os elementos que estão sendo selecionados pelo mouse e estão sendo pressionados.
• :focus: Seleciona todos os elementos que estão sendo selecionados pelo mouse e pressionados, e além disso, tenham o foco.
• :first-child: Seleciona todos os elementos que sejam o primeiro filho de seu pai. Isso é útil, por exemplo, com os <li> das listas, porque se quisermos que o primeiro elemento da lista tenha um estilo diferente, no css colocamos li:first-child { /* estilos */ }. Assim, o primeiro elemento da lista terá os estilos que desejarmos.
• :last-child: Seleciona todos os elementos que sejam o último filho de seu pai. Isso é útil, por exemplo, com os <li> das listas, porque se quisermos que o último elemento da lista tenha um estilo diferente, no css colocamos li:last-child { /* estilos */ }. Assim, o último elemento da lista terá os estilos que desejarmos.
• :nth-child(n): Seleciona todos os elementos que sejam o n-ésimo filho de seu pai. Por exemplo, :nth-child(2) seleciona todos os elementos que sejam o segundo filho de seu pai.
• :nth-last-child(n): Seleciona todos os elementos que sejam o n-ésimo filho de seu pai, começando do final. Por exemplo, :nth-last-child(2) seleciona todos os elementos que sejam o segundo filho de seu pai, começando do final.
• :nth-of-type(n): Seleciona todos os elementos que sejam o n-ésimo filho de seu pai, do mesmo tipo. Por exemplo, :nth-of-type(2) seleciona todos os elementos que sejam o segundo filho de seu pai, do mesmo tipo.
• :nth-last-of-type(n): Seleciona todos os elementos que sejam o n-ésimo filho de seu pai, do mesmo tipo, começando pelo final. Por exemplo, :nth-last-of-type(2) seleciona todos os elementos que sejam o segundo filho de seu pai, do mesmo tipo, começando pelo final.
• :first-of-type: Seleciona todos os elementos que sejam o primeiro filho de seu pai, do mesmo tipo.
• :last-of-type: Seleciona todos os elementos que sejam o último filho de seu pai, do mesmo tipo.
• :only-child: Seleciona todos os elementos que sejam o único filho de seu pai.
• :only-of-type: Seleciona todos os elementos que sejam o único filho de seu pai, do mesmo tipo.
• :empty: Seleciona todos os elementos que não tenham filhos.
• Selector de id: Seleciona um elemento que tenha um id. Utiliza o nome do id. Por exemplo, #id seleciona o elemento que tenha o id id. Isso é útil, porque se quisermos que um elemento seja único, no html colocamos <p id="unico"> e no css colocamos #unico { /* estilos */ }. Assim, esse elemento terá os estilos que desejarmos, e se quisermos que outro elemento seja igual, adicionamos outra classe.
• Seletores combinados: Selecionam elementos que atendam várias condições. Usamos os seletores que quisermos, separados por um espaço. Por exemplo, p .classe seleciona todos os elementos que tenham a classe clase e sejam filhos de um parágrafo. Isso é útil, porque se quisermos que todos os botões que estiverem dentro de um parágrafo sejam iguais, no HTML colocamos <p class="paragrafo_que_quero_alterar"><button class="botao"> e no CSS colocamos .paragrafo_que_quero_alterar .botao { /* estilos */ }. Assim, todos os botões que estiverem dentro de um parágrafo com a classe paragrafo_que_quero_alterar terão os mesmos estilos, e se quisermos que um botão seja diferente, colocamos outra classe.
• Seletor combinado de primeiro nível: Selecionam elementos que atendam a várias condições, mas apenas se estiverem no primeiro nível. Utilizamos os seletores que quisermos, separados por um >. Por exemplo, p > .classe seleciona todos os elementos que tenham a classe classe e sejam filhos diretos de um parágrafo. Isso é útil porque, se quisermos que todos os botões que estejam dentro de um parágrafo sejam iguais, no HTML colocamos <p class="paragrafo_que_quero_alterar"><button class="botao"> e no CSS colocamos .paragrafo_que_quero_alterar > .botao { /* estilos */ }. Assim, todos os botões que estejam dentro de um parágrafo com a classe paragrafo_que_quero_alterar terão os mesmos estilos, e se quisermos que um botão seja diferente, adicionamos outra classe.
• Seletor combinado de irmãos: Selecionam elementos que atendam várias condições, mas apenas se estiverem no mesmo nível. Utilizamos os seletores que quisermos, separados por um ~. Por exemplo, p ~ .classe seleciona todos os elementos que tenham a classe classe e estejam no mesmo nível de um parágrafo. Isso é útil porque, se quisermos que todos os botões que estejam no mesmo nível de um parágrafo sejam iguais, no HTML colocamos <p class="paragrafo_que_quero_alterar"></p><button class="botao"> e no CSS colocamos .paragrafo_que_quero_alterar ~ .botao { /* estilos */ }. Assim, todos os botões que estejam no mesmo nível de um parágrafo com a classe paragrafo_que_quero_alterar terão os mesmos estilos. Se quisermos que um botão seja diferente, damos a ele outra classe.
• Seletor de irmãos adjacentes combinados: Selecionam elementos que atendam várias condições, mas apenas se estiverem no mesmo nível e forem adjacentes. Utilizamos os seletores que quisermos, separados por um +. Por exemplo, p + .classe seleciona todos os elementos que tenham a classe clase e estejam no mesmo nível e sejam adjacentes a um parágrafo. Isso é útil, porque se quisermos que todos os botões que estejam no mesmo nível e sejam adjacentes a um parágrafo sejam iguais, no HTML colocamos <p class="parrafo_que_quiero_cambiar"></p><button class="boton"> e no CSS colocamos .parrafo_que_quiero_cambiar + .boton { /* estilos */ }. Assim, todos os botões que estejam no mesmo nível e sejam adjacentes a um parágrafo com a classe parrafo_que_quiero_cambiar terão os mesmos estilos, e se quisermos que um botão seja diferente, damos outra classe.

O normal é usar o seletor de classe, pois assim podemos reutilizar os estilos.

Estilos

Cor

O cor pode ser definido de várias maneiras:

• Nome: Pode ser colocado o nome da cor. Por exemplo, red é vermelho.
• Hexadecimal: Pode-se colocar a cor em hexadecimal. Por exemplo, #ff0000 é vermelho.

Se quiser adicionar transparência, pode-se colocar #ff000080, que é vermelho com 50% de transparência.

Se apenas são colocados 3 números, eles se repetem. Por exemplo, #f10 é o mesmo que #ff1100. Se quiser adicionar transparência, pode-se colocar #f108, que é o mesmo que #ff110088.

• RGB: Pode-se colocar a cor em RGB. Por exemplo, rgb(255, 0, 0) é vermelho.

Se quiser adicionar transparência, pode-se colocar rgb(255 0 0 / 0.5), que é vermelho com 50% de transparência. Também se pode colocar a transparência em porcentagem, rgb(255 0 0 / 50%). Pode-se encontrar a transparência de uma forma legada com rgba(255, 0, 0, 0.5), que é vermelho com 50% de transparência, mas o melhor é utilizar a forma moderna.

• HSL: Pode-se colocar a cor em HSL. Por exemplo, hsl(0, 100%, 50%) é vermelho.

• OKLCH: Pode-se colocar a cor em OKLCH. Por exemplo, oklch(0 100% 50%) é vermelho.

Em HSL e OKLCH há uma maior escala de cores em comparação com RGB, portanto, se você precisar de mais cores, é melhor usar HSL ou OKLCH.

Também é possível adicionar a transparência adicionando a declaração color:transparent.

Cor Color Atual

Há um valor de cor que é currentColor, que é a cor atual. Por exemplo, se temos um texto e configuramos sua cor para vermelho, e depois adicionamos uma borda a este texto, se colocarmos border: 1px solid currentColor;, a borda será vermelha.

p {
cor: vermelho;
borda: 1px sólida correnteColor;
}

Herança

Quando um estilo é aplicado a um elemento, esse estilo é herdado pelos elementos filhos. Por exemplo, se tivermos um div com um texto, e definirmos a cor vermelha para o div, o texto também será vermelho.

<div>
<p>Texto</p>
</div>

div {
cor: vermelho;
}

Ao fazer isso, o texto ficará vermelho.

Podemos indicar no filho quais estilos são herdados. Por exemplo, suponhamos que temos um pai e um filho

<div class="pai">
<p class="hijo">Texto</p>
</div>

.padre {
cor: vermelho;
}

.filho {
cor: inherit;
}

Ao fazer isso, o texto ficará vermelho, pois o filho herda a cor do pai.

As opções possíveis são:

• inherit: Herda o estilo do pai.
• inicial: Coloca o estilo padrão.
• unset: Reseta o estilo
• revert: Reverte o estilo

Não todos os estilos são herdados, por exemplo, o background não é herdado. Para não listar todos os estilos que são herdados, uma forma de saber é indo ao MDN e verificando se o estilo tem a propriedade Inherited definida como yes (dentro de Formal definition).

Fontes

Na hora de carregar as fontes, elas podem ser carregadas de várias maneiras:

• Local: Pode carregar uma fonte local. Por exemplo, font-family: Arial; carrega a fonte Arial.
• URL: Pode carregar uma fonte a partir de uma URL. Por exemplo, font-family: url(https://fonts.googleapis.com/css2?family=Roboto); carrega a fonte Roboto do Google Fonts.
• Genérica: Pode-se carregar uma fonte genérica. Por exemplo, font-family: sans-serif; carrega uma fonte sem serifa. Esta fonte depende do sistema operativo, então no Windows será Arial, no Mac será Helvetica e no Linux será DejaVu Sans.

Várias fontes podem ser carregadas, e se uma não estiver disponível, a próxima é carregada. Por exemplo, font-family: Arial, sans-serif; carrega Arial, e se não estiver disponível, carrega uma fonte sem serifa.

Também é possível carregar uma fonte com vários estilos. Por exemplo, font-family: Arial, sans-serif; font-weight: 700; carrega Arial em negrito, e se não estiver disponível, carrega uma fonte sem serifa em negrito.

Como sans-serif é uma fonte genérica, é ideal colocá-la por último, para que, se a fonte desejada não estiver disponível, seja carregada a genérica.

p {
font-family: url(https://fonts.googleapis.com/css2?family=Roboto), url(https://fonts.googleapis.com/css2?family=Roboto+Slab), Ubuntu, sans-serif;
}

Borda e Contorno

Podemos colocar uma borda em um elemento com border: 1px solid red;. Isso coloca uma borda de 1px de espessura, sólida e vermelha.

Se quisermos colocar uma borda, podemos usar outline: 1px solid red;. Isso coloca uma borda de 1px de espessura, sólida e vermelha.

A diferença entre border e outline é que border ocupa espaço, e outline não. Por exemplo, se tivermos um div com um texto, e colocarmos uma borda, o texto se moverá para que a borda fique visível. Se colocarmos um contorno, o texto não se moverá, porque o contorno não ocupa espaço. Isso pode ser observado se alterarmos o estilo na pseudo-classe :hover. Se colocarmos uma borda, quando passarmos o mouse por cima, o texto se moverá, mas se colocarmos um contorno, o texto não se moverá.

Cachoeira

A cascata é a ordem na qual os estilos são aplicados. A ordem é:

1. Estilos do usuário: São os estilos que o usuário configurou. Por exemplo, se o usuário tiver configurado que o texto seja de cor vermelha, o texto será vermelho.
2. Estilos do autor: São os estilos que o autor configurou. Por exemplo, se o autor configurou que o texto seja de cor azul, o texto será azul.
3. Estilos do navegador: São os estilos do navegador. Por exemplo, se o navegador estiver configurado para que o texto seja de cor verde, o texto será verde.

Prevalecem os estilos do usuário sobre os do autor, e os do autor sobre os do navegador.

Mas dentro dos estilos do autor, prevalecem os estilos que estão mais abaixo no código. Por exemplo, se tivermos um div com um texto, e colocarmos a cor vermelha, e depois colocarmos a cor azul, o texto será azul.

<div>
<p>Texto</p>
</div>

div {cor: vermelho;
}

div {
cor: azul;
}

Neste exemplo, o texto será azul. O cor vermelha é substituída pela cor azul.

Fallback

Um dos benefícios da cascata é que podemos aplicar um estilo muito novo, mas caso o navegador que o usuário esteja utilizando não o suporte, podemos definir um estilo mais antigo antes como precaução. Por exemplo, estilizar a cor com oklch é algo novo, que pode não ser suportado pelo navegador do usuário, por isso podemos definir um estilo mais antigo antes como precaução.

p {
cor: rgb(255, 0, 0);
color: oklch(0 100% 50%);
}

Desta forma, o navegador primeiro tentará estilizar com oklch, e se não puder, estilizará com rgb.

Especificidade

Pode ser que um elemento HTML tenha várias formas de se referir a ele. Por exemplo

<p class="clase" id="id">Texto</p>

p {
cor: vermelho;
}

.classe {
cor: azul;
}

#id {
cor: verde;
}

Neste exemplo, o texto será verde. Isso ocorre porque o seletor de id tem mais especificidade que o seletor de classe, e o seletor de classe tem mais especificidade que o seletor de tipo. Portanto, o seletor de id sobrescreve o seletor de classe, e o seletor de classe sobrescreve o seletor de tipo.

Se tivéssemos no CSS

p {
cor: vermelho;
}

p.classe {
cor: azul;
}

O texto seria azul. Isso acontece porque o seletor de classe tem mais especificidade que o seletor de tipo, portanto, o seletor de classe sobrescreve o seletor de tipo.

Os estilos inline têm mais especificidade que os estilos do autor. Por exemplo

<p style="color: red;">Texto</p>

p {
cor: azul;
}

Neste exemplo, o texto será vermelho. Isso ocorre porque o estilo inline tem mais especificidade que o estilo do autor.

Se colocar !important no final da declaração, essa declaração terá mais especificidade do que qualquer outra. Por exemplo

<p class="clase" id="id">Texto</p>

p {
cor: vermelho;
}

.classe {
cor: azul;
}

#id {
cor: verde;
}

p.classe {
cor: amarelo !important;
}

Neste exemplo, o texto será amarelo. Isso acontece porque a declaração com !important tem mais especificidade do que qualquer outra.

Unidades

Unidades de comprimento

Unidades absolutas

Se quisermos definir um tamanho fixo, podemos utilizar unidades absolutas. Por exemplo, px é um pixel, cm é um centímetro, mm é um milímetro, in é uma polegada, pt é um ponto, pc é uma pica.

Unidades relativas

No entanto, se quisermos que o tamanho seja relativo, podemos utilizar unidades relativas. Por exemplo, em é o tamanho da fonte, rem é o tamanho da fonte do elemento raiz, vw é a largura da janela, vh é a altura da janela, vmin é a largura ou a altura da janela, dependendo de qual for menor, vmax é a largura ou a altura da janela, dependendo de qual for maior, ch é a largura de um caractere, ex é a altura de uma x, fr é uma fração do espaço disponível.

Modelo da caixa

Em HTML, tudo são caixas, mas há duas maneiras de ver as caixas: inline e block. Por exemplo, os <span> são inline, e os <div> são block.

Caixas inline

Quando o elemento é inline, a largura e a altura não podem ser configuradas, e o elemento se comporta como se fosse texto. Por exemplo, se tivermos um span com um texto, e definirmos uma largura e uma altura, a largura e a altura não serão aplicadas, e o elemento se comportará como se fosse texto.

<span>Texto</span>

span {
largura: 100px;
altura: 100px;}

Neste exemplo, a largura e a altura não serão aplicadas, e o elemento se comportará como se fosse texto.

Além disso, quando o elemento é inline, se vários elementos forem colocados juntos no html, esses elementos serão exibidos juntos. Por exemplo, se tivermos vários span com um texto, e os colocarmos juntos no html, esses elementos serão exibidos juntos.

<span>Texto</span>
<span>Texto</span>
<span>Texto</span>

Neste exemplo, os elementos serão exibidos juntos ==> TextoTextoTexto.

Mas se quisermos que os elementos sejam exibidos em linhas diferentes, podemos usar display: block;. Por exemplo, se tivermos vários span com um texto, e aplicarmos display: block;, esses elementos serão exibidos em linhas diferentes.

<span>Texto</span>
<span>Texto</span>
<span>Texto</span>

span {
exibição: bloco;
}

Neste exemplo, os elementos serão exibidos em linhas diferentes

⬇

Texto

Texto

Texto

Caixas block

Quando o elemento é block, a largura e a altura podem ser configuradas, e o elemento se comporta como se fosse um bloco. Por exemplo, se tivermos um div com um texto, e definirmos uma largura e uma altura, a largura e a altura serão aplicadas, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;}

Neste exemplo, a largura e a altura serão aplicadas, e o elemento se comportará como se fosse um bloco.

Além disso, quando o elemento é block, se vários elementos forem colocados juntos no HTML, esses elementos serão exibidos um abaixo do outro. Por exemplo, se tivermos vários div com texto e os colocarmos juntos no HTML, esses elementos serão exibidos um abaixo do outro.

<div>Texto</div>
<div>Texto</div>
<div>Texto</div>

Neste exemplo, os elementos serão exibidos um abaixo do outro

⬇

Texto

Texto

Texto

Mas se quisermos que os elementos sejam exibidos na mesma linha, podemos usar display: inline;. Por exemplo, se tivermos vários div com um texto, e colocarmos display: inline;, esses elementos serão exibidos na mesma linha.

<div>Texto</div>
<div>Texto</div>
<div>Texto</div>

div {
exibição: inline;
}

Neste exemplo, os elementos serão exibidos na mesma linha ==> TextoTextoTexto.

Margin, Border, Padding e Content

Agora que sabemos que em HTML tudo são caixas, podemos ver que cada caixa tem 4 partes:

• Margem: É o espaço entre a caixa e as outras caixas.
• Borda: É a borda da caixa.
• Padding: É o espaço entre a borda e o conteúdo.- Conteúdo: É o conteúdo da caixa.

Todas essas propriedades podem ser configuradas. Por exemplo, se temos um div com um texto, e definimos uma largura e uma altura, a largura e a altura serão aplicadas, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
margin: 10px;
borda: 10px sólida vermelha;
padding: 10px;
}

Como são propriedades de tamanho, podem ser colocadas unidades de comprimento. Por exemplo:

• Se quisermos que a margem seja de 10 pixels, colocamos margin: 10px;.
• Se quisermos que seja apenas a margem esquerda, colocamos margin-left: 10px;.
• Se quisermos que seja apenas a margem direita, colocamos margin-right: 10px;.
• Se quisermos que seja apenas a margem superior, colocamos margin-top: 10px;.
• Se quisermos que seja apenas a margem inferior, colocamos margin-bottom: 10px;.
• Se quisermos que cada margem tenha um tamanho específico, colocamos margin: 10px 20px 30px 40px;. A ordem é cima, direita, baixo, esquerda, como se fossem as agulhas de um relógio.
• Se quisermos mudar as margens no eixo horizontal e vertical, colocamos margin: 10px 20px;. A ordem é cima e baixo (10px), esquerda e direita (20px).

Tamanho da caixa ao alterar o padding

Se temos um div com um texto, e definirmos uma largura e uma altura, a largura e a altura serão aplicadas, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
}

Desta forma, o div terá uma largura e altura de 100px.

Mas se aplicarmos um padding de 10px, a largura e altura permanecerão as mesmas, mas o tamanho da caixa será de 120px, pois o padding é adicionado à largura e altura.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
padding: 10px;
}

Desta forma, o div terá uma largura e altura de 100px, mas o tamanho da caixa será de 120px.

Tamanho da caixa ao mudar a borda

Se temos um div com um texto, e colocamos uma largura e uma altura, a largura e a altura serão aplicadas, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
}

Desta forma, o div terá uma largura e uma altura de 100px.

Mas se nós agora aplicarmos uma borda de 10px, a largura e a altura permanecerão as mesmas, mas o tamanho da caixa será de 120px, pois a borda é adicionada à largura e à altura.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
borda: 10px sólida vermelha;
}

Desta forma, o div terá uma largura e altura de 100px, mas o tamanho da caixa será de 120px.

Tamanho da caixa ao alterar a margem

No caso das margens, o tamanho da caixa não muda, mas o espaço entre as caixas sim. Por exemplo, se tivermos dois div com um texto, e colocarmos uma largura e uma altura, a largura e a altura serão aplicadas, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>
<div>Texto</div>

div {
largura: 100px;
altura: 100px;
}

Desta forma, os div terão uma largura e altura de 100px.

Mas se aplicarmos uma margem de 10px, a largura e altura permanecerão as mesmas, mas o espaço entre os div será de 20px, pois a margem é adicionada ao espaço entre os div.

<div>Texto</div>
<div>Texto</div>

div {
largura: 100px;
altura: 100px;
margin: 10px;
}

Desta forma, os div terão uma largura e altura de 100px, mas o espaço entre os div será de 20px.

Tamanho da caixa

Portanto, o que ocupa a caixa é:

• Largura: width + padding + border.
• Altura: height + padding + border.

O margem não conta, pois a margem é o espaço entre as caixas.

Box-sizing

Por padrão, a propriedade box-sizing está configurada para content-box. Isso significa que a largura e a altura não incluem o padding nem a borda. Por exemplo, se tivermos um div com um texto, e colocarmos uma largura e uma altura, a largura e a altura serão aplicadas, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
}

Desta forma, o div terá uma largura e altura de 100px.

Mas se aplicarmos um padding de 10px, a largura e altura permanecerão, mas o tamanho da caixa será de 120px, pois o padding é adicionado à largura e altura.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
padding: 10px;
}

Desta forma, o div terá uma largura e altura de 100px, mas o tamanho da caixa será de 120px.

Se alterássemos a propriedade box-sizing para border-box, a largura e a altura incluiriam os preenchimentos (padding) e as bordas (border). Por exemplo, se tivermos um div com texto, e definirmos uma largura e uma altura, esses valores serão aplicados, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
box-sizing: border-box;
}

Desta forma, o div terá uma largura e altura de 100px.

Mas se nós agora aplicarmos um padding de 10px, a largura e a altura permanecerão, e o tamanho da caixa também será de 100px, pois o padding não é adicionado à largura e à altura.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
box-sizing: border-box;
padding: 10px;
}

Desta forma, o div terá uma largura e altura de 100px, e o tamanho da caixa também será de 100px.

É importante ter em conta que quando a propriedade box-sizing é alterada para border-box, a largura e altura incluem o padding e a borda, portanto não podemos definir uma largura e altura menores que o padding e a borda. Por exemplo, se tivermos um div com texto, e definirmos uma largura e altura, essas medidas serão aplicadas, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
box-sizing: border-box;
}

Desta forma, o div terá uma largura e uma altura de 100px.

Mas se agora aplicarmos um padding de 110px, a largura e altura permanecerão as mesmas, mas o tamanho da caixa será de 220px, pois o padding é adicionado à largura e altura.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
box-sizing: border-box;
padding: 110px;
}

Desta forma, o div terá uma largura e altura de 100px, mas o tamanho da caixa será de 220px.

Overflow

Um dos memes mais famosos do CSS é o seguinte

E isso acontece quando o tamanho do conteúdo é maior que o tamanho da caixa. Por exemplo, se tivermos um div com texto, e definirmos uma largura e uma altura, a largura e a altura serão aplicadas, e o elemento se comportará como se fosse um bloco.

<div>Texto</div>

div {
largura: 100px;
altura: 100px;
}

Desta forma, o div terá uma largura e altura de 100px.

Mas se aplicarmos um texto muito longo, o texto sairá da caixa, pois o tamanho do conteúdo é maior que o tamanho da caixa.

<div>Texto muito longo</div>

div {
largura: 100px;
altura: 100px;
}

Desta forma, o div terá uma largura e altura de 100px, mas o texto sairá da caixa.

Isso ocorreu porque na CSS a propriedade overflow está configurada para visible. Isso significa que o conteúdo pode sair da caixa. Mas temos outras opções:

• hidden: O conteúdo não pode sair da caixa e é cortado.
• scroll: O conteúdo não pode sair da caixa, e uma barra de rolagem é adicionada.
• auto: O conteúdo não pode sair da caixa, e uma barra de rolagem é adicionada se necessário. Neste caso, depende do dispositivo, porque se o dispositivo tiver uma barra de rolagem, será adicionada uma barra de rolagem, e se o dispositivo não tiver uma barra de rolagem, nenhuma barra de rolagem será adicionada.

Entre scroll e auto o recomendado é auto, porque se o dispositivo tiver uma barra de deslocamento, será adicionada uma barra de deslocamento, e se o dispositivo não tiver uma barra de deslocamento, não será adicionada uma barra de deslocamento.

Overflow oculto

No caso de escolher hidden, o conteúdo não pode sair da caixa e é cortado. Neste caso, temos a propriedade text-overflow, que nos permite configurar o que acontece com o texto que ultrapassa a caixa. As opções são:

• clip: O texto é cortado.
• ellipsis: O texto é cortado e ... é adicionado ao final do texto.

No futuro será possível colocar um símbolo personalizado, mas por enquanto não é possível.

Estilização da barra

Em caso de ter overflow, é possível estilizar a barra, mas é recomendável não estilizar a barra da página e fazer isso apenas em barras de caixas internas. Por exemplo, se na página houver um índice lateral e quisermos alterar o tamanho e a cor da barra para que fique melhor, podemos fazê-lo.

Em scrollbar.app temos um editor para poder estilizar a barra e obter o código necessário

Posição

Em html os elementos são empilhados, são posicionados por padrão de maneira estática, isso ocorre porque por padrão em CSS eles têm o atributo position com o valor static. Isso significa que o elemento é posicionado de maneira estática e não pode ser movido. Os valores possíveis são

• static: O elemento é posicionado de forma estática e não pode ser movido.
• relative: O elemento é posicionado de maneira relativa e pode ser movido.
• absolute: O elemento é posicionado de maneira absoluta e pode ser movido.
• fixed: O elemento é posicionado de maneira fixa e pode ser movido.
• sticky: O elemento é posicionado de maneira adesiva e pode ser movido.

Posição relativa

Quando queremos que a posição de um elemento seja relativa a outro usamos position: relative;. Mas temos que colocar position: relative; no pai, e position: absolute; no filho. Por exemplo, se tivermos um div com um texto, e quisermos que o texto esteja no canto superior direito do div, podemos fazer isso.

<div>
<p>Texto</p>
</div>

div {
posição: relativa;
}

p {posição: absoluta;
top: 0;
right: 50px;
}

Desta forma, o texto ficará no canto superior direito do div.

Posição absoluta

Quando o elemento é absolute, o elemento é posicionado de maneira absoluta em relação ao primeiro elemento pai que não seja static. No exemplo anterior, vimos que se tivermos um div com um texto e quisermos que o texto esteja no canto superior direito do div, podemos fazer isso.

<div>
<p>Texto</p>
</div>

div {
posição: relativa;
}

p {posição: absoluta;
top: 0;
direita: 50px;
}

Neste exemplo, o div tem position: relative;, portanto o p é posicionado de maneira absoluta em relação ao div, no canto superior direito.

Em caso de que não haja nenhum elemento pai que não seja static, o elemento é posicionado de maneira absoluta ao body, ou seja, à página.

<p>Texto</p>

p {
posição: absoluta;
top: 0;
direita: 50px;
}

Neste exemplo, o p não tem nenhum elemento pai que não seja static, portanto o p é posicionado de forma absoluta em relação ao body. Isso significa que ele aparece no canto superior direito da página.

Graças às propriedades relative e absolute podemos centralizar um div horizontalmente e verticalmente. Por exemplo, se temos um div com um texto, e queremos que o texto esteja centralizado horizontalmente e verticalmente, podemos fazer isso.

<div>
<p>Texto</p>
</div>

div {
posição: relativa;
}

p {
posição: absoluta;
top: 0;
direita: 0;
fundo: 0;
esquerda: 0;
margin: auto;
}

Neste exemplo, o div tem position: relative;, portanto o p é posicionado de forma absoluta dentro do div, na esquina superior direita. Além disso, o p possui top: 0;, right: 0;, bottom: 0; e left: 0;, fazendo com que o p ocupe todo o div. Por fim, o p tem margin: auto;, o que centraliza o p horizontalmente e verticalmente.

Esta não é a melhor maneira de centralizar o conteúdo em um div, mas pode ser muito útil em alguns casos, como por exemplo em um modal.

Posição fixa

Quando o elemento é fixed, o elemento é posicionado de maneira fixa à janela. É semelhante a absolute, mas em vez de se posicionar ao primeiro elemento pai que não seja static, ele se posiciona à janela. Além disso, se a janela se mover, o elemento se move com ela, ou seja, se fizermos scroll, o elemento sempre estará na mesma posição.

Por exemplo, se tivermos um div com um texto, e quisermos que o texto esteja no canto superior direito da janela, podemos fazer isso.

<div>
<p>Texto</p>
</div>

p {
posição: fixed;top: 0;
direita: 50px;
}

Neste exemplo, o p é posicionado de forma fixa na janela, no canto superior direito, e ao fazer scroll, o p sempre estará na mesma posição.

Posição sticky

Quando o elemento é sticky, o elemento é posicionado de maneira adesiva ao primeiro elemento pai que não seja static.

É semelhante a relative, mas quando o elemento chega à parte superior da janela, o elemento é posicionado de forma fixa à janela. Além disso, se a janela se mover, o elemento também se move com ela, ou seja, se fizermos scroll, o elemento sempre estará na mesma posição.

Por exemplo, se tivermos um div com um texto, e quisermos que o texto esteja no canto superior direito do div, podemos fazer isso.

<div>
<p>Texto</p>
</div>

div {
posição: relativa;
}

p {posição: sticky;
top: 0;
right: 50px;
}

Neste exemplo, o div tem position: relative;, portanto, o p é posicionado de maneira relativa ao div, no canto superior direito. Além disso, o p tem top: 0;, portanto, o p é posicionado de maneira pegajosa ao div. Isso significa que quando o p chega à parte superior da janela, o p é posicionado de maneira fixa à janela.

Z-index

Como vimos ao alterar o position de um elemento, o elemento é posicionado sobre os demais elementos. Portanto, precisamos ter controle de qual elemento está ou será exibido acima dos demais. Para isso temos a propriedade z-index. Por padrão, todos os elementos têm z-index: auto;, mas podemos alterá-lo. Por exemplo, se tivermos um div com um texto, e quisermos que o texto esteja sobre o div, podemos fazer isso.

<div>
<p>Texto</p>
</div>

div {
posição: relativa;
z-index: 0;
}

p {posição: absoluta;
top: 0;
right: 50px;
z-index: 1;
}

Neste exemplo, o div tem position: relative; e z-index: 0;, portanto o div é posicionado de forma relativa ao div, e o div possui um z-index de 0. Além disso, o p tem position: absolute;, top: 0;, right: 50px; e z-index: 1;, portanto o p é posicionado de forma absoluta ao div, no canto superior direito, e o p possui um z-index de 1. Dessa forma, o p estará sobre o div.

Se não for indicado o z-index, os filhos têm um z-index maior que os pais. Mas, por exemplo, no caso de position: sticky;, o z-index do elemento filho é maior que o z-index do seu pai, mas na hora de fazer scroll, se em algum momento coincidir o filho com outro pai, o outro pai estará por cima.

Se quisermos que esse filho apareça acima dos outros pais, podemos controlar com o z-index.

No curso de CSS da Google](https://web.dev/learn/css/z-index?hl=es-419) é possível ver muito bem como funciona o z-index.

Flexbox e Grid

Há duas maneiras de fazer layouts em CSS, com flexbox e com grid. Flexbox é mais antigo, e grid é mais novo. Flexbox é unidimensional, e grid é bidimensional. Flexbox é para layouts simples, e grid é para layouts complexos.

Flexbox

Como vimos, temos contêineres que têm display: block;, e contêineres que têm display: inline;. Os primeiros são exibidos em linhas diferentes, e os segundos são exibidos na mesma linha. Portanto, se tivermos vários divs, eles serão exibidos um abaixo do outro, e se tivermos vários spans, eles serão exibidos na mesma linha.

Mas se quisermos que os divs apareçam na mesma linha e de forma flexível, podemos criar um contêiner pai que os contenha e fazer com que o contêiner pai tenha display: flex;.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</div>

seção {
display: flex;
}

Desta forma, os divs serão exibidos na mesma linha e de maneira flexível, ou seja, se não couberem na mesma linha, serão colocados na próxima linha.

Flex-direction

Flexbox é unidimensional, portanto só pode configurar uma direção. Por padrão, a propriedade flex-direction está configurada como row. Isso significa que os elementos são exibidos na mesma linha. Mas podemos alterá-lo para column, para que os elementos sejam exibidos em linhas diferentes.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</section>

seção {
display: flex;flex-direction: column;
}

Desta forma, os divs serão exibidos em linhas diferentes.

Isso é muito útil para criar layouts responsivos, pois podemos alterar a direção dos elementos dependendo do tamanho da tela.

Também podemos indicar a direção, com flex-direction: row-reverse; ou flex-direction: column-reverse;. Por exemplo, se tivermos vários divs, e quisermos que sejam exibidos na mesma linha, mas em sentido contrário, podemos fazer isso.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</section>

seção {
display: flex;flex-direction: row-reverse;
}

Desta forma, os divs serão exibidos na mesma linha, mas em sentido contrário.

Isso é muito útil quando queremos ordenar os elementos de maneira inversa, por exemplo, se temos um ul com uma lista, e queremos que a lista seja exibida em sentido contrário, dessa forma não é necessário programar nada e isso pode ser feito com CSS.

Direção

Outra maneira de indicar o sentido da direção é com a propriedade direction. Por padrão, a propriedade direction está configurada como ltr. Isso significa que o sentido da direção é de esquerda para direita. Mas podemos alterá-lo para rtl, para que o sentido da direção seja de direita para esquerda.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</section>

seção {display: flex;
direction: rtl;
}

Flex-wrap

Quando os elementos não cabem na mesma linha, eles são colocados na próxima linha. Mas podemos alterar esse comportamento com a propriedade flex-wrap. Por padrão, a propriedade flex-wrap está configurada como nowrap. Isso significa que os elementos não podem ser colocados na próxima linha. Mas podemos mudá-la para wrap, para que os elementos possam ser colocados na próxima linha.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</section>

seção {
display: flex;flex-wrap: wrap;
}

Desta forma, os divs poderão ser colocados na linha seguinte.

Flex-flow

Uma maneira de configurar a direção e o wrap dos elementos é com a propriedade flex-flow. Por padrão, a propriedade flex-flow está configurada para row nowrap. Isso significa que os elementos são exibidos na mesma linha e não podem ser colocados na próxima linha. Mas podemos alterá-lo para row wrap, para que os elementos sejam exibidos na mesma linha e possam ser colocados na próxima linha.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</section>

seção {
display: flex;flex-flow: row wrap;
}

Desta forma, os divs serão exibidos na mesma linha e poderão ser colocados na próxima linha.

Flex-grow, Flex-shrink e Flex-basis

Podemos configurar o tamanho dos elementos com as propriedades flex-grow, flex-shrink e flex-basis.

• flex-grow: Indica se o elemento pode crescer ou não. Por padrão, a propriedade flex-grow está configurada para 0, o que significa que o elemento não pode crescer. Mas podemos alterá-la para 1, para que o elemento possa crescer.
• flex-shrink: Indica se o elemento pode encolher ou não. Por padrão, a propriedade flex-shrink está configurada para 1, o que significa que o elemento pode encolher. Mas podemos alterá-la para 0, para que o elemento não possa encolher.
• flex-basis: Indica o tamanho do elemento. Por padrão, a propriedade flex-basis está configurada como auto, o que significa que o elemento tem um tamanho automático. Mas podemos alterá-lo para 100px, para que o elemento tenha um tamanho de 100px.

Por exemplo, se temos vários divs, e queremos que o primeiro div tenha um tamanho de 100px, e os demais dividam o espaço restante, podemos fazer isso.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</section>

seção {
display: flex;
}

section div:first-child {flex-grow: 0;   /* Como por efeito está a 0, não é necessário colocar */
flex-shrink: 0; /* Como por efeito está em 1, não é necessário colocar */
flex-basis: 100px;
}

section div {
flex-grow: 1;
flex-shrink: 1;     /* Como por efeito está em 1, não é necessário colocar */
flex-basis: auto;   /* Como por efeito está em auto, não é necessário colocá-lo */
}

Desta forma, o primeiro div terá um tamanho de 100px, e os demais dividirão o espaço restante.

Os três valores podem ser modificados de uma vez com a propriedade flex. Por exemplo, se tivermos vários divs, e quisermos que o primeiro div tenha um tamanho de 100px, e os demais se repartam o espaço restante, podemos fazer isso.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</section>

seção {
display: flex;
}

section div:first-child {flex: 0 0 100px;
}

section div {
flex: 1 1 auto;
}

Desta forma, o primeiro div terá um tamanho de 100px, e os demais dividirão o espaço restante.

O também se pode modificar de uma vez com flex: initial;, que é o mesmo que flex: 0 1 auto;. Ou com flex: auto;, que é o mesmo que flex: 1 1 auto;. Ou com flex: none;, que é o mesmo que flex: 0 0 auto;. Ou com flex: 1;, que é o mesmo que flex: 1 1 0%;.

Outra forma de modificar flex é colocando números, que indicarão o espaço relativo do contêiner. Por exemplo, se tivermos vários divs, e quisermos que o primeiro tenha o dobro do espaço do segundo, e o segundo tenha o dobro do espaço do terceiro, podemos fazer isso.

<section>
<div>Texto</div>
<div>Texto</div>
<div>Texto</div>
</section>

seção {
display: flex;
}

section div:first-child {
flex: 4;
}
section div:nth-child(2) {
flex: 4;
}

section div:nth-child(3) {
flex: 1;
}

Desta forma, o primeiro div terá o dobro do espaço do segundo, e o segundo terá o dobro do espaço do terceiro.

Ordem

Podemos ordenar os elementos dentro de um contêiner com a propriedade order. Por padrão, a propriedade order está configurada para 0. Mas podemos alterá-la para 1, para que o elemento fique depois dos elementos que têm order: 0;. Ou podemos alterá-la para -1, para que o elemento fique antes dos elementos que têm order: 0;.

É como o z-index, mas para a ordem dos elementos. Quanto maior for o order, mais tarde será posicionado o elemento. Por exemplo, se tivermos vários divs, e quisermos que o primeiro div seja posicionado após o segundo, podemos fazer isso.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
</section>

seção {
display: flex;
}

section div:first-child {
ordem: 1;
}

section div {ordem: 0;
}

O resultado será

Texto 2

Por favor, forneça o texto markdown que deseja que eu traduzza para o português.

Texto 1

Justificar-conteúdo

Como Flexbox é unidimensional, podemos configurar o alinhamento dos itens do contêiner no eixo do Flexbox do contêiner. Isso significa que, se o eixo do Flexbox do contêiner for horizontal, podemos configurar o alinhamento dos itens do contêiner no eixo horizontal. E se o eixo do Flexbox do contêiner for vertical, podemos configurar o alinhamento dos itens do contêiner no eixo vertical.

Os possíveis valores são:

• flex-start: Os elementos são justificados no início do eixo do Flexbox do contêiner.
• flex-end: Os elementos são justificados ao final do eixo do Flexbox do contêiner.
• center: Os elementos são justificados no centro do eixo do Flexbox do contêiner.
• space-between: Os elementos são justificados com o mesmo espaço entre eles. Não há espaço nos lados do primeiro e último elemento.
• space-around: Os elementos são justificados com o mesmo espaço ao redor deles.
• space-evenly: Os elementos são justificados com o mesmo espaço entre eles e ao redor deles. Isso significa que é semelhante a space-between, mas aos lados do primeiro e último elemento há espaço. O espaço nos lados é o mesmo que o espaço entre os elementos.

Espaço

Suponha que temos vários elementos dentro de um contêiner e colocamos justify-content: center;. Isso fará com que os elementos estejam centralizados no contêiner, mas grudados uns nos outros. Se quisermos que haja um espaço entre os elementos, podemos colocar gap: 10px;. Dessa forma, haverá um espaço de 10px entre os elementos.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
</section>

seção {
display: flex;
justify-content: center;
gap: 10px;
}

I'm unable to view images directly. However, if you can describe the image or provide details about it, I'd be happy to help you with any questions or information you're looking for!

Alinhar-itens

Até agora vimos como distribuir os elementos no eixo principal do Flexbox. Mas, o que acontece com o eixo secundário? Para isso temos a propriedade align-items. Esta propriedade nos permite alinhar os elementos no eixo secundário do Flexbox.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
</section>

seção {display: flex;
align-items: center;
}

Alinhar-conteúdo

Com align-content podemos alinhar o conteúdo do contêiner no eixo secundário. Esta propriedade é semelhante a align-items, mas em vez de alinhar os elementos, alinha o conteúdo do contêiner.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
</section>

seção {
display: flex;align-content: center;
flex-wrap: wrap;
altura: 200px;
}

Align-content vs Align-items

Como pode haver confusão entre align-content e align-items, vamos ver um exemplo para ver a diferença entre ambas as propriedades.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
<div>Texto 4</div>
<div>Texto 5</div>
<div>Texto 6</div>
<div>Texto 7</div>
<div>Texto 8</div>
<div>Texto 9</div>
</section>

seção {
display: flex;
align-items: center;
align-content: center;
flex-wrap: wrap;
altura: 200px;
}

Com align-items alinhamos os elementos no eixo secundário, enquanto com align-content alinhamos o conteúdo do contêiner no eixo secundário. Isso significa que com align-items alinhamos os elementos entre si, enquanto com align-content alinhamos o conteúdo do contêiner. No exemplo anterior, podemos ver que com align-items os elementos se alinham entre si, enquanto com align-content o conteúdo do contêiner se alinha no eixo secundário.

Alinhar-se

Às vezes, precisamos alinhar um elemento no eixo secundário de forma diferente do restante dos elementos. Para isso, temos a propriedade align-self. Esta propriedade nos permite alinhar um elemento no eixo secundário de forma diferente do restante dos elementos.

Até agora alinhávamos os elementos no pai, mas com align-self podemos alinhar um elemento no eixo secundário de forma diferente do restante dos elementos.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
</section>

seção {
display: flex;
align-items: center;
}

section div:nth-child(2) {
align-self: flex-end;
}

Prática de Flexbox

Um bom recurso para praticar Flexbox é Flexbox Froggy.

Grade

Se precisarmos criar um layout mais complexo, podemos utilizar Grid. Grid é um sistema de grade bidimensional que nos permite criar layouts mais complexos do que com Flexbox.

Contêiner grid

Vamos ver um exemplo de como fazer layout com Grid. Para isso, vamos usar a seguinte estrutura HTML.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
<div>Texto 4</div>
<div>Texto 5</div>
<div>Texto 6</div>
<div>Texto 7</div>
<div>Texto 8</div>
<div>Texto 9</div>
</section>

Para criar um Grid precisamos criar um contêiner com a propriedade display: grid, lembremos que por padrão os contêineres têm display:block. Este contêiner é conhecido como Grid container.

seção {
display: grid;
}

Este código criará um Grid com uma única coluna e tantas linhas quantos itens tivermos.

Se quisermos mudar o número de colunas, podemos usar a propriedade grid-template-columns. Esta propriedade nos permite definir o número de colunas que terá nosso Grid. Para definir o número de colunas podemos usar unidades de medida como px, em, rem, fr, etc.

Vão ser criadas tantas colunas quantas unidades de medida definirmos. No exemplo seguinte, vamos criar 3 colunas de 100px cada uma.

seção {
display: grid;
grid-template-columns: 100px 100px 100px;}

Com este exemplo, criamos uma Grid com 3 colunas de 100px cada uma.

Podemos definir a largura de uma das colunas com auto e o resto com uma medida, desta forma a coluna com auto se adaptará ao conteúdo, enquanto as demais colunas terão a largura que lhes tenhamos definido.

Ao colocar auto, será o navegador quem decidirá a largura da coluna com base no espaço disponível no contêiner e no espaço ocupado pelo conteúdo da coluna.

seção {
display: grid;
grid-template-columns: auto 100px 100px;
}

A primeira coluna se adaptará ao conteúdo, enquanto as outras duas terão uma largura de 100px.

Se definirmos duas colunas com auto, o navegador distribuirá o espaço entre as duas colunas, mas não necessariamente será o mesmo espaço para cada coluna, pois, como dissemos, o espaço dependerá do espaço do contêiner e do espaço do conteúdo.

seção {
display: grid;
grid-template-columns: auto auto 100px;
}

Neste exemplo, as duas primeiras colunas se ajustarão ao conteúdo, enquanto a terceira terá uma largura de 100px.

Fração

Há uma unidade de medida que só existe em Grid e é fr. Esta unidade de medida nos permite definir a largura das colunas com base no espaço disponível no contêiner.

seção {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Neste exemplo, as três colunas terão a mesma largura, pois o espaço disponível no contêiner será distribuído igualmente entre as três colunas.

seção {display: grid;
grid-template-columns: 1fr 2fr 1fr;
}

Neste exemplo, a segunda coluna terá o dobro da largura das outras duas, pois o espaço disponível no contêiner será distribuído entre as três colunas, mas a segunda coluna terá o dobro de espaço em relação às outras duas.

Podemos fazer o mesmo com as linhas, para isso usamos a propriedade grid-template-rows.

seção {
display: grid;
grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 1fr 2fr 1fr;
}

Grade vazia

Dissemos que podemos dividir a Grid em colunas e linhas, para isso colocamos tantas unidades de medida quantas colunas ou linhas quisermos. Mas o que acontece se colocarmos mais unidades de medida do que precisamos.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
<div>Texto 4</div>
<div>Texto 5</div>
<div>Texto 6</div>
<div>Texto 7</div>
<div>Texto 8</div>
<div>Texto 9</div>
</section>

seção {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}

Neste exemplo, será criada uma Grid com 4 colunas e 4 linhas, mas temos apenas 9 elementos, enquanto criamos uma grade de 16 elementos. O que acontece com os 7 elementos sobrando? O navegador os cria vazios.

Grid-auto-rows

Se a hora de criar o Grid só definirmos o valor de grid-template-columns, o navegador criará as linhas necessárias para as colunas que definimos, mas as criará com o tamanho padrão, ou seja, com o tamanho do conteúdo.

Se quisermos definir o tamanho das linhas, podemos usar a propriedade grid-auto-rows. Esta propriedade nos permite definir o tamanho das linhas que são criadas por padrão.

seção {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: 100px;
}

Neste exemplo, será criado um Grid com 4 colunas e tantas linhas quantos elementos tivermos, mas o tamanho das linhas será de 100px.

Suponhamos que também definimos grid-template-rows, mas definimos o tamanho das primeiras linhas e não de todas as linhas necessárias, com grid-auto-rows podemos definir o tamanho das linhas que faltam.

seção {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-auto-rows: 50px;
}

Neste exemplo, será criado um Grid com 4 colunas e tantas linhas quantos elementos tivermos, mas o tamanho das duas primeiras linhas será de 100px, enquanto o tamanho do resto das linhas será de 50px.

Isso é muito útil quando não sabemos quantos elementos vamos ter, pois podemos definir o tamanho das primeiras linhas e o tamanho das linhas que são criadas por padrão.

Repetir

Vamos imaginar que queremos criar um Grid com 100 colunas e todas do mesmo tamanho. Teríamos que escrever 100 vezes a unidade de medida que queremos usar. Para evitar isso, podemos utilizar a propriedade repeat.

seção {
display: grid;
grid-template-columns: repeat(100, 1fr);
}

Com repeat podemos definir o número de colunas que queremos e a unidade de medida que queremos utilizar.

Podemos usar repeat com subpartes da grade. Por exemplo, imaginemos que queremos criar novamente 100 colunas, mas queremos que a primeira e a última coluna tenham uma largura de 100px e o resto das colunas tenham uma largura de 1fr.

seção {
display: grid;
grid-template-columns: 100px repeat(98, 1fr) 100px;
}

Agora suponhamos que temos um padrão de colunas que se repete a cada 3 colunas. Podemos utilizar repeat para definir esse padrão.

seção {
display: grid;
grid-template-columns: repeat(3, 100px 1fr);
}

Desta forma criamos uma grade de 6 colunas, onde o padrão se repete a cada 2 colunas.

minmax

Talvez não saibamos o tamanho exato de uma linha ou uma coluna, mas o que queremos é que ela ocupe um tamanho entre um mínimo e um máximo. Para isso, podemos utilizar a propriedade minmax.

seção {
display: grid;
grid-template-columns: minmax(100px, 1fr) 1fr 1fr 1fr;
}

Neste exemplo queremos que cada coluna tenha 25% da largura do contêiner, mas que a primeira coluna tenha uma largura mínima de 100px. Ou seja, se o espaço ocupado pela primeira coluna for menor que 100px, a coluna terá uma largura de 100px, mas se o espaço ocupado pela primeira coluna for maior que 100px, a coluna terá uma largura de 25% do contêiner.

Isso é muito útil, por exemplo, quando temos um índice no lado da página e queremos que ele ocupe uma largura mínima, mas que se o espaço disponível for maior, ele ocupe o espaço que lhe cabe.

<div>
<aside>Índice</aside>
<main>Conteúdo</main>
</div>

div {
display: grid;
grid-template-columns: minmax(100px, 1fr) 5fr;
}

Desta forma, o índice terá uma largura mínima de 100px, mas se o espaço disponível for maior, o índice ocupará o espaço que lhe cabe.

Grid-column-gap e Grid-row-gap

Se quisermos adicionar um espaço entre as colunas ou entre as linhas, podemos utilizar as propriedades grid-column-gap e grid-row-gap.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-column-gap: 20px;
}

Neste exemplo, criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas.

seção {display: grid;
grid-template-columns: repeat(3, 100px);
grid-row-gap: 20px;
}

Neste exemplo criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as linhas.

Podemos definir o espaço entre as colunas e as linhas com a propriedade grid-gap.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px 10px;
}

Neste exemplo, criamos um Grid com 3 colunas de 100px cada uma e um espaçamento de 20px entre as colunas e um espaçamento de 10px entre as linhas.

seção {display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

Neste exemplo criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas e as linhas.

Auto-fill e Auto-fit

Com auto-fill e auto-fit podemos criar um Grid com um número de colunas ou linhas que se adapte ao espaço disponível no contêiner, assim podemos tornar o Grid responsivo.

seção {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}

Neste exemplo, serão criadas tantas colunas quantas couberem no contêiner, mas cada coluna terá uma largura de 100px.

seção {display: grid;
grid-template-columns: repeat(auto-fit, 100px);
}

Neste exemplo, serão criadas tantas colunas quantas couberem no contêiner, mas cada coluna terá uma largura de 100px e, se houver espaço sobrando no contêiner, o espaço será distribuído entre as colunas.

Agora podemos torná-lo mais completo

seção {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Neste exemplo, serão criadas tantas colunas quantas couberem no contêiner, mas cada coluna terá uma largura mínima de 100px e, se houver espaço sobrando no contêiner, o espaço será distribuído entre as colunas. À medida que reduzirmos o tamanho do navegador, as colunas irão se adaptar ao espaço disponível, até que chegue um momento em que, para caberem, deveriam ter uma largura menor de 100px, por isso uma coluna será eliminada e o espaço será redistribuído entre as colunas restantes.

seção {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 20px;
}

Neste exemplo, serão criadas tantas colunas quantas couberem no contêiner, mas cada coluna terá uma largura mínima de 100px e, se houver espaço sobrando no contêiner, o espaço será distribuído entre as colunas e haverá um espaçamento de 20px entre as colunas.

Auto-preenchimento vs Auto-ajuste

A diferença entre auto-fill e auto-fit é que auto-fill cria tantas colunas ou linhas quanto couberem no contêiner, enquanto auto-fit cria tantas colunas ou linhas quanto couberem no contêiner, mas se houver espaço sobrando no contêiner, o espaço será distribuído entre as colunas ou linhas.

Isto é, auto-fill cria tantas colunas ou linhas quantas couberem no contêiner, mas se houver espaço sobrando no contêiner, o espaço não será distribuído entre as colunas ou linhas, enquanto auto-fit cria tantas colunas ou linhas quantas couberem no contêiner, mas se houver espaço sobrando no contêiner, o espaço será distribuído entre as colunas ou linhas.

Grid-column-start e Grid-column-end (grade flexível)

Até agora vimos como criar um Grid com colunas e linhas, mas e se quisermos que um elemento ocupe mais de uma coluna ou linha? Para isso temos as propriedades grid-column-start e grid-column-end.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
<div>Texto 4</div>
<div>Texto 5</div>
<div>Texto 6</div>
<div>Texto 7</div>
<div>Texto 8</div>
<div>Texto 9</div>
</section>

seção {display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {
grid-column-start: 1;
grid-column-end: 3;
}

Neste exemplo, criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas. O segundo elemento ocupa da primeira coluna até a terceira coluna.

Também podemos dizer o início e o fim da coluna com a propriedade grid-column.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {
grid-column: 1 / 3;
}

Neste exemplo, criamos um Grid com 3 colunas de 100px cada uma e um espaçamento de 20px entre as colunas. O segundo elemento ocupa da primeira coluna até a terceira coluna.

Se não quisermos dizer onde deve terminar, mas quantas colunas devem ser ocupadas, podemos usar a propriedade span.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {grid-column-start: 1;
grid-column-end: span 2;
}

Neste exemplo, criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas. O segundo elemento ocupa da primeira coluna até a segunda coluna, ou seja, ocupa duas colunas.

Se quisermos posicioná-los no final, mas não soubermos quantas colunas existem, podemos utilizar números negativos.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {grid-column-start: 1;
grid-column-end: -1;
}

Neste exemplo criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas. O segundo elemento ocupa da primeira coluna até a última coluna, ou seja, ocupa as três colunas.

Grid-row-start e Grid-row-end (grade flexível)

Podemos fazer o mesmo com as linhas, para isso temos as propriedades grid-row-start e grid-row-end.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
<div>Texto 4</div>
<div>Texto 5</div>
<div>Texto 6</div>
<div>Texto 7</div>
<div>Texto 8</div>
<div>Texto 9</div>
</section>

seção {display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {
grid-row-start: 1;
grid-row-end: 3;
}

Neste exemplo, criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas. O segundo elemento ocupa da primeira linha até a terceira linha.

Também podemos dizer o início e o fim da linha com a propriedade grid-row.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}
section div:nth-child(2) {
grid-row: 1 / 3;
}

Assim como antes, se não quisermos dizer onde deve terminar, mas quantas linhas devem ser ocupadas, podemos usar a propriedade span.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {grid-row-start: 1;
grid-row-end: span 2;
}

Neste exemplo, criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas. O segundo elemento ocupa da primeira linha até a segunda linha, ou seja, ocupa duas linhas.

Se quisermos posicioná-los no final, mas não sabemos quantas linhas existem, podemos utilizar números negativos.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {grid-row-start: 1;
grid-row-end: -1;
}

Neste exemplo criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas. O segundo elemento ocupa da primeira linha até a última linha, ou seja, ocupa as três linhas.

Sobreposição de elementos

Podemos posicionar os elementos de forma que se sobreponham uns aos outros.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
<div>Texto 4</div>
<div>Texto 5</div>
<div>Texto 6</div>
<div>Texto 7</div>
<div>Texto 8</div>
<div>Texto 9</div>
</section>

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:first-child {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}

section div:nth-child(2) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}

Neste exemplo, criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas. O primeiro elemento ocupa da primeira coluna até a segunda coluna e da primeira linha até a segunda linha. O segundo elemento ocupa da primeira coluna até a segunda coluna e da primeira linha até a segunda linha.

Para controlar qual dos elementos se sobrepõe ao outro, podemos utilizar a propriedade z-index.

seção {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:first-child {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
z-index: 1;
}

section div:nth-child(2) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
z-index: 2;
}

Neste exemplo criamos um Grid com 3 colunas de 100px cada uma e um espaço de 20px entre as colunas. O primeiro elemento ocupa da primeira coluna até a segunda coluna e da primeira linha até a segunda linha. O segundo elemento ocupa da primeira coluna até a segunda coluna e da primeira linha até a segunda linha. Como o segundo elemento tem um z-index maior que o primeiro elemento, o segundo elemento se sobrepõe ao primeiro.

Layouts com Grid

Agora que conhecemos as propriedades básicas de Grid, vamos ver como podemos criar layouts com Grid.

<header>Cabeçalho</header>
<aside>Aparte</aside>
<main>Principal</main>
<footer>Rodapé</footer>

body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 35px 1fr 100px;
min-height: 100vh;
}

cabeçalho {
grid-column: 1 / -1;
}
main {
grid-column: span 2;
}

footer {
grid-column: 1 / -1;
}

Neste exemplo criamos um Grid com 3 colunas e 3 linhas. A primeira linha tem uma altura de 35px, a segunda linha ocupa o resto do espaço disponível e a terceira linha tem uma altura de 100px. O header ocupa desde a primeira coluna até a última coluna, o main ocupa desde a primeira coluna até a segunda coluna e o footer ocupa desde a primeira coluna até a última coluna.

Nós colocamos min-height: 100vh para que o Grid ocupe 100% da altura da tela, pois se não colocarmos isso, o Grid só ocupará a altura do conteúdo.

No entanto, na hora de visualizar o CSS, é difícil entendê-lo, então podemos usar a propriedade grid-area.

Grid-area

Podemos dar um nome a cada uma das áreas do Grid e depois usar esse nome para posicionar os elementos.

<header>Cabeçalho</header>
<aside>Aparte</aside>
<main>Principal</main>
<footer>Rodapé</footer>

corpo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 35px 1fr 100px;
min-height: 100vh;
grid-template-areas:
"header header header"
"conteúdo da barra lateral conteúdo"
"rodapé rodapé rodapé";
}

cabeçalho {
grid-area: cabeçalho;}

main {
grid-area: conteúdo;
}

footer {
grid-area: rodapé;
}

aside {
grid-area: barra-lateral;
}

Como demos nomeado cada uma das áreas do Grid, podemos usar esse nome para posicionar os elementos. Dessa forma, é mais fácil entender o CSS.

Se quiséssemos torná-lo responsivo, apenas teríamos que alterar o Grid e o resto do CSS permaneceria igual.

corpo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 35px 1fr 100px;
min-height: 100vh;
grid-template-areas:
"cabeçalho cabeçalho cabeçalho"
"conteúdo da barra lateral conteúdo"
"rodapé rodapé rodapé";
}

@media (width < 400px) {
corpo {
grid-template-columns: 1fr;
grid-template-rows: 35px 1fr 100px;
grid-template-areas:
"cabeçalho cabeçalho barra lateral"
"conteúdo conteúdo conteúdo"
"rodapé rodapé rodapé";
}
cabeçalho {
grid-area: cabeçalho;
}

main {
grid-area: conteúdo;
}

footer {
grid-area: rodapé;
}

aside {
grid-area: barra-lateral;
}

Agora fizemos com que, quando visualizemos em um dispositivo grande, o sidebar esteja à esquerda e o conteúdo à direita, mas quando visualizarmos em um dispositivo pequeno, o sidebar esteja acima e o conteúdo abaixo.

Suponhamos que queremos que em uma área não haja nada, podemos colocar um ponto.

corpo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 35px 1fr 100px;
min-height: 100vh;
grid-template-areas:
"cabeçalho cabeçalho cabeçalho"
"barra lateral . conteúdo"
"rodapé rodapé rodapé";
}

@media (largura < 400px) {
corpo {
grid-template-columns: 1fr;
grid-template-rows: 35px 1fr 100px;
grid-template-areas:
"cabeçalho cabeçalho barra lateral"
"conteúdo conteúdo conteúdo"
"rodapé rodapé rodapé";
}
cabeçalho {
grid-area: cabeçalho;
}

main {
grid-area: conteúdo;
}

footer {
grid-area: rodapé;
}

aside {
grid-area: barra-lateral;
}

Agora em telas grandes há um espaço entre a barra lateral e o conteúdo.

Justify-items, Align-items, Justify-content e Align-content

Podemos alinhar o conteúdo e os elementos de um Grid com as propriedades justify-items, align-items, justify-content e align-content.

Justificar-itens

Podemos alinhar os elementos no eixo X do Grid com a propriedade justify-items.

Os valores que podemos utilizar são:

• start: alinha os elementos no início do eixo principal.
• end: alinha os elementos ao final do eixo principal.
• center: alinha os elementos no centro do eixo principal.
• stretch: estica os elementos para que ocupem todo o espaço disponível no eixo principal.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div></section>

seção {
display: grid;
justify-items: center;
}

Justificar-se

Com justify-items alinhamos todos os elementos no eixo principal do Grid, mas com justify-self podemos alinhar um elemento no eixo principal do Grid de forma diferente ao restante dos elementos.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
</section>

seção {
display: grid;
justify-items: center;}

section div:nth-child(2) {
justify-self: end;
}

It looks like you've shared an image, but I'm not able to view or interpret the contents of images directly. If you could provide a description of what's in the image or any specific details you'd like to discuss, I'd be happy to help!

Alinhar-itens

É muito semelhante a justify-items, mas em vez de alinhar os elementos no eixo X, ele os alinha no eixo Y.

Os valores que podemos utilizar são:

• start: alinha os elementos no início do eixo secundário.
• end: alinha os elementos ao final do eixo secundário.
• center: alinha os elementos no centro do eixo secundário.
• stretch: estica os elementos para que ocupem todo o espaço disponível no eixo secundário.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div></section>

seção {
display: grid;
align-items: center;
}

Alinhar-se

Com align-items alinhamos todos os elementos no eixo secundário do Grid, mas com align-self podemos alinhar um elemento no eixo secundário do Grid de forma diferente do restante dos elementos.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div>
</section>

seção {
display: grid;
align-items: center;}

section div:nth-child(2) {
align-self: end;
}

I'm unable to view or interpret images directly. Could you provide a description of the image or the context in which it's being used? I'd be happy to help with any questions or information related to it!

Place-content

Se quisermos usar justify-content e align-content ao mesmo tempo, podemos usar place-content.

Os valores que podemos utilizar são:

• start: alinha os elementos no início do eixo principal e secundário.
• end: alinha os elementos ao final do eixo principal e secundário.
• center: alinha os elementos no centro do eixo principal e secundário.
• stretch: estica os elementos para que ocupem todo o espaço disponível nos eixos principal e secundário.

<section>
<div>Texto 1</div>
<div>Texto 2</div>
<div>Texto 3</div></section>

seção {
display: grid;
place-content: center;
}

Prática de Grid

Um bom recurso para praticar Grid é Grid Garden.

Centralizar um div

Até agora vimos 3 formas de centralizar um div:

• Com position: absolute.
• Com display: flex.
• Com display: grid.

Animações

Dentro das animações existem dois tipos: as transições e as animações

Transições

Nas transições, alteramos um elemento de um estado inicial para um estado objetivo.

Suponhamos que temos o seguinte círculo

<div class="pulser"></div>

E seu css

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
}

Os elementos HTML podem ter estados, por exemplo o estado hover, que é quando o usuário passa o cursor sobre o elemento.

.pulser:hover {
escala: 2;
background: roxo;
box-shadow: 0 0 10px roxo;
}

Ao fazer scale fazemos com que o tamanho aumente, mas ocupando o mesmo espaço. No entanto, se tivéssemos alterado o width e o height, o botão teria mudado de lugar.

Transição

O que acontece é que, se agora passarmos o mouse sobre o círculo, o estado muda de repente, então aqui é onde entra a transição, que é como indicamos ao CSS como o estado deve ser modificado. Por exemplo, se quisermos que a transição dure 1 segundo

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
transição: 1s;
}

É importante colocar a transição em .pulser e não em .pulser:hover porque, caso contrário, a transição não seria aplicada ao voltar ao estado inicial. Isso significa que quando passarmos o mouse sobre o círculo veremos a transição, mas quando retirarmos o mouse do círculo não haverá uma transição de volta, e sim uma mudança abrupta para o estado inicial.

O que se quer transicionar transition-property

Com o anterior, seria feita uma transição de cor, tamanho e fundo, mas se não quisermos que ocorra uma transição de tudo, podemos indicá-lo através de transition-property.

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;transição: 1s;
transition-property: background-color, scale;
}

Desta forma, apenas será feita a transição de background-color e scale

Transições suaves

A transição padrão é feita de maneira linear, mas se quisermos alterá-la, podemos fazer isso usando transition-timing-function.

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
transição: 1s;
transition-property: background-color, scale;
transition-timing-function: ease-in-out;
}

Desta forma, a transição será mais suave no início e no fim. Os possíveis valores são os seguintes:

• linear
• facilidade
• facilidade-de-entrada
• facilidade-de-saída
• entrada-saída-suave
• cubic-bezier(n,n,n,n)

Transições passo a passo

Se quisermos que a animação seja feita em vários passos, podemos usar steps(n), onde n é o número de passos que queremos que tenha a animação.

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
transição: 1s;
transition-property: background-color, scale;
transition-timing-function: steps(5);
}

Desta forma, a transição será realizada em 5 etapas durante um segundo.

Controle total da transição com cubic-bezier

Para poder controlar perfeitamente a transição podemos usar cubic-bezier(n,n,n,n), onde n é um número entre 0 e 1 que indica a posição do ponto no eixo X e Y

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
transição: 1s;
transition-property: background-color, scale;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Com delay podemos indicar o tempo que tem que passar até que se inicie a transição

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
transição: 1s;
transition-property: background-color, scale;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-delay: 1s;
}

Com o delay é possível fazer animações de carregamento, por exemplo

<section>
Faça hover para mostrar os elementos
<div class="pulser"></div>
<div class="pulser"></div>
<div class="pulser"></div>
</section>

seção {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
altura: 100vh;
}

.pulso {
largura: 30px;
altura: 30px;
border-radius: 50%;
posição: relativa;
posição: relativa;
opacidade: 0;
transição: 2s;
transition-timing-function: ease;
}

seção {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
}

section:hover .pulser {
opacidade: 1;
}

.pulser:first-child {
transition-delay: 0s;
}

.pulso:nth-child(2) {
transition-delay: 300ms;
}

.pulser:last-child {
transition-delay: 600ms;
}

Em easings.co podemos ver e configurar as transições

Tudo em uma linha

Em .pulser colocamos transition e transition-timing-function, mas também podemos colocar tudo em uma linha.

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
transição: fundo 300ms ease-in-out 2s;
}

Com isso, o que lhe dissemos é para animar o background por 300ms, com uma transição suave no início e no fim, e esperar 2 segundos antes de começar a transição.

Se quisermos especificar vários elementos, podemos fazer isso da seguinte maneira

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
transição: fundo 300ms ease-in-out 2s, escala 1s ease-in-out 1s;
}

O que transicionar?

Na hora de adicionar transições, pode-se procurar o que pode ser transitado em Animatable CSS properties, mas para não perder tempo buscando, o melhor é transitar propriedades com sentido, por exemplo algo que pode ser transitado é uma cor, um tamanho, etc.

O ideal é fazer transições de propriedades com estados intermediários, por exemplo, uma fonte não possui um estado intermediário e não faz sentido fazer uma transição de uma fonte para outra.

Transições diferentes no início e no fim

Antes dissemos que é preciso colocar as transições no elemento e não no hover, porque dessa forma a transição só será visível quando o mouse estiver sobre o elemento e não quando você retirar o mouse. Bem, se quisermos ter animações diferentes no início e no final, podemos aproveitar isso. No elemento, colocaremos a transição final e no hover, a inicial.

.pulso {
largura: 30px;
altura: 30px;
background-color: #09f;
border-radius: 50%;
posição: relativa;
transição: fundo 300ms ease-in-out
}

.pulser:hover {escala: 2;
background: roxo;
box-shadow: 0 0 10px roxo;
transição: 1s;
transition-duration: 1s;
}

Desta forma, quando passarmos o mouse sobre o elemento, haverá uma transição de 300 ms e quando retirarmos o mouse, a transição será de 1 segundo.

Acessibilidade

Há pessoas que podem ficar tontas com as transições, então podemos adicionar uma media query para removê-las.

@media (prefers-reduced-motion: reduce) {
.pulso {
transição: none;}
}

Animações

As transições são as animações quando interagimos com os elementos, mas nas animações não precisamos interagir com o elemento, podem ser executadas sozinhas. Por exemplo, o botão típico que a cada certo tempo muda e se move para que você saiba que precisa pressioná-lo.

Keyframes

Voltamos ao exemplo da bola azul e removemos todas as transições

<div class="pulser"></div>

.pulso {
largura: 30px;
altura: 30px;background-color: #09f;
border-radius: 50%;
}

Temos que indicar ao CSS que queremos fazer uma animação, para isso usamos @keyframes e damos um nome à animação

@keyframes move {
}

Agora temos que dizer de onde começa este quadro, para isso usamos from e onde termina, para isso usamos to

@keyframes move {
do {
}
para {
}
}

Agora temos que indicar quais propriedades queremos que mudem, por exemplo a posição

@keyframes move {
do {
transform: translateX(0);
}
para {
transform: translateX(100px);
}
}

Desta forma, quando entrarmos na página, a bola azul se moverá 100px para a direita.

Depois

Em um elemento pode-se colocar um after que é um elemento que é colocado após o elemento principal.

<div class="pulser"></div>

.pulso {
largura: 30px;
altura: 30px;
background-color: blue;
border-radius: 50%;
}

.pulso::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
}

Isso faz colocar um círculo azul atrás do círculo azul, então agora temos dois círculos azuis.

Agora definimos os keyframes

@keyframes move {
0% {
opacidade: 0;
}
50% {
escala: 1.5;
opacidade: 40%;
}
100% {
opacidade: 60%;
}
}

E como já definimos os keyframes, agora só precisamos indicar ao CSS que queremos que a animação seja executada.

.pulso::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: azul;
border-radius: 50%;
z-index: -1;
    
animation-name: pulso;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}

Agora, quando a página for carregada, parecerá que o círculo azul está batendo.

Mas só se produz uma vez, para que se produza mais vezes precisamos adicionar animation-iteration-count

.pulser::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: azul;
border-radius: 50%;
z-index: -1;
    
animation-name: pulso;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

Agora será produzido de forma infinita

Movimento

Podemos fazer com que um elemento se mova

<div class="pulser"></div>

.pulso {
largura: 30px;
altura: 30px;
background-color: azul;
border-radius: 50%;
posição: relativa;
}

.pulso::after {
conteúdo: '';
posição: absoluta;
width: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation-name: mover;
duração-da-animação: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes move {
do {
transform: translateX(0);
}
para {
transform: translateX(100px);
}
}

Agora a bola azul se moverá 100px para a direita

Endereço

Para que a bola azul se mova para a esquerda, basta fazer animation-direction: reverse

.pulso::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: blue;
border-radius: 50%;z-index: -1;
    
animation-name: mover;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: reverse;
}

Se quisermos que a bola vá de um lado para o outro, temos que colocar animation-direction: alternate

.pulso::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: blue;
border-radius: 50%;z-index: -1;
    
animation-name: mover;
duração-da-animação: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}

Pausar animações

Imagine que você tem cartões que possuem animações. Talvez você queira que quando o mouse passe por cima do cartão, a animação pare. Para isso, podemos usar animation-play-state: paused.

.card:hover {
animation-play-state: paused;}

Aninhamento CSS

Nós declaramos no CSS as propriedades do pulser e as propriedades quando se faz hover, mas tudo pode ser feito junto.

.pulso {
largura: 30px;
altura: 30px;
background-color: azul;
border-radius: 50%;
posição: relativa;
    
&::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
        
animation-name: mover;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
    
&:hover::after {
animation-play-state: paused;
}
}

Como terminar as animações

Se temos uma animação que só é executada uma vez, por exemplo, a bola azul se movendo para a direita, quando a animação terminar, ela voltará bruscamente à sua posição inicial. Para evitar isso, podemos usar animation-fill-mode: forwards

.pulso::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation-name: mover;
animation-duration: 2s;
animation-timing-function: linear;
animation-direction: alternate;
animation-fill-mode: forwards;
}

Desta forma, quando a animação terminar, a bola azul ficará na posição final.

Se colocarmos backwards em vez de forwards, a animação começará do estado final.

Se colocarmos both, a animação começará do estado inicial e terminará no estado final.

Tudo em uma linha

Temos um monte de propriedades (animation-name, animation-duration, animation-timing-function, animation-direction, animation-fill-mode), mas podem ser colocadas todas em uma linha. Tudo o que foi mencionado acima poderia ser escrito assim

.pulso::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation: mover 2s linear alternate forwards;
}

Podemos criar várias animações

.pulser::after {
conteúdo: '';
posição: absoluta;
width: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: azul;
border-radius: 50%;
z-index: -1;
    
animação:
mover 2s linear alternate forwards,
aumentar 1s linear 2s both;
}

Mas como a animação agrandar não existe, nós a criamos com keyframes

@keyframes ampliar {
0% {
transform: scale: 1;
}
25% {
transform: scale: 1.5;
}
50% {
transform: scale: 2;
}
75% {
transform: scale: 1.6;
}
100% {
transform: scale: 2;
}
}

Vai ser reproduzida uma após a outra, porque foi adicionado um delay de 2 segundos ao agrandar, que é o tempo que dura a primeira animação. Mas se quisermos que seja ao mesmo tempo, temos que remover o delay.

.pulser::after {
conteúdo: '';
posição: absoluta;
largura: 100%;
altura: 100%;
top: 0;
esquerda: 0;
background-color: azul;
border-radius: 50%;
z-index: -1;
    
animação:
mover 2s linear alternate forwards,
aumentar 1s linear both;
}

Animações com scroll

Exemplo de barra de progresso

Por exemplo, se quisermos fazer uma barra que vá aumentando de tamanho à medida que descemos pela página

<section>
<div id="barra"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
</section>

seção {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
altura: 100vh;
}

#barra {
posição: fixed;
top: 0;
largura: 0%;
background-color: red;
altura: 1em;

animation: barra-grow auto linear;
animation-timeline: scroll(root block);
}

@keyframes barra-grow {
do {
largura: 0%;
}
do {
largura: 100%;
}
}

Como em animation colocamos um tempo de auto para saber quanto tempo a animação deve durar, o navegador olhará para animation-timeline, onde indicamos que ele deve prestar atenção ao scroll. Dentro da função scroll indicamos em qual elemento ele deve prestar atenção, no nosso caso colocamos root porque queremos o scroll da página, mas poderia ser qualquer outro elemento da página. Além disso, temos que indicar se queremos que ele preste atenção no scroll vertical ou horizontal, no nosso caso colocamos block porque queremos que ele preste atenção no scroll vertical (block é o valor padrão, portanto, se quiser, não precisa colocá-lo).

Exemplo de cabeçalho que muda de cor

Se quisermos que, quando fizermos scroll, o header mude de cor

<header>
<navegação>
<ul>
<li>Início</li>
<li>Sobre</li>
<li>Contato</li>
</ul>
</nav>
</header>

cabeçalho {
posição: sticky;
top: 0;
largura: 100%;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 2;
animation: header-color linear both;
animation-timeline: scroll(root block);
}

@keyframes header-color {
do {
cor de fundo: branco;
}
para {
background-color: cinza;
backdrop-filter: blur(5px);
cor: branco;
}
}

Mas fazendo assim, a animação do header só termina quando se chega ao final da página, mas nós queremos que ela termine quando é feito um pouco de scroll. Para isso, removemos o both do animation e colocamos animation-range: 0 200px para que a animação termine quando for feito um scroll de 200 px, ou seja, estamos dizendo que a animação vai dos 0 px até os 200 px.

cabeçalho {
posição: sticky;
top: 0;
largura: 100%;
cor de fundo: branco;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 2;

animation: header-color linear;
animation-timeline: scroll(root);
animation-range: 0 200px;
}

Exemplo de galeria de imagens

Vamos imaginar que temos um monte de imagens e queremos que, ao fazer scroll, elas vão aparecendo.

<section>
<img src="img1.jpg" alt="imagem 1">
<img src="img2.jpg" alt="imagem 2">
<img src="img3.jpg" alt="imagem 3">
<img src="img4.jpg" alt="imagem 4">
<img src="img5.jpg" alt="imagem 5">
<img src="img6.jpg" alt="imagem 6">
<img src="img7.jpg" alt="imagem 7">
<img src="img8.jpg" alt="imagem 8">
<img src="img9.jpg" alt="imagem 9">
<img src="img10.jpg" alt="imagem 10">
</section>

seção {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}

img {
largura: 100%;
altura: auto;
opacidade: 0;
animation: aparecer linear both;
animation-timeline: view()
animation-range: entrada 20% cobertura 30%;
}

@keyframes aparecer {
do {
opacidade: 0;
}
para {
opacidade: 1;
}
}

Com animation-timeline: view() estamos dizendo para fazer a animação quando a imagem estiver visível na tela e com animation-range: entry 20% cover 30% estamos dizendo que a animação deve começar quando a imagem ocupar 20% da tela e terminar quando ocupar 30% da tela.

Ao colocar both em animation, estamos dizendo que a animação deve ocorrer tanto ao aparecer quanto ao desaparecer, ou seja, quando a imagem aparece, vemos a animação, mas quando ela desaparece, também vemos a animação ao contrário, isto é, a imagem vai gradualmente de uma opacidade de 1 para 0.