Nos velhos tempos do desenvolvimento web, os desenvolvedores confiavam no Flash da Adobe sempre que precisavam fazer qualquer tipo de animação para seu site. Com o passar do tempo, as pessoas abandonaram o Flash e começaram a realizar muitas dessas coisas com a ajuda de CSS e JavaScript. Finalmente, com a ajuda do CSS3 e o amplo suporte do navegador que ele possui agora, podemos fazer algumas coisas incríveis simplesmente usando um pouco do CSS3 e nada mais.
Neste tutorial, mostrarei como criar um menu de navegação animado legal com CSS3. Você pode vê-lo em ação na demonstração do CodePen abaixo:
Animado para implementar o menu? Vamos começar.
Decidindo a Marcação
O HTML5 introduziu muitas novas tags, bem como recursos. Isso significa que não precisamos mais usar o div elemento para envolver tudo o que queremos estilizar. Nossa marcação agora pode ser muito mais sensata e semântica.
Vamos começar com a seção de cabeçalho do site. Vamos envolvê-lo dentro de um header elemento como mostrado abaixo.
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
O elemento de cabeçalho contém um vazio div que apenas atua como um preenchimento de espaço. Depois disso, temos um nav elemento que contém nossa navegação principal. Os links de navegação são basicamente parte de uma lista não ordenada que estilizaremos posteriormente.
Agora, escreveremos algumas marcações para o conteúdo principal da página da web. vamos usar as tags section e article aqui.
1 |
|
2 |
|
3 |
What is Lorem Ipsum?
|
4 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida felis et fringilla aliquam. Phasellus erat lorem, efficitur sed facilisis non, scelerisque a metus. Nam sit amet fermentum felis, vitae ultrices purus. Ut dui ligula, sagittis ut blandit ac, interdum ut urna.
|
5 |
Cras quis magna sit amet dui ultrices elementum. Suspendisse laoreet sem nisi, pretium vestibulum sapien commodo cursus. Sed et gravida tellus. Suspendisse nec dapibus mi, quis dignissim massa. Sed sit amet velit scelerisque, tristique ipsum in, tristique orci.
|
6 |
Aliquam dictum pretium orci, at molestie augue euismod non. Nam ac lobortis mauris, eu ultrices leo. Etiam facilisis arcu non libero molestie, eget vestibulum urna rhoncus.
|
7 |
|
8 |
|
o article tag contém o conteúdo principal da página da web, ou seja, a postagem do blog enquanto o section tag contém diferentes seções da postagem do blog.
Estilizando o Cabeçalho
Como mencionei anteriormente, o header da nossa página da Web conterá um preenchimento de espaço div elemento no topo. Como este será um espaço vazio em nosso exemplo, atribuiremos a ele uma altura de 150px. Aqui está todo o CSS aplicado ao div elemento.
1 |
div.top-wrapper { |
2 |
height: 150px; |
3 |
background: linear-gradient(black, #616161); |
4 |
padding: 20px; |
5 |
position: relative; |
6 |
z-index: 999; |
7 |
box-shadow: 0 2px 5px black; |
8 |
}
|
nós queremos o div elemento a ser colocado parcialmente sobre os links de navegação. Por isso aplicamos um z-index de 999. No entanto, esta propriedade não funcionará em elementos posicionados estaticamente, então tivemos que alterar o position para relative. o box-shadow A propriedade nos dá o sutil efeito 3D que o preenchimento div está acima do nosso menu de navegação.
Também podemos aplicar um gradiente linear repetitivo ao nosso body elemento para tornar o fundo mais interessante em vez de branco puro.
1 |
body { |
2 |
background: repeating-linear-gradient( |
3 |
45deg, |
4 |
#424242 0px, |
5 |
#424242 5px, |
6 |
#6e6e6e 5px, |
7 |
#6e6e6e 7px |
8 |
);
|
9 |
}
|
Estilizando o menu de navegação
Os links no menu de navegação precisam ser colocados lado a lado horizontalmente com espaçamento uniforme entre eles. Existem várias maneiras de conseguir isso, mas usaremos o flexbox porque é o mais fácil e eficaz para essa situação específica.
Aqui está o CSS que aplicaremos à nossa lista não ordenada, aos elementos da lista não ordenada e aos links dos elementos da lista não ordenada:
1 |
nav ul { |
2 |
margin-left: 20px; |
3 |
list-style: none; |
4 |
display: flex; |
5 |
gap: 0.1rem; |
6 |
}
|
7 |
|
8 |
nav ul li { |
9 |
background: black; |
10 |
padding: 1.5rem 1rem 0.5rem 1rem; |
11 |
position: relative; |
12 |
border-radius: 0 0 10px 10px; |
13 |
top: -1.25rem; |
14 |
transition: 0.2s all; |
15 |
text-transform: uppercase; |
16 |
}
|
17 |
|
18 |
nav ul li a { |
19 |
color: white; |
20 |
text-decoration: none; |
21 |
}
|
Configurando o display para flex para nossa lista não ordenada coloca todos os elementos da lista lado a lado e define o valor de gap propriedade para 0,1rem introduz espaçamento adicional entre eles.
Também aplicamos preenchimento irregular aos nossos elementos de lista. Você pode ver que o preenchimento superior está definido como 1,5rem enquanto o preenchimento inferior é apenas 0,5rem. Estamos compensando o valor do offset atribuído ao top propriedade. Também queremos que o fundo seja arredondado, então aplicamos o border-radius de 10px para os cantos inferior direito e inferior esquerdo.
Por que estamos compensando o topo posição dos elementos da nossa lista? Isso ocorre porque iremos animá-los para uma posição inferior ao passar o mouse. o transition A propriedade nos ajuda a tornar a animação suave em vez de abrupta.
Os links dentro dos elementos da lista terão uma cor azul clara e um sublinhado por padrão. Nós nos livramos deles definindo o color para branco e a text-decoration para Nenhum.
Por fim, deixaremos o menu mais colorido com o CSS abaixo:
1 |
nav ul li:nth-child(1) { |
2 |
background: #ff9800; |
3 |
}
|
4 |
|
5 |
nav ul li:nth-child(2) { |
6 |
background: #c2185b; |
7 |
}
|
8 |
|
9 |
nav ul li:nth-child(3) { |
10 |
background: #1e88e5; |
11 |
}
|
12 |
|
13 |
nav ul li:nth-child(4) { |
14 |
background: #7cb342; |
15 |
}
|
16 |
|
17 |
nav ul li:nth-child(5) { |
18 |
background: #546e7a; |
19 |
}
|
Como você pode ver, não precisamos atribuir classes separadas a cada um dos links do menu de navegação. Conseguimos estilizá-los individualmente simplesmente usando o enésimo filho seletores. Aqui está o que temos até agora:
Estilizando o conteúdo do artigo
Nosso menu de navegação agora se parece com o que pretendíamos. No entanto, o conteúdo principal do artigo é pouco visível. Vamos remediar isso primeiro. Tudo o que precisamos fazer para melhorar a visibilidade e a aparência do conteúdo é aplicar o seguinte CSS:
1 |
article.main-content, nav { |
2 |
width: 90%; |
3 |
margin: 0px auto; |
4 |
}
|
5 |
|
6 |
section { |
7 |
background: white; |
8 |
padding: 2rem; |
9 |
border-radius: 0.5rem; |
10 |
position: relative; |
11 |
z-index: 999; |
12 |
top: -0.5rem; |
13 |
}
|
14 |
|
15 |
p { |
16 |
line-height: 1.5; |
17 |
margin: 1rem 0; |
18 |
}
|
Aplicando o mesmo width e margin ao nosso artigo e a navegação os alinha corretamente. Lembre-se de que atribuímos um margin-left de 20px anterior à nossa lista não ordenada anterior? Isso manterá nosso menu de navegação ligeiramente à direita da borda esquerda de nosso artigo.
o z-index A propriedade aqui também é aplicada para manter o conteúdo acima dos links do menu quando eles são animados ao passar o mouse.
Animando o Menu de Navegação
Há três propriedades que queremos animar para nossos links de menu de navegação. A primeira é a posição onde movemos os itens do menu para uma posição inferior verticalmente.
Também atualizamos a propriedade de preenchimento para que o preenchimento superior seja reduzido a 0,5rem enquanto o preenchimento inferior aumenta para 1,5rem. Os valores de preenchimento superior e inferior são basicamente invertidos porque os links do menu de navegação agora serão cortados na parte inferior em vez da parte superior.
A terceira propriedade que animamos é o border-radius que se torna 10px para o canto superior esquerdo e superior direito. Torna-se 0 para os cantos inferior esquerdo e inferior direito.
Aqui está o CSS que aplica essas alterações sempre que um usuário passa o mouse sobre os itens do menu:
1 |
nav ul li:hover { |
2 |
top: 20px; |
3 |
padding: 0.5rem 1rem 1.5rem 1rem; |
4 |
border-radius: 10px 10px 0 0; |
5 |
}
|
Toda essa animação acontece dentro 0,2s porque essa é a duração que atribuímos ao transition propriedade anteriormente.
Animando os pseudoelementos
A única coisa que nos resta agora é criar e animar a caixa branca no topo dos links de navegação. Conseguimos isso com a ajuda de pseudoelementos. Nós usamos o ::after pseudo classe para criar um pseudo-elemento. Este pseudo-elemento torna-se o último filho do nosso seletor original.
Aqui está o CSS que usamos para criar os pseudo-elementos:
1 |
nav ul li::after { |
2 |
content: ""; |
3 |
position: absolute; |
4 |
width: 100%; |
5 |
height: 20px; |
6 |
background: white; |
7 |
top: -30px; |
8 |
left: 0; |
9 |
border-radius: 0 0 10px 10px; |
10 |
}
|
Fornecer um valor para o content A propriedade é importante mesmo se esse valor for uma string vazia. Nós definimos o position para absolute para tirar o elemento do fluxo normal do documento e posicioná-lo da maneira que quisermos. Uma largura de 100% garante que todos os pseudo-elementos correspondam ao width de seus respectivos links de navegação.
O resultado final fica assim:
Pensamentos finais
Neste tutorial, criamos um menu de navegação animado legal usando apenas algumas propriedades CSS3 sem escrever uma única linha de JavaScript. Existem muitas maneiras interessantes de usar CSS3 para animar conteúdo em uma página da web. Embora alguns cenários muito complicados possam justificar o uso de JavaScript para animação. Você ficará surpreso com o que pode ser feito com apenas alguns CSS. Leia esses dois posts para se inspirar e saber mais.
