https://github.com/edijunior88/freecodecamp_design_visual_aplicado
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.
https://github.com/edijunior88/freecodecamp_design_visual_aplicado
css css-animations css3 css3-animations html html-css html5
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/edijunior88/freecodecamp_design_visual_aplicado
- Owner: EdiJunior88
- License: mit
- Created: 2021-11-19T12:13:00.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T16:28:01.000Z (about 1 year ago)
- Last Synced: 2025-01-22T19:24:01.233Z (5 months ago)
- Topics: css, css-animations, css3, css3-animations, html, html-css, html5
- Language: HTML
- Homepage: https://edijunior88.github.io/FreeCodeCamp_Design_Visual_Aplicado/
- Size: 583 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FreeCodeCamp
Design Visual Aplicado
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
Tecnologias Utilizadas
Para ver todas as tecnologias [clique aqui](/techstack.md)