O design visual é uma combinação de tipografia, teoria de cores, gráficos, animação, layout da página e mais para ajudar a entregar sua mensagem única.
Neste curso, você vai aprender como aplicar esses diferentes elementos do design visual em suas páginas da web.
Página do Projeto: https://edijunior88.github.io/FreeCodeCamp_Design_Visual_Aplicado/
- Criar equilíbrio visual usando a propriedade text-align
- Ajustar a largura de um elemento usando a propriedade width
- Ajustar a altura de um elemento usando a propriedade height
- Usar a tag strong para deixar o texto em negrito
- Usar a tag u para sublinhar o texto
- Usar a tag em para colocar o texto em itálico
- Usar a tag s para deixar o texto tachado
- Criar uma linha horizontal usando o elemento hr
- Ajustar a propriedade background-color (cor de fundo) de textos
- Contrastar o tamanho de um elemento de título com o de um parágrafo
- Adicionar sombras a um elemento de cartão
- Diminuir a opacidade de um elemento
- Usar a propriedade text-transform para deixar o texto em letras maiúsculas
- Definir o tamanho da tipografia para vários elementos de cabeçalho
- Definir a espessura da tipografia para vários elementos de cabeçalho
- Definir o tamanho da tipografia do texto de um parágrafo
- Definir a altura da linha dos parágrafos
- Mudar o estilo de um link ao passar o mouse
- Mudar a posição relativa de um elemento
- Mover um elemento posicionado relativamente com as propriedades de deslocamentos CSS
- Prender um elemento ao seu elemento pai com posicionamento absolute
- Prender um elemento na tela com posicionamento fixed
- Empurrar os elementos para a esquerda ou direita com a propriedade float
- Alterar a ordem de aparição de elementos sobrepostos com a propriedade z-index
- Centralizar um elemento horizontalmente usando a propriedade margin
- Aprender sobre cores complementares
- Aprender sobre cores terciárias
- Ajustar a cor de vários elementos para cores complementares
- Ajustar a tonalidade de uma cor
- Ajustar o tom de uma cor
- Criar um gradiente linear com CSS
- Usar um gradiente linear com CSS para criar um elemento listrado
- Criar textura adicionando um padrão sutil como uma imagem de fundo
- Usar a propriedade scale de transformação do CSS para alterar o tamanho de um elemento
- Usar a propriedade scale de transformação do CSS para dimensionar um elemento ao passar o cursor do mouse sobre ele
- Usar a propriedade skewX de transformação do CSS para distorcer um elemento ao longo do eixo X
- Usar a propriedade skewY de transformação do CSS para distorcer um elemento ao longo do eixo Y
- Criar um desenho usando CSS
- Criar formas complexas usando CSS e HTML
- Aprender como funcionam as propriedades de animação e @keyframes do CSS
- Usar animações CSS para alterar o estado de foco de um botão
- Modificar o modo de preenchimento de uma animação
- Criar movimentos usando animações CSS
- Criar uma direção visual ao esmaecer um elemento da esquerda para a direita
- Animar elementos infinitamente
- Criar uma animação infinita de um coração batendo com CSS
- Animar elementos em diferentes momentos
- Animar múltiplos elementos em diferentes momentos
- Mudar a velocidade da animação usando palavras-chave
- Aprender como as curvas de Bézier funcionam
- Usar uma curva de Bézier para mover um elemento
- Tornar o movimento da animação mais natural usando uma curva de Bézier
Para ver todas as tecnologias clique aqui
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent