Propiedades de CSS3

CSS3 es la evolución más reciente del lenguaje de Hojas de Estilo en Cascada. En lugar de ser una versión monolítica única, CSS3 está dividido en módulos independientes — Animaciones, Flexbox, CSS Grid, Fondos y Bordes, Transforms, Filtros y más — que los navegadores pueden implementar e incorporar por separado. Cada módulo añadió nuevas propiedades sobre el conjunto original de CSS2, permitiendo esquinas redondeadas, degradados, sombras, animaciones, diseños flexibles y basados en cuadrícula, y filtros visuales sin necesidad de imágenes ni JavaScript.

Esta página es un índice de referencia rápida de las propiedades introducidas o extendidas significativamente en CSS3, organizadas por el módulo al que pertenecen. Cada fila enlaza a un capítulo completo con sintaxis, valores y ejemplos en vivo.

Si eres nuevo en el lenguaje, comienza con los capítulos de Introducción a CSS y Sintaxis CSS antes de profundizar en propiedades individuales.

Cómo Usar Esta Referencia

• Busca una propiedad por grupo. Los encabezados a continuación reflejan los módulos de CSS3, así que si necesitas una propiedad de diseño busca en Diseño de Caja Flexible o CSS Grid; para movimiento busca en Animación o Transiciones; para efectos visuales busca en Efectos de Filtro o Propiedades Transform.
• Haz clic para obtener más detalles. Cada propiedad enlaza a su propio capítulo con la lista completa de valores, valores predeterminados y demos interactivos.
• Ten en cuenta la compatibilidad con navegadores. Los módulos de CSS3 alcanzaron soporte estable sin prefijos en momentos diferentes. La mayoría de las propiedades a continuación son seguras en todos los navegadores modernos, pero verifica siempre el soporte para adiciones más recientes (por ejemplo, ciertas propiedades column-*) antes de depender de ellas en producción.

Nota sobre los Prefijos de Proveedor

Mientras los módulos de CSS3 eran aún experimentales, los navegadores incorporaban propiedades con prefijos de proveedor como -webkit-, -moz-, -ms- y -o-. Es posible que aún los encuentres en bases de código antiguas:

/* 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 las propiedades listadas a continuación casi nunca necesitas prefijos hoy en día — escribe el nombre estándar sin prefijo. Usa prefijos solo cuando debas dar soporte a un navegador antiguo, y siempre lista la propiedad estándar al final para que prevalezca.

CSS3 vs. CSS2 — ¿Qué Cambió?

CSS2 cubría el modelo de caja fundamental, colores, fuentes y posicionamiento. CSS3 construyó sobre esa base con las siguientes capacidades que antes estaban ausentes o muy limitadas:

• Esquinas redondeadas e imágenes de borde — border-radius, border-image
• Sombras — box-shadow, text-shadow
• Degradados y múltiples fondos — background-size, background-clip
• Diseños flexibles y basados en cuadrícula — Flexbox (flex, align-items, …), CSS Grid (grid, grid-template-columns, …)
• Transforms 2D y 3D — transform, perspective
• Cambios de estado suaves — transition
• Animaciones por fotogramas clave — animation, @keyframes
• Texto en múltiples columnas — column-count, column-gap
• Filtros visuales — filter (desenfoque, brillo, contraste, …)
• Transparencia personalizada — opacity

Lista de Propiedades CSS3

Propiedades de Animación

Las animaciones por fotogramas clave permiten describir cómo un elemento transiciona a través de una serie de instantáneas de estilos. La regla @keyframes define las instantáneas; las propiedades animation-* las aplican y controlan en un 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;
}

Propiedades de Fondo

CSS3 extendió los fondos para admitir dimensionamiento, regiones de recorte e imágenes en capas múltiples sobre un ú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 */
}

Propiedades de Borde

CSS3 añadió esquinas redondeadas y bordes basados en imágenes — características que antes requerían trucos con imágenes.

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

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

Color y Transparencia

Efectos de Filtro

La propiedad filter aplica efectos gráficos (desenfoque, brillo, contraste, sombra proyectada, etc.) directamente en CSS — sin necesidad de editor de imágenes.

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

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

Diseño de Caja Flexible

Flexbox es un modelo de diseño unidimensional — distribuye elementos a lo largo de un solo eje (fila o columna) y gestiona automáticamente la alineación, el espaciado y el ajuste de línea.

/* 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 un recorrido completo consulta La Guía Definitiva de Flexbox.

Propiedades de Fuente

CSS Grid

CSS Grid es un sistema de diseño bidimensional — coloca elementos en filas y columnas simultáneamente, lo que lo hace ideal para diseños de nivel de página y cuadrículas de componentes complejos.

/* 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;
}

Propiedades de Diseño en Múltiples Columnas

El diseño en múltiples columnas distribuye el contenido automáticamente en un número o ancho de columnas establecido — similar al diseño de un periódico.

/* 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 */
}

Propiedades de Contorno

Propiedades de Texto

CSS3 añadió control sobre el desbordamiento de texto, el ajuste de línea, las sombras y el estilo detallado de la decoración.

/* 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);
}

Propiedades Transform

Los transforms mueven, rotan, escalan o sesgan elementos en el espacio 2D o 3D sin afectar al flujo del 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;
}

Propiedades de Transición

Las transiciones animan los cambios de propiedad de un valor a otro durante una duración especificada cuando cambia una propiedad CSS (p. ej., en :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);
}

Transiciones vs. animaciones: usa transition para cambios basados en estado (hover, focus, active) — son más simples de escribir. Usa animation con @keyframes para movimiento independiente, en bucle o de varios pasos que se ejecuta sin interacción del usuario.

Propiedades de Formato Visual

Referencias Relacionadas

Una vez que sepas qué propiedad necesitas, estos capítulos cubren en profundidad las características CSS3 más utilizadas:

• Animación CSS y @keyframes para movimiento basado en fotogramas clave.
• La Guía Definitiva de Flexbox para diseño unidimensional.
• grid y grid-template-columns para diseño de página bidimensional.
• filter para desenfoque, brillo, contraste, sombra proyectada y otros efectos gráficos.
• transform y transition para efectos visuales y cambios de estado suaves.
• border-radius y box-shadow para estilos decorativos modernos.

Práctica