Html Y CSS · DacaCode

Estilos CSS: Animaciones con @keyframes

Dacadev — Thu, 18 Jun 2026 00:00:00 -0500

Tabla de Contenido

Una transición anima el salto entre dos estados; pero cuando necesitas movimiento continuo, varios pasos intermedios o una secuencia que se repite —un spinner de carga, un latido, un texto que aparece— necesitas algo más expresivo. Ahí entran las animaciones con @keyframes, el sistema de CSS para describir secuencias de movimiento complejas de forma declarativa, sin una sola línea de JavaScript.

Esta entrega extiende la serie Estilos CSS, retomando justo donde lo dejaron las transiciones y transformaciones. Cubriremos la regla @keyframes, todas las subpropiedades de animation, y las consideraciones de accesibilidad y rendimiento que separan una animación profesional de una que marea al usuario.

Note

Aprenderás a definir secuencias con @keyframes, a controlarlas con la propiedad animation y sus ocho subpropiedades, y a respetar las preferencias de movimiento del usuario con prefers-reduced-motion.

Transición vs. animación

Aunque ambas producen movimiento, resuelven problemas distintos:

Una transición (transition) interpola entre el estado actual y uno nuevo. Necesita un disparador —un :hover, un cambio de clase— y va de un punto A a un punto B.
Una animación (animation) ejecuta una secuencia definida en @keyframes. No necesita disparador: puede arrancar sola, repetirse indefinidamente y pasar por múltiples estados intermedios.

Info

Regla práctica: usa transition para cambios de estado provocados por interacción; usa animation para movimiento autónomo, cíclico o multipaso.

La regla @keyframes

Una animación se define en dos partes: la secuencia (con @keyframes) y su aplicación (con la propiedad animation). La regla @keyframes recibe un nombre y describe los estados de la animación en distintos momentos, expresados como porcentajes del 0% al 100% (o con las palabras clave from y to).

@keyframes aparecer {
 from { opacity: 0; transform: translateY(1rem); }
 to { opacity: 1; transform: translateY(0); }
}

.elemento {
 animation: aparecer 0.6s ease-out;
}

Aparezco con fade + desplazamiento

La secuencia se repite para que puedas observarla.

Múltiples pasos con porcentajes

El verdadero poder de @keyframes aparece con pasos intermedios. Cada porcentaje es una “foto” del estado en ese momento de la animación:

@keyframes latido {
 0% { transform: scale(1); }
 15% { transform: scale(1.25); }
 30% { transform: scale(1); }
 45% { transform: scale(1.15); }
 60% { transform: scale(1); }
}

♥

La propiedad animation y sus subpropiedades

animation es una propiedad abreviada que agrupa ocho subpropiedades. Conviene conocerlas por separado para tener control fino:

Subpropiedad	Función	Ejemplo
`animation-name`	Nombre del `@keyframes` a ejecutar	`aparecer`
`animation-duration`	Duración de un ciclo	`0.6s`
`animation-timing-function`	Curva de progreso	`ease-in-out`
`animation-delay`	Espera antes de iniciar	`200ms`
`animation-iteration-count`	Número de repeticiones	`infinite`
`animation-direction`	Sentido de reproducción	`alternate`
`animation-fill-mode`	Estilos antes/después de animar	`forwards`
`animation-play-state`	Reproducir o pausar	`paused`

La forma abreviada las combina en una sola declaración:

.spinner {
 animation: girar 1s linear infinite;
 /* name | duration | timing-function | iteration-count */
}

iteration-count y direction

animation-iteration-count define cuántas veces se ejecuta (infinite para un bucle perpetuo). animation-direction controla el sentido:

normal — siempre de 0% a 100%.
reverse — siempre de 100% a 0%.
alternate — alterna ida y vuelta en cada ciclo.
alternate-reverse — igual, pero empezando al revés.

El caso clásico es un spinner de carga, que combina rotación infinita con velocidad constante:

@keyframes girar { to { transform: rotate(360deg); } }

.spinner { animation: girar 0.8s linear infinite; }

fill-mode: el estado antes y después

Por defecto, un elemento vuelve a su estilo original en cuanto la animación termina. animation-fill-mode cambia ese comportamiento:

none (por defecto) — no conserva estilos fuera de la ejecución.
forwards — mantiene el estado del último keyframe al terminar.
backwards — aplica el primer keyframe durante el delay, antes de arrancar.
both — combina forwards y backwards.

forwards es esencial cuando quieres que el elemento permanezca en su estado final (por ejemplo, un mensaje que aparece y se queda visible):

.toast {
 animation: aparecer 0.5s ease-out forwards;
}

play-state y delay

animation-play-state permite pausar (paused) y reanudar (running) una animación, típicamente al combinarla con :hover. Aquí, la barra de progreso se anima sola pero se congela al pasar el cursor:

@keyframes cargar { from { width: 0; } to { width: 100%; } }

.barra__relleno { animation: cargar 3s ease-in-out infinite; }
.barra:hover .barra__relleno { animation-play-state: paused; }

Pasa el cursor sobre la barra para pausar la animación.

Encadenar varias animaciones

Puedes aplicar varias animaciones a un mismo elemento separándolas con comas. Cada una mantiene su propia duración, retraso y curva, lo que permite componer comportamientos independientes:

.elemento {
 animation:
 aparecer 0.5s ease-out,
 flotar 3s ease-in-out 0.5s infinite alternate;
}

Floto suavemente

Accesibilidad: respeta prefers-reduced-motion

El movimiento excesivo puede causar mareos o malestar a personas con sensibilidad vestibular. Los sistemas operativos exponen una preferencia de “reducir movimiento”, y CSS la consulta con la media query prefers-reduced-motion. Es una responsabilidad profesional desactivar o atenuar las animaciones no esenciales cuando el usuario lo solicita:

@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
}

Warning

Ignorar prefers-reduced-motion es un fallo de accesibilidad real. Reserva las animaciones llamativas para lo decorativo y asegúrate de que la interfaz siga siendo plenamente funcional cuando el movimiento se reduce.

Rendimiento: anima en la capa de composición

La misma regla de oro de las transiciones aplica aquí: anima propiedades que solo afecten la etapa de composición del navegador —transform y opacity— en lugar de propiedades que disparen layout o paint (width, height, top, left, margin).

/* ❌ Costoso: recalcula layout en cada frame */
@keyframes mover-malo { to { left: 200px; } }

/* ✅ Eficiente: solo composición, fluido a 60 fps */
@keyframes mover-bien { to { transform: translateX(200px); } }

Tip

Si una animación se ve entrecortada, lo primero que debes revisar es qué propiedades estás animando. Reescribir un left/top como transform: translate() suele eliminar el jank de inmediato.

Conclusión

Las animaciones con @keyframes te dan un lenguaje declarativo para describir movimiento complejo: secuencias multipaso, bucles infinitos y comportamientos compuestos, todo en CSS puro. Dominar la propiedad animation y sus subpropiedades —especialmente fill-mode, iteration-count y play-state— te permite construir spinners, indicadores de carga y microinteracciones pulidas. Y recuerda: anima transform y opacity, y respeta siempre prefers-reduced-motion.

Note

🚀 Con esta entrega completas el recorrido de la serie Estilos CSS: desde la cascada y los selectores hasta el layout, el posicionamiento, los fondos, las transformaciones y, ahora, las animaciones. Tienes el repertorio completo para escribir CSS expresivo, accesible y de alto rendimiento.

Estilos CSS: Modularización y patrones de diseño

Dacadev — Tue, 16 Jun 2026 00:00:00 -0500

Tabla de Contenido

En un proyecto pequeño cualquier organización de CSS funciona. El problema aparece al escalar: hojas de estilo de miles de líneas donde tocar una regla rompe tres componentes que parecían no tener relación. La causa casi siempre es la misma: estilos acoplados que se pisan entre sí. La solución es arquitectónica —modularizar— y existen metodologías probadas para lograrlo.

