Crie 5 Navbars Fáceis com CSS
Transição e animações para navbars web
Olá a todos! Bem-vindos ao curso Crie 5 Navbars Fáceis com CSS. Este curso está dividido em 5 seções, e abaixo você encontrará um resumo do conteúdo abordado em cada vídeo:
Primeira Seção: Introdução
Nesta seção, você terá uma visão geral do que aprenderá ao longo de todo o curso.
Segunda Seção: Menu Dropdown
Nesta seção, você aprenderá como criar uma transição para o ícone do menu usando a propriedade transform. O ícone de hambúrguer se transformará em uma seta voltada para baixo. Você também aprenderá como adicionar uma sombra à sua navbar e links, além de criar uma animação para os links quando você passar o mouse sobre eles. Esta seção também ajudará você a melhorar suas habilidades em CSS.
Terceira Seção: Menu de Barra Lateral com Gradiente
Nesta seção, você aprenderá como criar um ícone de hambúrguer com uma cor de gradiente que se transforma em um X de gradiente quando clicado. Você também adicionará transições para os ícones do menu, navbar responsiva e links do menu. Além disso, você criará animações de hover para os links alternando suas cores.
Quarta Seção: Menu de Altura Total
Nesta seção, você aprenderá como criar uma transição minimalista para o ícone de hambúrguer quando clicado. Você também exibirá um menu de altura total ao clicar no ícone do menu, usando uma transição agradável com a propriedade transform.
Quinta Seção: Menu de Barra Lateral Deslocado
Nesta seção, você aprenderá como criar um menu de barra lateral que desloca a imagem de fundo ao clicar no ícone. Você também girará o ícone de seta 180 graus ao clicar, usando a propriedade transform e o valor rotate.
Sexta Seção: Menu de Barra Lateral com Ícones
Nesta seção, você aprenderá como criar um menu de barra lateral com ícones no lado esquerdo da página. Esses ícones exibirão o nome do link quando você passar o mouse sobre a barra de navegação. Você também adicionará um fundo de gradiente e uma animação de zoom-in aos links quando passar o mouse sobre eles. Além disso, uma transição será adicionada à navbar.
Este curso é voltado para iniciantes e programadores intermediários, web designers e desenvolvedores web. Todo o código é fornecido no arquivo HTML, incluindo o código CSS e JavaScript. Cada menu possui um arquivo zip anexado, que pode ser encontrado na seção recursos juntamente com os arquivos HTML e imagens.
Junte-se a nós agora e comece a criar navbars incríveis com CSS!
