Propriedades CSS3

CSS3 é a evolução mais recente da linguagem Cascading Style Sheets. Em vez de ser um único lançamento monolítico, o CSS3 é dividido em módulos independentes — Animações, Flexbox, Grid Layout, Fundos e Bordas, Transforms, Filtros e mais — que os navegadores podem implementar e lançar separadamente. Cada módulo adicionou novas propriedades ao conjunto original do CSS2, oferecendo cantos arredondados, gradientes, sombras, animações, layouts flexíveis e baseados em grid, além de filtros visuais sem necessidade de imagens ou JavaScript.

Esta página é um índice de referência rápida das propriedades introduzidas ou significativamente estendidas no CSS3, organizadas pelo módulo ao qual pertencem. Cada linha leva a um capítulo completo com sintaxe, valores e exemplos ao vivo.

Se você é novo na linguagem, comece pelos capítulos Introdução ao CSS e Sintaxe CSS antes de se aprofundar em propriedades individuais.

Como Usar Esta Referência

• Encontre uma propriedade por grupo. Os títulos abaixo espelham os módulos do CSS3, então se você precisa de uma propriedade de layout, procure em Flexible Box Layout ou Grid Layout; para movimento, procure em Animation ou Transitions; para efeitos visuais, procure em Filter Effects ou Transform Properties.
• Clique para ver detalhes. Cada propriedade tem link para seu próprio capítulo com a lista completa de valores, padrões e demos executáveis.
• Atenção ao suporte dos navegadores. Os módulos CSS3 alcançaram suporte estável e sem prefixo em momentos diferentes. A maioria das propriedades abaixo é segura em todos os navegadores modernos, mas sempre verifique o suporte para adições mais recentes (por exemplo, certas propriedades column-*) antes de utilizá-las em produção.

Uma Nota sobre Prefixos de Fornecedor

Enquanto os módulos CSS3 ainda eram experimentais, os navegadores lançavam propriedades com prefixos de fornecedor como -webkit-, -moz-, -ms- e -o-. Você ainda pode encontrá-los em bases de código mais antigas:

/* Older code — prefixes were needed during the experimental phase */
.box {
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg); /* Always list the unprefixed property last */
}

Para as propriedades listadas abaixo, você quase nunca precisa de prefixos hoje em dia — escreva o nome padrão sem prefixo. Use prefixos apenas quando precisar oferecer suporte a um navegador legado, e sempre liste a propriedade padrão por último para que ela sobreponha as demais.

CSS3 vs. CSS2 — O Que Mudou?

O CSS2 cobria o modelo de caixa fundamental, cores, fontes e posicionamento. O CSS3 construiu sobre essa base com as seguintes capacidades que estavam ausentes ou muito limitadas anteriormente:

• Cantos arredondados e imagens de borda — border-radius, border-image
• Sombras — box-shadow, text-shadow
• Gradientes e múltiplos fundos — background-size, background-clip
• Layouts flexíveis e baseados em grid — Flexbox (flex, align-items, …), Grid (grid, grid-template-columns, …)
• Transforms 2D e 3D — transform, perspective
• Transições suaves de estado — transition
• Animações por keyframes — animation, @keyframes
• Texto em múltiplas colunas — column-count, column-gap
• Filtros visuais — filter (blur, brightness, contrast, …)
• Transparência personalizada — opacity

Lista de Propriedades CSS3

Propriedades de Animação

As animações por keyframes permitem descrever como um elemento transita por uma série de instantâneos de estilo. A regra @keyframes define os instantâneos; as propriedades animation-* as vinculam e controlam em um elemento.

/* Minimal animation example */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.banner {
  animation: slide-in 0.4s ease-out both;
}

Propriedades de Fundo

O CSS3 estendeu os fundos para suportar dimensionamento, regiões de recorte e múltiplas imagens em camadas em um único elemento.

/* Responsive hero with background-size */
.hero {
  background-image: url('/img/hero.jpg');
  background-size: cover;       /* fills the box; crop as needed */
  background-position: center;
  background-clip: border-box;  /* default; image reaches border edge */
}

Propriedades de Borda

O CSS3 adicionou cantos arredondados e bordas baseadas em imagens — recursos que antes exigiam truques com imagens.

/* Rounded button */
.btn {
  border-radius: 6px;
  border: 2px solid steelblue;
}

/* Pill shape */
.badge {
  border-radius: 999px;
}

Cor e Transparência

Efeitos de Filtro

A propriedade filter aplica efeitos gráficos (blur, brilho, contraste, sombra projetada, etc.) diretamente no CSS — sem editor de imagens necessário.

.card:hover img {
  filter: brightness(1.1) saturate(1.2);
  transition: filter 0.2s ease;
}

.modal-backdrop {
  filter: blur(4px);
}

Flexible Box Layout

Flexbox é um modelo de layout unidimensional — distribui itens ao longo de um único eixo (linha ou coluna) e lida com alinhamento, espaçamento e quebra de linha automaticamente.

/* Classic centered card */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}

.card {
  flex: 1 1 300px; /* grow | shrink | basis */
}

Para um guia completo, consulte O Guia Definitivo do Flexbox.

Propriedades de Fonte

Grid Layout

CSS Grid é um sistema de layout bidimensional — posiciona itens em linhas e colunas simultaneamente, tornando-o ideal para layouts de página e grids de componentes complexos.

/* Three-column responsive grid */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Named template areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

Propriedades de Layout Multi-Coluna

O layout multi-coluna distribui o conteúdo automaticamente por um número ou largura definida de colunas — semelhante ao layout de um jornal.

/* Two-column article body */
.article-body {
  columns: 2 400px;   /* shorthand: column-count column-width */
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

h2 {
  column-span: all; /* heading breaks out of columns */
}

Propriedades de Contorno

Propriedades de Texto

O CSS3 adicionou controle sobre overflow de texto, quebra, sombras e estilização refinada de decorações.

/* Truncate long titles with ellipsis */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle heading shadow */
h1 {
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Propriedades de Transform

Transforms movem, rotacionam, escalam ou inclinam elementos no espaço 2D ou 3D sem afetar o fluxo do documento.

/* 2D card flip on hover */
.card {
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-back {
  backface-visibility: hidden;
}

Propriedades de Transição

As transições animam mudanças de propriedade de um valor a outro ao longo de uma duração especificada quando uma propriedade CSS muda (ex.: em :hover).

/* Smooth color + shadow on hover */
.btn {
  background-color: steelblue;
  box-shadow: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background-color: dodgerblue;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Transições vs. animações: use transition para mudanças orientadas por estado (hover, focus, active) — são mais simples de escrever. Use animation com @keyframes para movimentos independentes, em loop ou com múltiplas etapas que ocorrem sem interação do usuário.

Propriedades de Formatação Visual

Referências Relacionadas

Assim que souber qual propriedade precisa, estes capítulos cobrem os recursos CSS3 mais usados em profundidade:

• CSS Animation e @keyframes para movimento baseado em keyframes.
• O Guia Definitivo do Flexbox para layout unidimensional.
• grid e grid-template-columns para layout de página bidimensional.
• filter para blur, brilho, contraste, drop-shadow e outros efeitos gráficos.
• transform e transition para efeitos visuais e transições suaves de estado.
• border-radius e box-shadow para estilização decorativa moderna.

Prática