Esta es la octava y última entrega de la serie Estilos CSS. Veremos cómo estructurar estilos en módulos independientes, la metodología BEM, las clases de utilidad y cómo documentar tus componentes con una librería de patrones.

Note

Aprenderás a dividir tus estilos en componentes desacoplados, a nombrar clases con BEM, a usar utility classes con criterio y a mantener una librería de patrones como fuente única de verdad del diseño.

Qué es la modularización

Modularizar CSS consiste en dividir los estilos en archivos donde cada uno representa un módulo: un único componente con todo su estilo encapsulado. Un módulo button.css contiene todo lo necesario para renderizar un botón y sus variantes, y nada más.

Tip

La regla de oro: un módulo no debe interferir con los estilos de otros. Solo se ocupa de su propio componente. Así, modificar un módulo nunca produce efectos colaterales inesperados en el resto de la página.

Estilos base

Antes de los módulos conviene tener un archivo de estilos base: no es un componente, sino la configuración inicial del documento (reset, tipografía global, box-sizing).

:root { box-sizing: border-box; }

*, *::before, *::after { box-sizing: inherit; }

body { font-family: Helvetica, Arial, sans-serif; }

Para no reinventar la rueda, paquetes como Normalize.css homogeneizan las diferencias entre navegadores de forma sensata.

Componentes y BEM

La idea central de un módulo es que los estilos y modificadores de un componente vivan en un solo lugar. La metodología BEM (Block, Element, Modifier) propone una convención de nombres que hace explícita la estructura y evita colisiones:

Block — el componente raíz: .button.
Element — una parte del componente, con __: .button__icon.
Modifier — una variante, con --: .button--success.

.button {
 padding: 0.5em 0.8em;
 border: 1px solid #265559;
 border-radius: 0.2em;
 background-color: transparent;
 font-size: 1rem;
}

