Exemplos: Propriedades CSS

← Voltar para a aula

Tipografia

Ajuste as propriedades e veja o texto reagir em tempo real:

font-size: 18px

line-height: 1.6

letter-spacing: 0em

font-weight300 (light)400 (normal)600 (semibold)700 (bold)900 (black)

text-alignleftcenterrightjustify

O rápido cão marrom salta sobre a lebre preguiçosa. Ajuste os controles acima para ver o efeito de cada propriedade tipográfica neste parágrafo de exemplo.

font-size: 18px;
line-height: 1.6;
letter-spacing: 0em;
font-weight: 400;
text-align: left;

Bordas, raio e sombra

Monte um box-shadow peça por peça:

offset-x: 0px

offset-y: 8px

blur: 20px

spread: 0px

border-radius: 12px

inset

border-radius: 12px;
box-shadow: 0px 8px 20px 0px rgba(74, 108, 247, 0.35);

Transform + transition

Ajuste o transform alvo e a transição, depois clique no botão para animar:

translateX: 40px

translateY: 0px

rotate: 15deg

scale: 1.1

transition-duration: 0.4s

timing-functionlineareaseease-inease-outease-in-outcubic-bezier (bounce)

.box

transition: transform 0.4s ease;
transform: none;

Pseudo-classes: nth-child

Escolha uma fórmula e veja quais linhas seriam selecionadas:

seletortodoseven (pares)odd (ímpares)3n (a cada 3)first-childlast-child

Linha 1

Linha 2

Linha 3

Linha 4

Linha 5

Linha 6

tr:nth-child(even) { background: #f8faff; }

Passe o mouse sobre a caixa abaixo para ver ::after em ação (usado para marcar campos obrigatórios):

Passe o mouse aqui

Variáveis CSS

Troque o tema clicando nas cores; tudo abaixo lê a mesma variável --demo-brand:

--demo-brand

Cartão

usa background: var(--demo-brand)

:root { --demo-brand: #4a6cf7; }

.card { background: var(--demo-brand); }