72 coisas sobre Design Visual Aplicado que aprendi com o freeCodeCamp

tl:dr: tudo sobre css que você não aprendeu no módulo básico e como usar isso para que seus layouts tenham um design interessante.

---

CSS: Como se alinha o texto de um elemento a esquerda?

text-align: left;

CSS: Como se alinha o texto de um elemento a direita?

text-align: right;

CSS: Como se alinha o texto de um elemento ao centro?

text-align: center;

CSS: Como se justifica o texto de um elemento?

text-align: justify;

CSS: Defina a largura de um elemento em 245px.

width: 245px;

CSS: Defina a altura de um elemento em 25px.

height: 25px;

HTML: Qual elemento deixa o texto encapsulado em negrito?

<strong>

CSS: Define o elemento como negrito.

font-weight: bold;

HTML: Qual elemento deixa o texto sublinhado?

<u>

CSS: Defina o elemento como sublinhado.

text-decoration: underline;

HTML: Qual elemento dá ênfase no texto?

<em>

CSS: Defina o elemento como itálico.

font-style: italic;

HTML: Qual elemento passa uma linha no texto?

<s>

CSS: Defina o elemento com uma linha no meio.

text-decoration: line-through;

HTML: Qual elemento cria uma linha horizontal?

<hr>

CSS: O que significa rgba?

red (vermelho)
green (verde)
blue (azul)
alpha (opacidade)

CSS: Os valores RGB vão de 0 até 255.

CSS: O valor alpha da função rgba() vai de 0 até 1.

CSS: O que faz a função rgba()?

Seta uma cor com opacidade a um elemento.

CSS: Defina o tamanho da fonte do elemento em 27px

font-size: 27px;

CSS: Defina a cor de frente de um elemento com a cor “blue”.

color: blue;

CSS: Defina a cor de fundo de um elemento com a cor “green”.

background-color: green;

CSS: Qual propriedade adiciona um sombra a um elemento?

box-shadow

CSS: Defina a opacidade de um elemento para 0.7

opacity: 0.7;

CSS: Defina o texto como somente MAIÚSCULAS.

text-transform: uppercase;

CSS: Defina o texto como somente minúsculas.

text-transform: lowercase;

CSS: O que a propriedade line-height faz?

Ela muda a quantidade de espaço vertical, que cada linha tem.

CSS: Define o espaço vertical da linha em 25px

line-height: 25px;

CSS: O que é uma pseudo classe?

É uma palavra chave que seleciona o elemento em um estado especifico, ex: :hover.

CSS: Qual pseudo-classe altera o elemento quando o mouse está sobre ele?

:hover

CSS: O que acontece com o elemento quando se seta “position: relative;“?

O elemento continua ocupando o mesmo espaço, mas seu conteúdo pode ser movido com top, bottom, left e right, a partir da sua posição original.

CSS: O que acontece quando um elemento tem “position: relative;” e “top: 10px;“?

O elemento é movido 10px para baixo, a partir no topo.

CSS: O que acontece quando um elemento tem “position: relative;” e “bottom: 10px;“?

O elemento é movido 10px para cima, a partir de baixo.

CSS: O que acontece quando um elemento tem “position: relative;” e “left: 10px;“?

O elemento é movido 10px para a direita, a partir da esquerda.

CSS: O que acontece quando um elemento tem “position: relative;” e “right: 10px;“?

O elemento é movido 10px para a esquerda, a partir da direita.

CSS: O que acontece com o elemento quando se seta “position: absolute;“?

O elemento deixa de ocupar espaço e se alinha com a posição do seu elemento-pai.

CSS: O que acontece com o element quando se seta “position: fixed;“?

O elemento deixa de ocupar espaço e se alinha com a posição da janela do navegador.

CSS: O que a propriedade float faz?

Tira o elemento do documento e coloca ele alinhado a esquerda ou a direita do seu elemento pai.

CSS: O que acontece se vários elementos dentro de um mesmo elemento pai tiveram a propriedade float setada?

Eles vão "encostando" um no outro até o tamanho máximo do elemento pai.

CSS: O que faz a propriedade z-index?

Ela muda a ordem que os elementos são empilhados no documento, caso eles se sobreponham.

CSS: Por padrão, tendo dois elementos que se sobreponham, qual elemento ficará por cima?

O elemento que vier por último no HTML.

CSS: Como se centraliza um elemento?

Você seta a margin do elemento para auto.

CSS: Defina a propriedade que centraliza o elemento.

margin: auto;

Cores: O que significa hsl()?

Hue (Matiz)
Saturation (Saturação)
Lightness ou Luminance (Luminância)

Cores: O que é a Matiz (Hue) do hsl()?

Hue é a cor em si.

Cores: O valor do hue vai de 0 a 360

Cores: O que é Saturação do hsl()?

É a quantidade de cinza na cor.

Cores: Uma cor 100% saturada tem 0% de cinza nela

Cores: O que é o lightness do hsl()?

É a quantidade de preto ou branco na cor.

Cores: 50% é o valor de lightness para a cor normal do hsl()

Cores: 100% é o valor de lightness para fazer branco no hsl()

Cores: 0% é o valor de lightness para fazer preto no hsl()

Cores: Como se ajusta o tom de uma cor no hsl()?

Você adiciona ou remove a saturação e o lightness.

CSS: Qual função adiciona um cor em gradiente?

linear-gradient();

CSS: Crie um gradiente com 35 graus de angulo, da cor vermelha para a cor azul.

linear-gradient(35deg, red, blue);

CSS: Qual função cria uma gradiente que se repete?

repeating-linear-gradient();

CSS: Como se adiciona uma imagem ao fundo do elemento vinda de uma url?

background: url();

CSS: Transforme o elemento para o dobro do seu tamanho.

transform: scale(2);

CSS: Deforme o elemento em 24 graus no eixo X.

transform: skewX(24deg);

CSS: Deforme o elemento em -10 graus no eixo Y.

transform: skewY(-10deg);

CSS: Qual função rotaciona o elemento?

rotate()

CSS: Como se seta o nome de uma animação como rainbow?

animation-name: rainbow;

CSS: Como se seta a duração de uma animação em 4 segundos?

animation-duration: 4s;

CSS: Qual elemento seta cada etapa da animação chamada rainbow?

@keyframes rainbow { ... }

CSS: Como se faz para que a animação não resete ao final?

animation-fill-mode: forwards;

CSS: top, bottom, left e right podem ser usando nos @keyframes?

Sim.

CSS: Como se faz para deixar uma animação rodando infinitamente?

animation-iteration-count: infinite;

CSS: Como se faz para uma animação só rodar 3 vezes?

animation-iteration-count: 3;

CSS: Qual propriedade muda o timing de uma animação?

animation-timing-function

CSS: Como se muda o timing de uma animação para linear?

animation-timing-function: linear;

CSS: Como se faz uma animação linear usando a função cubic-bezier?

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

CSS: Quais parâmetros a função cubic-bezier recebe?

x1, y1, x2, y2