.button--success { color: #fff; background-color: #2f5926; border-color: #cfe8c9; }
.button--danger { color: #fff; background-color: #a92323; border-color: #e8c9c9; }
.button--small { font-size: 0.8rem; }
.button--large { font-size: 1.2rem; }

<button class="button">Normal</button>
<button class="button button--success">Éxito</button>
<button class="button button--danger">Peligro</button>
<button class="button button--large">Grande</button>

Posicionamiento del componente

Por buena práctica, el bloque raíz de un componente debería declarar position: relative. Así estableces un contexto de posicionamiento controlado para cualquier elemento absoluto interno (un menú desplegable, un badge, un tooltip), sin depender de ancestros externos.

Estado de los componentes

Es común reflejar el estado de un componente con clases, ya sea para estilizarlo o para manipularlo desde JavaScript. La convención recomendada usa verbos o estados con prefijo: is-loading, has-error, is-active.

Warning

No mezcles las clases de estado con los modificadores BEM. Evita nombres como block__element--modifier-is-loading. El estado es una capa transversal y dinámica; mantenlo separado de la variante estática del componente.

Utility classes

Las clases de utilidad aplican un estilo único y específico. Suelen usar !important para garantizar que se apliquen por encima de los estilos del componente:

.text-center { text-align: center !important; }
.float-left { float: left; }
.hidden { display: none !important; }

.clearfix::before,
.clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }

Son útiles para ajustes puntuales, pero abusar de ellas reintroduce el acoplamiento que la modularización busca evitar. Úsalas con criterio.

Metodologías de arquitectura CSS

BEM no es la única opción. Las metodologías más establecidas para organizar CSS a escala son:

OOCSS — Object-Oriented CSS, de Nicole Sullivan: separa estructura de apariencia.
SMACSS — Scalable and Modular Architecture for CSS, de Jonathan Snook: categoriza las reglas en capas.
BEM — Block, Element, Modifier, de Yandex: convención de nombres explícita.
ITCSS — Inverted Triangle CSS, de Harry Roberts: organiza por especificidad creciente.

No son excluyentes; muchos equipos combinan ITCSS para la estructura de archivos con BEM para la nomenclatura.

Librerías de patrones

En proyectos grandes, los componentes se documentan en una librería de patrones (o style guide): una web accesible para todo el equipo que muestra cómo se ve y se comporta cada componente. Es la fuente única de verdad del diseño y reduce las inconsistencias.

Existen generadores de style guides; uno open source muy conocido es KSS. Documenta los componentes a partir de comentarios estructurados en el propio CSS:

/*
Buttons

Botones disponibles en varios tamaños y colores.

Markup:
<button class="button {{modifier_class}}">click here</button>

.button--success - Botón verde de éxito
.button--danger - Botón rojo de peligro
.button--large - Botón grande

Styleguide Buttons
*/
.button { /* ... */ }

KSS lee esos comentarios y genera automáticamente una página de documentación con el componente renderizado y todas sus variantes. El bloque incluye un título, una descripción, el Markup de ejemplo (con el marcador {{modifier_class}}), la lista de modificadores y una referencia Styleguide para ubicarlo en la jerarquía.

Info

Mantener la documentación junto al código —en comentarios del propio CSS— reduce el riesgo de que la librería de patrones quede desactualizada respecto a la implementación real.

Conclusión

Escribir CSS que escale es, ante todo, un problema de arquitectura. Modularizar en componentes desacoplados, nombrar con una convención consistente como BEM, reservar las utility classes para ajustes puntuales y documentar todo en una librería de patrones es lo que mantiene una hoja de estilos sana a medida que el proyecto crece.

Con esta entrega cerramos la serie Estilos CSS. Recorrimos desde los fundamentos de la cascada hasta la arquitectura de estilos a gran escala, pasando por selectores, el modelo de caja, layouts, posicionamiento, fondos y animaciones. Tienes ahora un modelo mental completo para escribir CSS profesional, predecible y mantenible.

Note

🚀 Repasa las entregas anteriores para consolidar cada concepto: los fundamentos sostienen los selectores, el modelo de caja sostiene los layouts, y la modularización une todo en un sistema coherente.

Estilos CSS: Transiciones, transformaciones y rendimiento

Dacadev — Sun, 14 Jun 2026 00:00:00 -0500

Tabla de Contenido

Las transiciones y transformaciones son la puerta de entrada a las interfaces animadas. Una transición suaviza el cambio entre dos estados; una transformación altera la geometría visual de un elemento sin afectar el layout. Bien aplicadas, mejoran la percepción de calidad y guían la atención del usuario. Mal aplicadas, generan jank y consumen batería. La diferencia está en entender qué propiedades son baratas de animar y por qué.

Esta es la séptima entrega de la serie Estilos CSS. Cubriremos la propiedad transition y sus timing functions, las funciones de transform en 2D y 3D, y el pipeline de renderizado que explica por qué transform y opacity son las propiedades óptimas para animar.

Note

Aprenderás a construir transiciones fluidas con curvas de Bézier, a aplicar y combinar transformaciones, y a entender el pipeline layout → paint → composición para escribir animaciones eficientes.

Transiciones

Una transición interpola el cambio de una propiedad entre su valor inicial y final a lo largo del tiempo. Suele combinarse con pseudo-clases como :hover o :active. Se controla con cuatro propiedades:

transition-property: background-color, transform;
transition-duration: 0.3s, 0.6s;
transition-timing-function: ease, linear;
transition-delay: 0s, 100ms;

transition-property — qué propiedades se animan (usa all para todas).
transition-duration — cuánto dura la interpolación.
transition-timing-function — cómo se distribuye el movimiento en el tiempo.
transition-delay — cuánto espera antes de empezar (opcional).

.boton { transition: background-color 0.3s ease, transform 0.3s ease; }
.boton:hover { background-color: #16828d; transform: translateY(-3px); }

Timing functions

La timing function define cómo se reparte el movimiento en el tiempo. Existen valores predefinidos —linear, ease, ease-in, ease-out, ease-in-out— donde el eje X representa el tiempo y el eje Y el progreso del cambio.

Todas son curvas de Bézier, y puedes definir la tuya con la función cubic-bezier():

.box { transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95); }

También puedes hacer el cambio en pasos discretos con steps(), útil para animaciones tipo sprite o efectos de “tecleo”:

.box { transition: all 1s steps(3); }

Tip

Existen editores visuales de curvas de Bézier que te permiten ajustar la animación y copiar el valor exacto. Experimentar con ellos es la forma más rápida de afinar la sensación de una transición.

Transformaciones

La propiedad transform altera la geometría visual de un elemento mediante cuatro operaciones:

scale() — escala el tamaño.
rotate() — rota el elemento.
translate() — lo desplaza.
skew() — lo inclina/estira.

Warning

Las transformaciones solo alteran la representación visual del elemento, no su comportamiento en el layout. El hueco original que ocupaba se conserva, y los elementos vecinos no se reorganizan.

Rotación

rotate() gira el elemento. Los valores positivos giran en sentido horario; los negativos, antihorario.

.giro { transform: rotate(15deg); }

Traslación

translate(x, y) mueve el elemento en ambos ejes sin afectar el flujo. Los valores positivos lo desplazan a la derecha y hacia abajo.

.mover { transform: translate(40px, 10px); }

Escala

scale() redimensiona: valores entre 0 y 1 encogen, mayores que 1 agrandan.

.crecer { transform: scale(1.3); }

Inclinación

skew(x, y) deforma el elemento inclinándolo respecto a los ejes.

.inclinar { transform: skew(-12deg); }

rotate translate scale skew

Punto de referencia: transform-origin

Toda transformación se aplica desde un punto de referencia, que por defecto es el centro del elemento. transform-origin lo reubica:

.giro { transform-origin: left center; } /* equivale a 0% 50% */

Combinar transformaciones

Puedes encadenar varias funciones separándolas por espacios. Se aplican de derecha a izquierda, lo que afecta el resultado final:

.tarjeta { transform: rotate(15deg) translate(20px, 0); }

El pipeline de renderizado

Para escribir animaciones eficientes hay que entender cómo el navegador dibuja una página. El proceso tiene tres etapas clave:

Layout — el navegador calcula las dimensiones y posiciones de todos los elementos. Cualquier cambio de tamaño o posición dispara un recálculo completo (reflow).
Paint — pinta en memoria los píxeles de cada elemento (colores, bordes, sombras), posiblemente en capas separadas.
Composición — combina las capas pintadas para mostrarlas en pantalla.

flowchart LR
 A[JS / CSS] --> B[Layout]
 B --> C[Paint]
 C --> D[Composición]

La clave del rendimiento: algunas propiedades, como transform y opacity, solo afectan la etapa de composición. No requieren recalcular el layout ni repintar, por lo que son las propiedades óptimas para animar de forma fluida a 60 fps.

Tip

Prefiere animar transform y opacity en lugar de width, height, top o left. Estas últimas disparan layout y paint en cada frame, lo que produce animaciones entrecortadas.

Transformaciones en 3D

transform también opera en tres dimensiones. Puedes rotar sobre cualquier eje con rotateX(), rotateY() y rotateZ(). El efecto depende de la perspectiva: la distancia simulada entre el observador y el elemento. A menor perspectiva, más pronunciado el efecto 3D.

Hay dos formas de aplicarla:

/* 1. Función dentro de transform (afecta solo a ese elemento) */
.box { transform: perspective(200px) rotateX(30deg); }

/* 2. Propiedad en el contenedor (perspectiva compartida) */
.row { perspective: 200px; }
.box { transform: rotateX(30deg); }

rotateX(35deg)

rotateY(35deg)

Una rotación de 180° voltea el elemento como un espejo. La propiedad backface-visibility controla si la cara trasera es visible, lo que habilita efectos como las tarjetas que se voltean. Un recurso clásico para profundizar es Intro to CSS 3D transforms.

Conclusión

Las transiciones suavizan los cambios de estado y las transformaciones manipulan la geometría sin tocar el layout. La regla de oro del rendimiento es animar transform y opacity, que solo afectan la etapa de composición. Con curvas de Bézier afinadas y un uso consciente del pipeline, tus animaciones serán fluidas y eficientes.

Note

🚀 La entrega final de la serie aborda la modularización y los patrones de diseño en CSS: cómo organizar tus estilos en componentes mantenibles con metodologías como BEM.

Estilos CSS: Fondos, gradientes y sombras

Dacadev — Fri, 12 Jun 2026 00:00:00 -0500

Tabla de Contenido

Los fondos y las sombras son las herramientas con las que CSS aporta profundidad, textura y jerarquía visual sin necesidad de imágenes externas. Un gradiente bien construido reemplaza un archivo PNG; una sombra sutil comunica que un botón es interactivo. Dominar estas propiedades te permite crear interfaces ricas con código puro, ligero y escalable.

Esta es la sexta entrega de la serie Estilos CSS. Recorreremos la familia de propiedades background, los gradientes lineales y radiales, los modos de mezcla y las sombras de caja y de texto.

Note

Aprenderás a generar gradientes y patrones sin imágenes, a combinar varias capas de fondo y a usar box-shadow y text-shadow para dar realismo y feedback a tus componentes.

La familia background

background es una propiedad abreviada que agrupa ocho propiedades individuales:

background-image — una imagen o un gradiente generado.
background-position — la posición inicial del fondo.
background-size — el tamaño de renderizado (cover, contain, valores explícitos).
background-repeat — si la imagen se repite en mosaico.
background-origin — respecto a qué caja se posiciona (border, padding o content).
background-clip — hasta qué caja se extiende el fondo.
background-attachment — si el fondo se desplaza con el contenido o queda fijo.
background-color — un color sólido que se renderiza detrás de la imagen.

Gradientes lineales

Un gradiente es una transición de colores generada por una función de CSS, sin archivos. linear-gradient() crea una transición a lo largo de una dirección.

.fade { background-image: linear-gradient(to right, #fff, #2a9da9); }

La función acepta una dirección (to right, 90deg, etc.) y una lista de colores. Puedes incluir más de dos colores y fijar su posición con porcentajes:

.fade { background-image: linear-gradient(90deg, #c0392b 0%, #fff 50%, #2a9da9 100%); }

Gradientes lineales repetitivos

repeating-linear-gradient() crea patrones que se repiten, útil para texturas como rayas:

.rayas {
 background-image: repeating-linear-gradient(-45deg,
 #2a9da9, #2a9da9 10px, #16828d 10px, #16828d 20px);
}

Gradientes radiales

radial-gradient() genera una transición circular o elíptica que irradia desde un punto, en lugar de seguir una dirección lineal.

.brillo { background-image: radial-gradient(#fff, #2a9da9); }

Combinar múltiples fondos

Puedes apilar varias capas de fondo separándolas con comas. La primera capa queda al frente. Esto permite, por ejemplo, superponer un gradiente sobre una imagen:

.heroe {
 background-image:
 linear-gradient(to bottom, rgba(42,157,169,0.6), rgba(22,130,141,0.9)),
 url(foto.jpg);
 background-size: cover;
}

Gradiente sobre una textura de fondo

Texturas con blend modes

La propiedad background-blend-mode mezcla las capas de fondo entre sí (con modos como multiply, soft-light, overlay), añadiendo textura a una imagen sin editarla en un programa externo:

.textura {
 background-image: url(rayones.png), url(foto.jpg);
 background-blend-mode: soft-light;
}

Sombras: box-shadow y text-shadow

CSS permite añadir sombras tanto a las cajas (box-shadow) como al texto (text-shadow). Ambas reciben los mismos parámetros básicos:

Desplazamiento horizontal y vertical (offset-x, offset-y).
El radio de difuminado (blur).
(opcional) El radio de expansión (spread).
El color de la sombra.

.tarjeta { box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.25); }
.titulo { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); }

Tarjeta con box-shadow

Texto con text-shadow

Sombras interiores para feedback

La palabra clave inset convierte la sombra en interior, perfecta para simular que un botón está presionado. Combinada con pseudo-clases como :active, crea componentes con feedback táctil:

.boton {
 background-image: linear-gradient(to bottom, #2a9da9, #16828d);
 box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.4);
 color: #fff;
}

.boton:active {
 box-shadow: inset 0 0 0.5em #0d4f56,
 inset 0 0.5em 1em rgba(0,0,0,0.4);
}

Al pulsarlo, la sombra interior simula el hundido físico.

Tip

Las sombras se renderizan en la capa de composición y son baratas de animar. Una transición sutil de box-shadow en :hover comunica interactividad con un costo de rendimiento mínimo.

Conclusión

Los gradientes y las sombras te permiten construir interfaces con profundidad y textura usando solo CSS, evitando peticiones de red y archivos de imagen. Apilar capas de fondo, mezclarlas con blend modes y aplicar sombras interiores son técnicas que elevan la calidad visual de cualquier componente.

Note

🚀 La próxima entrega cubre transiciones y transformaciones: cómo animar cambios de estado de forma fluida y manipular la geometría de los elementos con transform.

Estilos CSS: Posicionamiento, z-index y diseño responsive

Dacadev — Wed, 10 Jun 2026 00:00:00 -0500

Tabla de Contenido

Hasta ahora hemos trabajado con elementos que viven en el flujo normal del documento. El posicionamiento rompe ese flujo: te permite anclar una cabecera al viewport, superponer un modal, desplegar un menú o fijar una barra lateral mientras el usuario hace scroll. Combinado con z-index y las media queries, el posicionamiento es la base de las interacciones dinámicas y del diseño adaptable.

Esta es la quinta entrega de la serie Estilos CSS. Cubriremos los cinco valores de position, los contextos de apilamiento con z-index y los fundamentos del diseño responsive.

Note

Entenderás cuándo usar cada tipo de posicionamiento, por qué z-index a veces “no funciona” por culpa de los contextos de apilamiento, y cómo escribir media queries con un enfoque mobile first.

La propiedad position

La propiedad position acepta cinco valores que cambian cómo se ubica un elemento:

static (por defecto) — el elemento permanece en el flujo normal.
relative — se desplaza respecto a su posición original sin salir del flujo.
absolute — se extrae del flujo y se posiciona respecto a su ancestro posicionado más cercano.
fixed — se extrae del flujo y se posiciona respecto al viewport.
sticky — combina relative y fixed según el scroll.

Las propiedades top, right, bottom y left controlan la ubicación (y, en algunos casos, el tamaño) de los elementos posicionados.

Fixed: anclado al viewport

position: fixed extrae el elemento del flujo normal —los demás se reorganizan como si no existiera— y lo ancla a una posición relativa al viewport, donde permanece aunque el usuario haga scroll. Es la base de los modales: un fondo semitransparente que cubre toda la pantalla y un cuerpo centrado encima.

.modal-backdrop {
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 background-color: rgba(0, 0, 0, 0.5);
}

.modal-body {
 position: fixed;
 top: 3em; bottom: 3em; right: 20%; left: 20%;
 background-color: white;
 overflow: auto;
}

Tip

Al posicionar no estás obligado a declarar los cuatro lados. Si omites bottom y height, la altura la determina el contenido de forma natural. Combinar lados con width/height te da control total sobre el tamaño.

Absolute: relativo al ancestro posicionado

position: absolute también extrae el elemento del flujo, pero se posiciona respecto al primer ancestro que tenga una posición distinta de static. Si ningún ancestro está posicionado, usa el bloque contenedor inicial (el tamaño del viewport).

Este es el patrón para colocar un botón de cierre en la esquina de un modal: el padre se marca como position: relative y el botón como position: absolute.

.modal-body { position: relative; }
.modal-close { position: absolute; top: 0.3em; right: 0.3em; }

✕ Cuerpo del modal

El botón de cierre está posicionado en la esquina con absolute respecto a este contenedor relative.

Relative: desplazamiento sin salir del flujo

A diferencia de los anteriores, position: relative no extrae el elemento del flujo; lo traslada respecto a su posición original, dejando su hueco intacto. Tampoco permite redimensionarlo con la combinación de lados.

Su uso más frecuente es establecer un bloque contenedor para descendientes absolutos. Es la base de un menú desplegable: el contenedor es relative y el menú es absolute, mostrándose con :hover.

.dropdown { position: relative; display: inline-block; }

.dropdown-menu { position: absolute; top: 100%; left: 0; display: none; }

.dropdown:hover .dropdown-menu { display: block; }

Menú principal ▾

Pasa el cursor sobre el botón para desplegar el menú.

Sticky: lo mejor de relative y fixed

position: sticky mantiene el elemento en su posición normal hasta que, al hacer scroll, alcanza el umbral definido por top/bottom; en ese momento se “pega” como si fuera fixed. Cuando el contenido vuelve, recupera su comportamiento relativo. Es ideal para barras laterales y cabeceras de sección que deben permanecer visibles.

.afijo { position: sticky; top: 1em; }

Stacking contexts y z-index

Cuando varios elementos posicionados se solapan, z-index controla el orden de apilamiento en el eje Z. Acepta enteros positivos y negativos: a mayor valor, más al frente.

.uno { position: relative; z-index: 1; }
.dos { position: relative; z-index: 2; } /* queda por encima de .uno */

Aquí está la trampa que confunde a muchos: cada elemento posicionado con z-index crea su propio contexto de apilamiento. Un hijo dentro de un contexto con z-index: 1 nunca podrá superar a un elemento de un contexto hermano con z-index: 2, aunque el hijo tenga z-index: 99999.

Warning

z-index tiene dos “gotchas”: solo funciona sobre elementos posicionados (cualquier position distinto de static), y al usarlo creas un nuevo contexto de apilamiento. Si un z-index enorme “no funciona”, casi siempre es porque su elemento está atrapado en un contexto de apilamiento de menor prioridad.

Responsive: estilos que se adaptan

La enorme variedad de pantallas obliga a diseñar interfaces que respondan a distintos tamaños. La filosofía mobile first consiste en escribir primero los estilos para móvil y luego ampliarlos progresivamente hacia tablets y escritorio.

Media queries

Una media query aplica un bloque de CSS solo cuando se cumple una condición sobre el viewport. Conviene usar em en los umbrales para que respeten el zoom y la configuración del usuario.

@media (min-width: 35em) {
 .titulo { font-size: 2.25rem; }
}

Puedes combinar condiciones con lógica:

/* AND: ambas condiciones */
@media (min-width: 20em) and (max-width: 35em) { /* ... */ }

/* OR: cualquiera de las dos */
@media (max-width: 20em), (min-width: 35em) { /* ... */ }

Entre las características consultables están min-width, max-width, min-height, orientation: landscape | portrait y min-resolution: 2dppx (para pantallas retina). El catálogo completo está en la documentación de @media en MDN.

Breakpoints con mobile first

Los breakpoints son los puntos donde el diseño cambia de un tamaño a otro. Con el enfoque mobile first, los estilos base sirven al móvil y cada media query añade ajustes para pantallas mayores:

.titulo { font-size: 1.5rem; } /* móvil (base) */

@media (min-width: 35em) { /* tablet */
 .titulo { font-size: 2rem; }
}

@media (min-width: 50em) { /* escritorio */
 .titulo { font-size: 2.5rem; }
}

Este título cambia de tamaño según el ancho

Redimensiona la ventana para cruzar los breakpoints de 35em y 50em.

Estilos para impresión

Las media queries también cubren el medio de impresión. @media print aplica reglas cuando el usuario imprime o exporta a PDF:

@media print {
 * { color: black !important; background: none !important; }
}

Conclusión

El posicionamiento te da control fino sobre dónde vive cada elemento: fixed para modales, absolute para tooltips y menús, relative como ancla, y sticky para elementos que acompañan el scroll. Sumado a un manejo consciente de los contextos de apilamiento y a media queries con enfoque mobile first, tienes las piezas para construir interfaces dinámicas y adaptables.

Note

🚀 La próxima entrega explora los fondos y las sombras: gradientes, modos de mezcla y las propiedades box-shadow y text-shadow para dar profundidad a tus componentes.

Estilos CSS: Layouts con Float, Flexbox y Grid

Dacadev — Mon, 08 Jun 2026 00:00:00 -0500

Tabla de Contenido

Maquetar es componer la estructura visual de una página: columnas, rejillas, barras laterales, galerías. Durante años se hizo con herramientas que no se diseñaron para ello —float nació para envolver texto alrededor de imágenes— hasta que llegaron Flexbox y CSS Grid, dos sistemas pensados específicamente para layout. Conocer los tres te permite entender el código heredado y elegir la herramienta correcta para cada problema.

Esta es la cuarta entrega de la serie Estilos CSS. Recorreremos float y la técnica clearfix, el modelo unidimensional de Flexbox y el sistema bidimensional de Grid, con ejemplos que puedes ver renderizados.

Note

Aprenderás cuándo sigue siendo útil float, cómo controlar el tamaño de los ítems con flex, y cómo posicionar elementos en una rejilla con grid-template.

Float: el origen y el clearfix

float extrae un elemento del flujo normal y lo desplaza hacia un lado de su contenedor; el contenido adyacente fluye a su alrededor. Ese fue su propósito original: envolver texto alrededor de una imagen.

.imagen { float: left; margin-right: 1em; }

float

Este párrafo fluye alrededor del bloque flotado. El texto se ajusta al margen del elemento extraído del flujo, exactamente el caso de uso para el que float fue concebido: envolver contenido alrededor de una figura.

Cuando usas float, necesitas limpiar el flujo para que el contenedor vuelva a comportarse con normalidad. El patrón estándar es el clearfix, implementado con un pseudo-elemento:

.clearfix::before,
.clearfix::after {
 display: table;
 content: " ";
}

.clearfix::after {
 clear: both;
}

Tip

Para layouts modernos, float casi siempre se reemplaza por Flexbox o Grid. Resérvalo para su propósito original: envolver texto alrededor de un elemento.

Flexbox: layout en una dimensión

Al aplicar display: flex a un contenedor, este se convierte en un flex container y sus hijos en flex items. Flexbox organiza los ítems a lo largo de un eje principal y los alinea en el eje transversal, ajustando tamaños de forma flexible.

Un contenedor flex tiene dos ejes:

Eje principal (main) — la dirección en la que se colocan los ítems (horizontal por defecto).
Eje transversal (cross) — perpendicular al principal.

Alinear ítems con justify-content y align-items

justify-content controla la distribución a lo largo del eje principal: flex-start, flex-end, center, space-between, space-around.
align-items controla la alineación en el eje transversal: stretch (por defecto), flex-start, flex-end, center, baseline.

.barra {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

Logo Menú Perfil

Controlar el tamaño: flex-grow, flex-shrink y flex-basis

La propiedad abreviada flex agrupa tres propiedades que gobiernan el tamaño de cada ítem:

flex-basis — el tamaño base (de partida) del ítem antes de crecer o encoger. Su valor inicial es auto.
flex-grow — el factor de crecimiento para repartir el espacio sobrante. 0 no crece.
flex-shrink — el factor de encogimiento cuando falta espacio.

.col-a { flex: 1; } /* crece para ocupar el espacio sobrante */
.col-b { flex: 2; } /* crece al doble que col-a */

flex: 1

flex: 2 (el doble de ancho)

Dirección y envoltura

flex-direction cambia el eje principal: row (por defecto), row-reverse, column, column-reverse.
flex-wrap permite que los ítems salten a una nueva línea cuando no caben: nowrap (por defecto), wrap, wrap-reverse.
flex-flow es la abreviatura de ambas: flex-flow: row wrap.

Propiedades del ítem

align-self — sobrescribe align-items para un ítem concreto.
order — reordena los ítems sin tocar el HTML; el valor inicial es 0.

Info

Flexbox crea automáticamente columnas de igual altura y es la herramienta ideal para centrar un elemento. Para un catálogo de bugs conocidos y sus soluciones, consulta flexbugs.

CSS Grid: layout en dos dimensiones

Mientras Flexbox trabaja en un solo eje, CSS Grid organiza el contenido en filas y columnas simultáneamente. Antes de usarlo conviene fijar su vocabulario:

Grid line — las líneas que forman la estructura de la rejilla.
Grid track — el espacio entre dos líneas adyacentes (una fila o una columna).
Grid cell — la intersección de una fila y una columna.
Grid area — un rectángulo formado por una o más celdas.

Una rejilla básica

Se activa con display: grid y se definen las pistas con grid-template-columns y grid-template-rows. La unidad fr representa una fracción del espacio disponible.

.grid {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 gap: 0.5em;
}

La función repeat() evita la repetición: grid-template-columns: repeat(3, 1fr) equivale a 1fr 1fr 1fr.

Posicionar ítems por líneas

Cada línea de la rejilla tiene un número. Con grid-column y grid-row indicas dónde empieza y termina un ítem usando la sintaxis inicio / fin:

.destacado {
 grid-column: 1 / 3; /* abarca de la línea 1 a la 3 */
 grid-row: span 2; /* abarca dos pistas verticales */
}

grid-column: 1 / 3

Áreas con nombre

La forma más legible de componer un layout es nombrar las áreas con grid-template-areas y asignar cada elemento con grid-area:

.contenedor {
 display: grid;
 grid-template-areas:
 "titulo titulo"
 "nav nav"
 "main aside";
 grid-template-columns: 2fr 1fr;
 gap: 1em;
}

header { grid-area: titulo; }
nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }

titulo

nav

main

aside

Rejilla implícita y galerías responsivas

Cuando no conoces de antemano la cantidad de ítems —por ejemplo, datos que vienen de una API— la rejilla implícita crece automáticamente para acomodarlos. La combinación de auto-fill con minmax() produce galerías que se adaptan al ancho disponible sin media queries:

.galeria {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 gap: 1em;
}

Redimensiona la ventana: las columnas se reorganizan solas.

Warning

Con Grid solo puedes formar rectángulos. No se pueden crear formas en L o U directamente; se simulan dejando celdas vacías (con . en grid-template-areas) o combinando áreas.

Flexbox y Grid: complementarios, no rivales

No tienes que elegir uno. La combinación más potente es usar Grid para la estructura macro de la página (cabecera, contenido, barra lateral, pie) y Flexbox para alinear el contenido dentro de cada zona (una barra de navegación, una tarjeta, un grupo de botones).

Conclusión

float resuelve el envolvimiento de texto; Flexbox domina el layout en una dimensión y el centrado; Grid organiza estructuras bidimensionales complejas. Elegir la herramienta adecuada para cada problema —y combinarlas— es lo que distingue una maquetación robusta de una llena de parches.

Note

🚀 En la próxima entrega abordamos el posicionamiento (relative, absolute, fixed, sticky), los contextos de apilamiento con z-index y el diseño responsive con media queries.

Estilos CSS: Dominando el modelo de caja

Dacadev — Sat, 06 Jun 2026 00:00:00 -0500

Tabla de Contenido

El modelo de caja es el sistema con el que CSS calcula el tamaño y el espaciado de cada elemento. Parece trivial, pero es la fuente número uno de layouts impredecibles: un width: 50% que termina midiendo más de la mitad, dos columnas que no encajan, márgenes que desaparecen sin razón aparente. Todos esos síntomas se explican entendiendo cómo el navegador compone una caja.

Esta es la tercera entrega de la serie Estilos CSS. Analizaremos las cuatro regiones de una caja, el cambio de comportamiento que introduce box-sizing, el control de overflow, el manejo de alturas, el centrado vertical y el colapso de márgenes.

Note

Comprenderás por qué box-sizing: border-box debería ser tu valor por defecto y aprenderás a resolver los problemas clásicos de altura, centrado vertical y colapso de márgenes.

Las cuatro regiones de una caja

Todo elemento HTML se compone, de adentro hacia afuera, de cuatro capas:

content — el área donde vive el contenido (texto, imágenes).
padding — el espacio interno entre el contenido y el borde.
border — el borde que rodea el padding.
margin — el espacio externo que separa la caja de sus vecinos.

<div class="caja">content + padding + border + margin</div>

content

El área azul es el content; el beige es el padding; el trazo turquesa es el border; el espacio punteado exterior es el margin.

`box-sizing`: content-box vs border-box

La propiedad box-sizing decide qué incluye el width y el height que declaras.

content-box (valor por defecto) — width y height miden solo el contenido. El padding y el border se suman por fuera, agrandando el tamaño final.
border-box — width y height miden el conjunto de contenido + padding + border. El tamaño que declaras es el tamaño real renderizado.

Mira dos cajas con width: 200px y padding: 20px, una con cada modelo:

.content-box { box-sizing: content-box; } /* ancho real: 200 + 40 = 240px */
.border-box { box-sizing: border-box; } /* ancho real: 200px */

content-box → mide 246px en total

border-box → mide 200px en total

Por eso es práctica recomendada activar border-box de forma global, heredándolo para no romper estilos de terceros:

:root { box-sizing: border-box; }

*, ::before, ::after { box-sizing: inherit; }

Warning

Evita los números mágicos: valores arbitrarios (margin-top: 37px) que “cuadran” un diseño por casualidad. Haz que el contenido se adapte al contenedor, no al revés.

Alturas: el flujo normal manda

La altura de un contenedor es orgánica por defecto: la define su contenido, no el contenedor. Esto tiene dos consecuencias prácticas:

Definir height en porcentaje rara vez funciona, porque se refiere a la altura del padre, que a su vez depende de su contenido.
Para que un height: 100% funcione, el padre necesita una altura explícita en unidades absolutas.

En lugar de fijar alturas, prefiere restringir el rango con min-height y max-height, dejando que el contenido fluya:

.panel { min-height: 6em; max-height: 12em; }

`overflow`: qué hacer cuando el contenido se desborda

Cuando el contenido excede el tamaño de su caja, overflow define el comportamiento:

Valor	Comportamiento
`visible` (por defecto)	El contenido se desborda y permanece visible.
`hidden`	El contenido que se sale se recorta.
`scroll`	Siempre añade barras de desplazamiento.
`auto`	Añade barras solo si hace falta.

.recorte { overflow: auto; max-height: 5em; }

Este contenedor tiene overflow: auto y una altura máxima.

Cuando el contenido supera esa altura, aparece una barra de desplazamiento.

Línea adicional para forzar el desbordamiento.

Y una más para asegurar el scroll.

Puedes controlar cada eje por separado con overflow-x y overflow-y, aunque mezclar valores distintos suele dar resultados poco predecibles.

Centrado vertical

Centrar verticalmente fue durante años un dolor de cabeza en CSS. La propiedad vertical-align no sirve para esto: solo aplica a elementos inline y a celdas de tabla. Hoy tenemos varias soluciones según el escenario:

¿Puedes usar la altura natural? Aplica un padding igual arriba y abajo.
¿Necesitas altura fija? Usa display: table-cell con vertical-align: middle.
El caso general: usa flexbox.
¿Una sola línea de texto? Usa line-height igual a la altura del contenedor.

La solución moderna por excelencia es flexbox, que centra en ambos ejes con tres declaraciones:

.centro {
 display: flex;
 align-items: center; /* eje vertical */
 justify-content: center; /* eje horizontal */
 min-height: 8em;
}

Centrado en ambos ejes

Márgenes negativos

A diferencia de padding y border, los márgenes admiten valores negativos, lo que te permite tirar de un elemento hacia afuera de su posición natural o solaparlo con su vecino.

.solapado { margin-top: -1.5em; }

Bloque base

Bloque con margin-top negativo que se solapa

Colapso de márgenes (margin collapsing)

Cuando dos márgenes verticales se encuentran, no se suman: se colapsan, quedando solo el de mayor valor. Si un párrafo tiene margin-bottom: 30px y el siguiente margin-top: 20px, la separación entre ambos será de 30px, no 50px.

Info

El colapso de márgenes solo ocurre con márgenes verticales (arriba y abajo). Los márgenes horizontales (izquierda y derecha) nunca colapsan.

Hay varias formas de impedir el colapso cuando no lo deseas:

Aplicar overflow: auto (o cualquier valor distinto de visible) al contenedor.
Añadir un border o un padding entre los dos márgenes.
Usar un contenedor flotado, inline-block o con posición absoluta/fija.
Usar flexbox o grid: los márgenes entre ítems del layout no colapsan.
Los elementos con display: table-cell no tienen margen, así que no colapsan.

Conclusión

El modelo de caja deja de ser un misterio cuando interiorizas que box-sizing controla la aritmética del tamaño, que la altura es orgánica por naturaleza y que los márgenes verticales colapsan. Activar border-box de forma global y apoyarte en flexbox para el centrado elimina la mayoría de los problemas clásicos de maquetación.

Note

🚀 La siguiente entrega cubre los sistemas de layout: float, flexbox y CSS Grid, las herramientas con las que componemos la estructura completa de una página.

Estilos CSS: Selectores, combinadores y pseudo-clases

Dacadev — Thu, 04 Jun 2026 00:00:00 -0500

Tabla de Contenido

Un selector es el mecanismo con el que CSS apunta a los elementos que vas a estilizar. Elegir el selector correcto no es solo cuestión de que “funcione”: impacta directamente en la especificidad, en el acoplamiento de tus estilos y en la facilidad para mantenerlos. CSS ofrece un catálogo amplio de selectores, y conocerlos a fondo te evita escribir reglas frágiles.

Este artículo es la segunda entrega de la serie Estilos CSS. Recorreremos los selectores básicos, los combinadores, las pseudo-clases, los pseudo-elementos y los selectores de atributo, con ejemplos que puedes ver renderizados aquí mismo.

Note

Repasaremos cada familia de selectores con su especificidad y demostraciones en vivo, para que puedas elegir siempre la opción más precisa y de menor acoplamiento.

Selectores básicos

Son los cuatro selectores fundamentales sobre los que se construye todo lo demás:

Selector de tipo (p, h1) — apunta por nombre de etiqueta. Especificidad 0,0,1.
Selector de clase (.media) — apunta a los elementos con esa clase. Especificidad 0,1,0.
Selector de ID (#sidebar) — apunta al elemento con ese id. Especificidad 1,0,0.
Selector universal (*) — apunta a todos los elementos. Especificidad 0,0,0.

Combinadores

Los combinadores unen selectores simples para describir una relación entre elementos.

Combinador	Símbolo	Significado	Ejemplo
Descendiente	(espacio)	Cualquier descendiente	`.menu li`
Hijo directo	`>`	Hijo inmediato	`.lista > li`
Hermano adyacente	`+`	El elemento inmediatamente siguiente	`p + h2`
Hermano general	`~`	Todos los hermanos posteriores	`li.activo ~ li`

El combinador de hijo directo (>) solo afecta al primer nivel de descendientes. Observa la diferencia con el descendiente:

.lista > li { font-weight: bold; } /* solo hijos directos */

<ul class="lista">
 <li>Hijo directo (en negrita)</li>
 <li>Hijo directo (en negrita)
 <ul>
 <li>Nieto (sin negrita)</li>
 </ul>
 </li>
</ul>

Hijo directo (en negrita)
Hijo directo (en negrita)
- Nieto (sin negrita)

Selectores compuestos

Varios selectores simples se pueden unir sin espacios para formar un selector compuesto que exige que el elemento cumpla todas las condiciones. Por ejemplo, .dropdown.is-active apunta a <div class="dropdown is-active"> pero no a <div class="dropdown">.

Pseudo-clases

Las pseudo-clases apuntan a elementos según un estado: interacción del usuario o posición respecto a sus hermanos. Empiezan con un solo dos puntos (:) y tienen la especificidad de una clase (0,1,0).

Posición estructural

:first-child, :last-child, :only-child — primero, último o único hijo.
:nth-child(an + b) — apunta según una fórmula posicional entre sus hermanos.
:nth-last-child() — igual, pero contando desde el final.
:first-of-type, :last-of-type, :nth-of-type() — equivalentes, pero solo cuentan elementos del mismo tipo.
:not(<selector>) — apunta a lo que no coincide con el selector interno.
:empty — elementos sin hijos.

Un patrón clásico: aplicar un fondo alterno con :nth-child(even) para crear filas tipo “cebra”.

.zebra li:nth-child(even) { background: #ecf0f1; }

Fila 1
Fila 2 (resaltada)
Fila 3
Fila 4 (resaltada)

Estado e interacción

:hover — mientras el cursor está sobre el elemento.
:focus — cuando el elemento recibe foco (clic, toque o tabulación).
:root — el elemento raíz del documento.

Campos de formulario

Varias pseudo-clases describen el estado de los controles: :disabled, :enabled, :checked, :invalid, :valid, :required, :optional. Aquí, :invalid cambia el borde cuando el valor no es un correo válido:

input:invalid { border-color: #c0392b; }
input:valid { border-color: #27ae60; }

Escribe un correo:

Tip

La lista de pseudo-clases es extensa y evoluciona con cada nivel de la especificación. Consulta la documentación de MDN sobre pseudo-clases para el catálogo completo y el soporte por navegador.

Pseudo-elementos

Los pseudo-elementos no apuntan a un elemento existente, sino a una parte del documento que no tiene marcado propio, o inyectan contenido nuevo. Usan doble dos puntos (::) y tienen la especificidad de un selector de tipo (0,0,1).

::before — inserta un primer hijo virtual. Requiere la propiedad content.
::after — inserta un último hijo virtual. Requiere content.
::first-letter — estiliza la primera letra del texto.
::first-line — estiliza la primera línea.
::selection — estiliza el texto que el usuario resalta.

.nota::before { content: "★ "; color: #f39c12; }
.capitular::first-letter { font-size: 2.5em; font-weight: bold; color: #2a9da9; }

★ Texto precedido por un pseudo-elemento ::before.

Lorem ipsum con la primera letra estilizada como capitular.

Selectores de atributo

Apuntan a elementos según sus atributos HTML. Tienen la especificidad de una clase (0,1,0).

Selector	Coincide cuando el atributo…	Ejemplo
`[attr]`	existe	`input[disabled]`
`[attr="valor"]`	es exactamente igual	`input[type="radio"]`
`[attr^="valor"]`	empieza con el valor	`a[href^="https"]`
`[attr$="valor"]`	termina con el valor	`a[href$=".pdf"]`
`[attr*="valor"]`	contiene el valor	`[class*="sprite-"]`
`[attr~="valor"]`	es una lista separada por espacios que incluye el valor	`a[rel~="author"]`
`[attr\|="valor"]`	es igual o empieza con `valor-`	`[lang\|="es"]`

Por ejemplo, podemos marcar visualmente los enlaces externos y los que apuntan a un PDF:

a[href^="https"]::after { content: " ↗"; }
a[href$=".pdf"]::after { content: " (PDF)"; color: #c0392b; }

Enlace externo ↗ · Documento (PDF)

Info

Los selectores de atributo distinguen mayúsculas y minúsculas por defecto. La especificación nivel 4 añade un modificador i antes del corchete de cierre —input[value="search" i]— para hacerlos insensibles a mayúsculas. Verifica el soporte antes de usarlo en producción.

Conclusión

El catálogo de selectores de CSS es amplio y cada familia resuelve un problema distinto. La clave está en elegir el selector más preciso con la menor especificidad posible: eso mantiene tus estilos desacoplados y fáciles de sobrescribir cuando lo necesites.

Note

🚀 En la siguiente entrega abordamos el modelo de caja: cómo margin, border, padding y content definen el tamaño real de cada elemento y cómo box-sizing cambia las reglas del juego.

Estilos CSS: Cascada, especificidad, herencia y unidades

Dacadev — Tue, 02 Jun 2026 00:00:00 -0500

Tabla de Contenido

Cuando dos reglas de estilo compiten por el mismo elemento, el resultado no es aleatorio: el navegador aplica un algoritmo determinista para decidir cuál gana. Comprender ese algoritmo —la cascada, la especificidad y la herencia— es la diferencia entre pelear contra CSS a punta de !important y escribir hojas de estilo predecibles y mantenibles.

Este artículo abre la serie Estilos CSS. Analizaremos cómo el navegador resuelve conflictos, cómo se calcula el peso de un selector y cómo aprovechar las unidades relativas para construir interfaces que escalan.

Note

Al terminar entenderás el modelo mental que rige toda hoja de estilos: origen de los estilos, especificidad, orden del código, herencia y el sistema de unidades relativas (em, rem, vw) junto con las variables CSS.

La cascada: cómo el navegador resuelve conflictos

CSS significa Cascading Style Sheets. La cascada es precisamente el conjunto de reglas que determina qué declaración prevalece cuando varias apuntan a la misma propiedad de un elemento. El navegador evalúa tres criterios en orden:

Origen de la hoja de estilos — de dónde provienen los estilos.
Especificidad del selector — qué selector es más “específico”.
Orden en el código — cuál se declaró de último.

Origen de los estilos

Existen tres orígenes posibles, con prioridad creciente:

User agent styles — los estilos por defecto del navegador (por ejemplo, el margin de un <h1> o el subrayado de un enlace).
Author styles — los estilos que tú defines en tus archivos .css.
User styles — estilos configurados por el propio usuario en el navegador (accesibilidad, tamaños de fuente). Tienen prioridad sobre los anteriores.

Tus estilos (author) pisan a los del navegador, que es justo lo que esperas al escribir una hoja de estilos.

Especificidad: el peso de un selector

La especificidad se representa con la notación 0,0,0,0, donde cada posición cuenta, de izquierda a derecha: estilos inline, IDs, clases y nombres de etiqueta.

Componente	Ejemplo	Peso
Selector de etiqueta	`p`, `h1`	`0,0,0,1`
Selector de clase	`.nav-menu`	`0,0,1,0`
Selector de ID	`#sidebar`	`0,1,0,0`
Estilo inline	`style="..."`	`1,0,0,0`

Las reglas de desempate son sencillas:

Una declaración con !important gana por encima de todo (úsala con prudencia).
Gana el selector con más IDs.
Si hay empate, gana el que tenga más clases.
Si persiste el empate, gana el que tenga más etiquetas.

Tip

Las pseudo-clases (:hover) y los selectores de atributo ([type="text"]) cuentan como una clase (0,0,1,0). El selector universal * y los combinadores (>, +, ~) no aportan especificidad.

Observa cómo dos reglas compiten por el color del párrafo. La clase .destacado gana al selector de etiqueta p, aunque la regla de p se declare después:

p { color: #555; }
.destacado { color: #c0392b; }

<p>Texto con el color por defecto del selector de etiqueta.</p>
<p class="destacado">Este párrafo gana por especificidad de clase.</p>

Texto con el color por defecto del selector de etiqueta.

Este párrafo gana por especificidad de clase.

Orden del código: el último en hablar gana

Cuando dos declaraciones tienen el mismo origen y la misma especificidad, el navegador aplica la que aparece de última en el código fuente. Este comportamiento es crítico al ordenar las pseudo-clases de un enlace.

a:link { color: #2a7ae2; }
a:visited { color: #8e44ad; }
a:hover { text-decoration: underline; }
a:active { color: #c0392b; }

Como las cuatro pseudo-clases tienen la misma especificidad, su orden importa. La regla mnemotécnica es LoVe/HAte — link, visited, hover, active. Si inviertes :hover y :link, el :hover nunca se aplicaría.

Pasa el cursor sobre este enlace para ver el efecto del orden del código.

Herencia: propiedades que viajan hacia abajo

La herencia permite que ciertas propiedades de un elemento padre se transmitan a sus hijos. No todas las propiedades heredan: lo hacen principalmente las relacionadas con texto (color, font-family, line-height, text-align), mientras que las de caja (margin, padding, border) no.

.tarjeta { color: #1a5276; font-family: Georgia, serif; }

<div class="tarjeta">
 <h4>Título heredado</h4>
 <p>Este párrafo hereda <em>color</em> y <em>font-family</em> del contenedor.</p>
</div>

Título heredado

Este párrafo hereda color y font-family del contenedor.

Valores especiales: `inherit` e `initial`

Dos palabras clave te dan control explícito sobre la herencia:

inherit — fuerza a una propiedad a tomar el valor del padre, incluso en propiedades que normalmente no heredan.
initial — restablece la propiedad a su valor inicial según la especificación, ignorando la herencia.

Unidades absolutas vs. relativas

El píxel (px) es la unidad absoluta más común. Existen otras (pt, cm, in) con equivalencias fijas: 1in = 96px = 72pt. Sin embargo, las unidades relativas son las que permiten construir interfaces que escalan con el contexto.

`em`: relativo al elemento

Un em equivale al font-size del propio elemento. Es ideal para padding, margin y border-radius, porque estos escalan junto con el tamaño de fuente.

.caja { padding: 1em; border-radius: 1em; background: #ecf0f1; }
.caja--pequena { font-size: 12px; }
.caja--grande { font-size: 20px; }

padding 1em · 12px padding 1em · 20px

El padding de ambas cajas es 1em, pero al cambiar el font-size el espaciado escala proporcionalmente sin tocar la propiedad padding.

Info

Para convertir un tamaño en píxeles a em, divide el tamaño deseado entre el tamaño heredado: si quieres 16px y el padre tiene 12px, entonces 16 / 12 = 1.333em.

`rem`: relativo a la raíz

rem (root em) siempre toma como referencia el font-size del elemento raíz (<html> o :root). Esto te da un punto de control global: cambiar el tamaño de la raíz redimensiona todo el documento de forma coherente.

:root { font-size: 0.875em; }

@media (min-width: 800px) { :root { font-size: 1em; } }
@media (min-width: 1200px) { :root { font-size: 1.125em; } }

Una práctica habitual: usar rem para tipografía, px para bordes y em para padding, margin y border-radius.

Unidades relativas al viewport

vw — 1% del ancho del viewport.
vh — 1% del alto del viewport.
vmin — 1% de la dimensión más pequeña entre ancho y alto.
vmax — 1% de la dimensión más grande.

`calc()` para combinar unidades

calc() permite operar entre unidades de distinta naturaleza, algo imposible de otra forma. Es muy útil para tipografía fluida:

:root { font-size: calc(0.5em + 1vw); }

Números sin unidad y `line-height`

Si declaras un número sin unidad en line-height, este actúa como un factor multiplicador del font-size del elemento. Es la forma recomendada, porque cada descendiente calcula su propia altura de línea a partir de su tamaño de fuente.

body { line-height: 1.5; }

Custom properties (variables CSS)

Las variables CSS se declaran con el prefijo -- y se consumen con la función var(). A diferencia de las variables de un preprocesador, son dinámicas: viven en el DOM y respetan la cascada y la herencia.

:root {
 --color-marca: #2a9da9;
 --color-texto: #1c2833;
}

.panel {
 color: var(--color-texto);
 border-left: 4px solid var(--color-marca);
}

var() acepta un segundo argumento como valor de respaldo: var(--color-secundario, #888) usará #888 si la variable no está definida.

Redefinir variables por contexto

Como las variables respetan la cascada, puedes sobrescribirlas dentro de un bloque para crear temas locales. Aquí el mismo componente .panel se reconfigura dentro de .tema-oscuro cambiando solo las variables:

:root { --fondo: #fff; --texto: #111; }
.tema-oscuro { --fondo: #2c3e50; --texto: #ecf0f1; }

.panel {
 background: var(--fondo);
 color: var(--texto);
 padding: 1em;
 border-radius: .5em;
}

Panel claro

Usa las variables por defecto de :root.

Panel oscuro

Las mismas reglas, con las variables redefinidas.

El componente no cambió ni una línea: solo redefinimos las variables en un contenedor superior. Ese es el poder de combinar herencia y custom properties.

Conclusión

La cascada, la especificidad y la herencia forman el núcleo conceptual de CSS. Dominarlos te permite predecir qué regla gana sin recurrir a parches. Sumado a un buen uso de unidades relativas y variables, tienes la base para escribir estilos escalables y mantenibles.

Note

🚀 Próximo en la serie: los selectores de CSS, la herramienta con la que apuntamos con precisión a los elementos que queremos estilizar.

Html Y CSS · DacaCode

Estilos CSS: Animaciones con @keyframes

Transición vs. animación

La regla @keyframes

Múltiples pasos con porcentajes

La propiedad animation y sus subpropiedades

iteration-count y direction

fill-mode: el estado antes y después

play-state y delay

Encadenar varias animaciones

Accesibilidad: respeta prefers-reduced-motion

Rendimiento: anima en la capa de composición

Conclusión

Estilos CSS: Modularización y patrones de diseño

Qué es la modularización

Estilos base

Componentes y BEM

Posicionamiento del componente

Estado de los componentes

Utility classes

Metodologías de arquitectura CSS

Librerías de patrones

Conclusión

Estilos CSS: Transiciones, transformaciones y rendimiento

Transiciones

Timing functions

Transformaciones

Rotación

Traslación

Escala

Inclinación

Punto de referencia: transform-origin

Combinar transformaciones

El pipeline de renderizado

Transformaciones en 3D

Conclusión

Estilos CSS: Fondos, gradientes y sombras

La familia background

Gradientes lineales

Gradientes lineales repetitivos

Gradientes radiales

Combinar múltiples fondos

Texturas con blend modes

Sombras: box-shadow y text-shadow

Sombras interiores para feedback

Conclusión

Estilos CSS: Posicionamiento, z-index y diseño responsive

La propiedad position

Fixed: anclado al viewport

Absolute: relativo al ancestro posicionado

Relative: desplazamiento sin salir del flujo

Sticky: lo mejor de relative y fixed

Stacking contexts y z-index

Responsive: estilos que se adaptan

Media queries

Breakpoints con mobile first

Estilos para impresión

Conclusión

Estilos CSS: Layouts con Float, Flexbox y Grid

Float: el origen y el clearfix

Flexbox: layout en una dimensión

Alinear ítems con justify-content y align-items

Controlar el tamaño: flex-grow, flex-shrink y flex-basis

Dirección y envoltura

Propiedades del ítem

CSS Grid: layout en dos dimensiones

Una rejilla básica

Posicionar ítems por líneas

Áreas con nombre

Rejilla implícita y galerías responsivas

Flexbox y Grid: complementarios, no rivales

Conclusión

Estilos CSS: Dominando el modelo de caja

Las cuatro regiones de una caja

box-sizing: content-box vs border-box

Alturas: el flujo normal manda

overflow: qué hacer cuando el contenido se desborda

Centrado vertical

Márgenes negativos

Colapso de márgenes (margin collapsing)

`box-sizing`: content-box vs border-box

`overflow`: qué hacer cuando el contenido se desborda

Valores especiales: `inherit` e `initial`

`em`: relativo al elemento

`rem`: relativo a la raíz

`calc()` para combinar unidades

Números sin unidad y `line-height`