HTML/CSS
Cheat Sheet completa de CSS
Esta cheat sheet de CSS es tu guía de referencia rápida para dominar los estilos web. Desde selectores básicos hasta layouts avanzados con Grid y Flexbox, aquí encontrarás todo lo esencial con ejemplos prácticos y visuales.
Si quieres aprenderlo paso a paso y en orden, tienes el Curso de CSS.
Selectores
Los selectores determinan qué elementos HTML serán afectados por los estilos CSS.
/* 🚀 SELECTORES EN CSS */
/* 🔹 SELECTORES BÁSICOS */
/* Selector universal */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Selector de elemento */
h1 {
color: blue;
font-size: 2rem;
}
/* Selector de clase */
.destacado {
background-color: yellow;
font-weight: bold;
}
/* Selector de ID */
#encabezado {
text-align: center;
margin-bottom: 20px;
}
/* 🔹 SELECTORES DE ATRIBUTO */
/* Elemento con atributo específico */
input[type='text'] {
border: 1px solid #ccc;
padding: 8px;
}
/* Atributo que contiene valor */
a[href*='github'] {
color: #333;
}
/* Atributo que empieza con valor */
img[src^='https'] {
border: 2px solid green;
}
/* Atributo que termina con valor */
a[href$='.pdf'] {
color: red;
}
/* 🔹 SELECTORES COMBINADORES */
/* Descendiente (cualquier nivel) */
article p {
line-height: 1.6;
}
/* Hijo directo */
nav > ul {
list-style: none;
}
/* Hermano adyacente (siguiente) */
h2 + p {
margin-top: 0;
}
/* Hermanos generales (todos los siguientes) */
h2 ~ p {
color: #666;
}
/* 🔹 PSEUDO-CLASES */
/* Estados de enlace */
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
/* Estados de formulario */
input:focus {
outline: 2px solid blue;
border-color: blue;
}
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Pseudo-clases estructurales */
li:first-child {
font-weight: bold;
}
li:last-child {
border-bottom: none;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(odd) {
background-color: white;
}
p:nth-of-type(2) {
color: blue;
}
/* 🔹 PSEUDO-ELEMENTOS */
/* Primera línea */
p::first-line {
font-weight: bold;
}
/* Primera letra */
p::first-letter {
font-size: 2em;
float: left;
}
/* Contenido generado */
.icono::before {
content: '📍 ';
}
.enlace-externo::after {
content: ' ↗';
}
/* Selección de texto */
::selection {
background-color: yellow;
color: black;
}
/* Placeholder */
input::placeholder {
color: #999;
font-style: italic;
}Propiedades de texto
Las propiedades de texto controlan la apariencia y el formato del contenido textual.
/* 🚀 PROPIEDADES DE TEXTO */
/* 🔹 FUENTE */
.texto-ejemplo {
/* Familia de fuente */
font-family: 'Helvetica', Arial, sans-serif;
/* Tamaño de fuente */
font-size: 16px; /* px, em, rem, %, vw, vh */
/* Peso de fuente */
font-weight: bold; /* normal, bold, bolder, lighter, 100-900 */
/* Estilo de fuente */
font-style: italic; /* normal, italic, oblique */
/* Variante de fuente */
font-variant: small-caps; /* normal, small-caps */
/* Shorthand */
font:
italic bold 16px/1.5 'Arial',
sans-serif;
}
/* 🔹 TEXTO */
.formato-texto {
/* Color del texto */
color: #333; /* hex, rgb, rgba, hsl, hsla, nombres */
/* Alineación */
text-align: center; /* left, right, center, justify */
/* Decoración */
text-decoration: underline; /* none, underline, overline, line-through */
text-decoration-color: red;
text-decoration-style: dashed; /* solid, dashed, dotted, wavy */
/* Transformación */
text-transform: uppercase; /* none, uppercase, lowercase, capitalize */
/* Espaciado entre letras */
letter-spacing: 2px;
/* Espaciado entre palabras */
word-spacing: 4px;
/* Altura de línea */
line-height: 1.6; /* número, px, em, % */
/* Indentación */
text-indent: 20px;
/* Sombra de texto */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
/* Control de salto de línea */
word-break: break-word; /* normal, break-all, break-word */
white-space: nowrap; /* normal, nowrap, pre, pre-wrap, pre-line */
/* Desbordamiento de texto */
text-overflow: ellipsis; /* clip, ellipsis */
overflow: hidden;
}
/* 🔹 EJEMPLOS ESPECÍFICOS */
.titulo-principal {
font-family: 'Georgia', serif;
font-size: clamp(1.5rem, 4vw, 3rem); /* Responsivo */
font-weight: 700;
color: #2c3e50;
text-align: center;
letter-spacing: -0.02em;
line-height: 1.2;
}
.parrafo-destacado {
font-size: 1.1em;
line-height: 1.7;
color: #444;
text-align: justify;
text-indent: 1.5em;
}
.texto-truncado {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.enlace-animado {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}
.enlace-animado:hover {
color: #e74c3c;
text-decoration: underline;
}Colores y fondos
Los colores y fondos establecen la paleta visual y el aspecto estético de los elementos.
/* 🚀 COLORES Y FONDOS */
/* 🔹 FORMATOS DE COLOR */
.colores-ejemplo {
/* Nombres de colores */
color: red;
/* Hexadecimal */
background-color: #3498db;
/* RGB */
border-color: rgb(255, 99, 71);
/* RGBA (con transparencia) */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* HSL (Matiz, Saturación, Luminosidad) */
background-color: hsl(210, 50%, 60%);
/* HSLA (con transparencia) */
background-color: hsla(210, 50%, 60%, 0.8);
}
/* 🔹 FONDOS */
.fondo-completo {
/* Color de fondo */
background-color: #f8f9fa;
/* Imagen de fondo */
background-image: url('imagen.jpg');
/* Repetición */
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
/* Posición */
background-position: center center; /* left, right, center, top, bottom, px, % */
/* Tamaño */
background-size: cover; /* auto, cover, contain, px, % */
/* Fijación */
background-attachment: fixed; /* scroll, fixed, local */
/* Shorthand */
background: url('imagen.jpg') no-repeat center/cover fixed;
}
/* 🔹 GRADIENTES */
.gradiente-lineal {
background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
}
.gradiente-radial {
background: radial-gradient(circle at center, #ff6b6b 0%, #4ecdc4 70%, #45b7d1 100%);
}
.gradiente-conico {
background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
}
/* 🔹 MÚLTIPLES FONDOS */
.fondos-multiples {
background:
url('patron.png') repeat,
linear-gradient(135deg, #667eea 0%, #764ba2 100%),
#333;
}
/* 🔹 VARIABLES CSS (Custom Properties) */
:root {
--color-primario: #3498db;
--color-secundario: #2ecc71;
--color-acento: #e74c3c;
--color-texto: #2c3e50;
--color-gris: #95a5a6;
--gradiente-principal: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
}
.usando-variables {
color: var(--color-texto);
background: var(--gradiente-principal);
border: 2px solid var(--color-acento);
}
/* 🔹 EFECTOS AVANZADOS */
.glassmorphism {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.neumorphism {
background: #e0e0e0;
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}
.modo-oscuro {
--bg-color: #1a1a1a;
--text-color: #ffffff;
--accent-color: #4ecdc4;
background-color: var(--bg-color);
color: var(--text-color);
}
/* 🔹 FILTROS */
.imagen-filtrada {
filter: blur(2px) brightness(1.2) contrast(1.1) grayscale(0.3) hue-rotate(90deg) saturate(1.2);
}Box Model
El Box Model define cómo se calculan las dimensiones y el espaciado de los elementos.
/* 🚀 BOX MODEL */
/* 🔹 DIMENSIONES */
.caja-ejemplo {
/* Ancho y alto */
width: 300px;
height: 200px;
/* Ancho y alto mínimo/máximo */
min-width: 200px;
max-width: 500px;
min-height: 100px;
max-height: 400px;
/* Box-sizing (¡MUY IMPORTANTE!) */
box-sizing: border-box; /* content-box (default), border-box */
}
/* 🔹 PADDING (Espacio interno) */
.padding-ejemplo {
/* Todas las direcciones */
padding: 20px;
/* Vertical y horizontal */
padding: 10px 20px;
/* Top, horizontal, bottom */
padding: 10px 20px 15px;
/* Cada dirección */
padding: 10px 20px 15px 25px; /* top right bottom left */
/* Propiedades individuales */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
}
/* 🔹 MARGIN (Espacio externo) */
.margin-ejemplo {
/* Sintaxis igual que padding */
margin: 20px;
margin: 10px 20px;
margin: 10px 20px 15px;
margin: 10px 20px 15px 25px;
/* Centrar elemento */
margin: 0 auto;
/* Valores negativos */
margin-top: -10px;
/* Propiedades individuales */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;
}
/* 🔹 BORDER (Borde) */
.border-ejemplo {
/* Shorthand */
border: 2px solid #333;
/* Propiedades separadas */
border-width: 2px;
border-style: solid; /* none, solid, dashed, dotted, double, groove, ridge, inset, outset */
border-color: #333;
/* Bordes individuales */
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double orange;
/* Border radius (esquinas redondeadas) */
border-radius: 10px;
border-radius: 10px 20px; /* top-left/bottom-right top-right/bottom-left */
border-radius: 10px 20px 30px; /* top-left top-right/bottom-left bottom-right */
border-radius: 10px 20px 30px 40px; /* top-left top-right bottom-right bottom-left */
/* Esquinas individuales */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
/* 🔹 OUTLINE (Contorno externo) */
.outline-ejemplo {
outline: 2px solid blue;
outline-offset: 5px; /* Separación del elemento */
}
/* 🔹 BOX-SHADOW (Sombra) */
.sombra-ejemplo {
/* Sombra básica */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
/* Múltiples sombras */
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(0, 0, 0, 0.1);
/* Sombra interna */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
/* Parámetros: offset-x offset-y blur-radius spread-radius color */
box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
}
/* 🔹 OVERFLOW (Desbordamiento) */
.overflow-ejemplo {
width: 200px;
height: 100px;
overflow: hidden; /* visible, hidden, scroll, auto */
/* Control por eje */
overflow-x: hidden;
overflow-y: scroll;
}
/* 🔹 EJEMPLOS PRÁCTICOS */
.tarjeta {
width: 300px;
padding: 20px;
margin: 20px auto;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.boton {
padding: 12px 24px;
margin: 10px;
border: none;
border-radius: 6px;
background: #3498db;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.boton:hover {
background: #2980b9;
box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3);
}
.contenedor-centrado {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}Display y Position
Display y Position controlan cómo se comportan y posicionan los elementos en la página.
/* 🚀 DISPLAY Y POSITION */
/* 🔹 DISPLAY */
.display-ejemplos {
/* Valores principales */
display: block; /* Ocupa todo ancho disponible */
display: inline; /* Solo el ancho del contenido */
display: inline-block; /* Combinación de ambos */
display: none; /* Oculto completamente */
display: flex; /* Contenedor flexible */
display: grid; /* Contenedor de rejilla */
display: table; /* Comportamiento de tabla */
display: table-cell; /* Comportamiento de celda */
}
/* Ejemplos específicos */
.bloque {
display: block;
width: 100%;
height: 50px;
background: #3498db;
margin: 10px 0;
}
.inline {
display: inline;
background: #e74c3c;
padding: 5px;
/* ❌ width y height no funcionan en inline */
}
.inline-block {
display: inline-block;
width: 100px;
height: 50px;
background: #2ecc71;
margin: 5px;
vertical-align: top;
}
/* 🔹 POSITION */
.position-ejemplos {
/* Valores de position */
position: static; /* Posicionamiento normal (default) */
position: relative; /* Relativo a su posición original */
position: absolute; /* Relativo al ancestro posicionado más cercano */
position: fixed; /* Relativo a la ventana del navegador */
position: sticky; /* Híbrido entre relative y fixed */
}
/* Posicionamiento relativo */
.relativo {
position: relative;
top: 10px; /* Se mueve 10px hacia abajo */
left: 20px; /* Se mueve 20px hacia la derecha */
/* El espacio original se mantiene */
}
/* Posicionamiento absoluto */
.contenedor-absoluto {
position: relative; /* Punto de referencia para hijos absolutos */
width: 300px;
height: 200px;
border: 2px solid #333;
}
.absoluto {
position: absolute;
top: 20px;
right: 20px;
width: 100px;
height: 50px;
background: #e74c3c;
/* Se posiciona relativo al .contenedor-absoluto */
}
/* Posicionamiento fijo */
.navegacion-fija {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #2c3e50;
z-index: 1000;
/* Siempre visible en la parte superior */
}
/* Posicionamiento sticky */
.encabezado-sticky {
position: sticky;
top: 0;
background: white;
padding: 10px;
border-bottom: 1px solid #ddd;
/* Se queda fijo cuando llega al top durante scroll */
}
/* 🔹 Z-INDEX (Capas) */
.capa-fondo {
position: absolute;
z-index: 1;
background: red;
}
.capa-media {
position: absolute;
z-index: 10;
background: blue;
}
.capa-frente {
position: absolute;
z-index: 100;
background: green;
}
/* 🔹 CENTRADO */
/* Centrado horizontal y vertical con absolute */
.centrado-absoluto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background: #9b59b6;
}
/* Centrado con margin auto */
.centrado-margin {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px;
height: 100px;
background: #f39c12;
}
/* 🔹 VISIBILITY */
.oculto-visibility {
visibility: hidden; /* Oculto pero mantiene el espacio */
}
.oculto-display {
display: none; /* Oculto y no ocupa espacio */
}
.transparente {
opacity: 0; /* Transparente pero mantiene el espacio */
}
/* 🔹 EJEMPLOS PRÁCTICOS */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 10;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
background: #e74c3c;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
}Flexbox
Flexbox es un sistema de layout que permite crear diseños flexibles y responsive de manera eficiente.
/* 🚀 FLEXBOX */
/* 🔹 CONTENEDOR FLEX (PADRE) */
.contenedor-flex {
display: flex;
/* Dirección de los elementos */
flex-direction: row; /* row, row-reverse, column, column-reverse */
/* Ajuste de línea */
flex-wrap: nowrap; /* nowrap, wrap, wrap-reverse */
/* Shorthand para direction y wrap */
flex-flow: row wrap;
/* Alineación horizontal (eje principal) */
justify-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
/* Alineación vertical (eje cruzado) */
align-items: stretch; /* stretch, flex-start, flex-end, center, baseline */
/* Alineación de líneas múltiples */
align-content: stretch; /* stretch, flex-start, flex-end, center, space-between, space-around */
/* Espacio entre elementos */
gap: 20px; /* Shorthand para row-gap y column-gap */
row-gap: 20px;
column-gap: 20px;
}
/* 🔹 ELEMENTOS FLEX (HIJOS) */
.elemento-flex {
/* Crecimiento */
flex-grow: 1; /* 0 = no crece, >0 = factor de crecimiento */
/* Encogimiento */
flex-shrink: 1; /* 0 = no se encoge, >0 = factor de encogimiento */
/* Tamaño base */
flex-basis: auto; /* auto, 0, px, %, etc. */
/* Shorthand */
flex: 1 1 auto; /* grow shrink basis */
flex: 1; /* Equivale a flex: 1 1 0% */
/* Alineación individual */
align-self: auto; /* auto, flex-start, flex-end, center, baseline, stretch */
/* Orden */
order: 0; /* Número entero, por defecto 0 */
}
/* 🔹 EJEMPLOS PRÁCTICOS */
/* Layout de navegación */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #2c3e50;
}
.logo {
flex-shrink: 0; /* No se encoge */
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-actions {
display: flex;
gap: 1rem;
}
/* Layout de tarjetas */
.grid-tarjetas {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 2rem;
}
.tarjeta {
flex: 1 1 300px; /* Crece, se encoge, base mínima 300px */
min-width: 300px;
background: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Centrado perfecto */
.centrado-perfecto {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Layout de sidebar */
.layout-principal {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 0 0 250px; /* No crece ni se encoge, fijo 250px */
background: #34495e;
}
.contenido-principal {
flex: 1; /* Ocupa el resto del espacio */
padding: 2rem;
}
/* Footer con elementos distribuidos */
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
background: #2c3e50;
color: white;
}
.footer-izquierda,
.footer-derecha {
display: flex;
align-items: center;
gap: 1rem;
}
/* 🔹 TÉCNICAS AVANZADAS */
/* Auto-margin para empujar elementos */
.header-flexible {
display: flex;
align-items: center;
gap: 1rem;
}
.buscar {
margin-left: auto; /* Empuja hacia la derecha */
}
/* Columnas de igual altura */
.columnas-iguales {
display: flex;
gap: 2rem;
}
.columna {
flex: 1;
background: #ecf0f1;
padding: 1rem;
}
/* Responsive con orden */
.responsive-order {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.responsive-order {
flex-direction: row;
}
.main-content {
order: 1;
flex: 2;
}
.sidebar-content {
order: 2;
flex: 1;
}
}
/* Holy Grail Layout con Flexbox */
.holy-grail {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.holy-grail-header,
.holy-grail-footer {
flex-shrink: 0;
background: #3498db;
padding: 1rem;
}
.holy-grail-body {
display: flex;
flex: 1;
}
.holy-grail-nav,
.holy-grail-ads {
flex: 0 0 12rem;
background: #ecf0f1;
}
.holy-grail-content {
flex: 1;
padding: 1rem;
}CSS Grid
CSS Grid proporciona un sistema de layout bidimensional para crear diseños complejos de manera intuitiva.
/* 🚀 CSS GRID */
/* 🔹 CONTENEDOR GRID (PADRE) */
.contenedor-grid {
display: grid;
/* Definir columnas */
grid-template-columns: 200px 1fr 100px; /* Tamaños fijos y flexibles */
grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
/* Definir filas */
grid-template-rows: 60px 1fr 40px; /* Header, content, footer */
grid-template-rows: repeat(3, 200px); /* 3 filas de 200px */
/* Espaciado */
gap: 20px; /* Espacio entre filas y columnas */
row-gap: 20px; /* Espacio entre filas */
column-gap: 10px; /* Espacio entre columnas */
/* Alineación de elementos */
justify-items: stretch; /* start, end, center, stretch */
align-items: stretch; /* start, end, center, stretch */
/* Alineación del grid completo */
justify-content: start; /* start, end, center, stretch, space-around, space-between, space-evenly */
align-content: start; /* start, end, center, stretch, space-around, space-between, space-evenly */
/* Shorthand para align y justify */
place-items: center; /* align-items justify-items */
place-content: center; /* align-content justify-content */
}
/* 🔹 ELEMENTOS GRID (HIJOS) */
.elemento-grid {
/* Posicionamiento por líneas */
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
/* Shorthand */
grid-column: 1 / 3; /* start / end */
grid-row: 1 / 2; /* start / end */
grid-area: 1 / 1 / 2 / 3; /* row-start / col-start / row-end / col-end */
/* Spanning (extender) */
grid-column: span 2; /* Ocupa 2 columnas */
grid-row: span 3; /* Ocupa 3 filas */
/* Alineación individual */
justify-self: center; /* start, end, center, stretch */
align-self: center; /* start, end, center, stretch */
place-self: center; /* align-self justify-self */
}
/* 🔹 ÁREAS NOMBRADAS */
.layout-areas {
display: grid;
grid-template-columns: 200px 1fr 150px;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
'header header header'
'sidebar content ads'
'footer footer footer';
gap: 1rem;
min-height: 100vh;
}
/* Asignar elementos a áreas */
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.ads {
grid-area: ads;
}
.footer {
grid-area: footer;
}
/* 🔹 EJEMPLOS PRÁCTICOS */
/* Grid de tarjetas responsive */
.grid-tarjetas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}
.tarjeta-grid {
background: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Grid de galería */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
gap: 1rem;
}
.imagen-destacada {
grid-column: span 2;
grid-row: span 2;
}
/* Layout de dashboard */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
'sidebar header'
'sidebar main';
min-height: 100vh;
}
.dashboard-header {
grid-area: header;
background: #3498db;
display: flex;
align-items: center;
padding: 0 2rem;
}
.dashboard-sidebar {
grid-area: sidebar;
background: #2c3e50;
}
.dashboard-main {
grid-area: main;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
align-content: start;
}
/* Grid anidado */
.widget {
background: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: grid;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
/* 🔹 TÉCNICAS AVANZADAS */
/* Grid con líneas nombradas */
.grid-lineas-nombradas {
display: grid;
grid-template-columns:
[sidebar-start] 200px
[sidebar-end main-start] 1fr
[main-end];
grid-template-rows:
[header-start] 60px
[header-end content-start] 1fr
[content-end];
}
.elemento-lineas {
grid-column: sidebar-start / main-end;
grid-row: header-start / header-end;
}
/* Grid responsive avanzado */
.grid-responsive {
display: grid;
gap: 1rem;
/* Mobile first */
grid-template-columns: 1fr;
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
}
@media (min-width: 768px) {
.grid-responsive {
grid-template-columns: 200px 1fr;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
}
}
@media (min-width: 1024px) {
.grid-responsive {
grid-template-columns: 200px 1fr 150px;
grid-template-areas:
'header header header'
'sidebar main ads'
'footer footer footer';
}
}
/* Masonry layout con Grid */
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.masonry-item {
break-inside: avoid;
}
/* Auto-placement inteligente */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 1rem;
}
.item-largo {
grid-row: span 2;
}
.item-ancho {
grid-column: span 2;
}Transformaciones y Transiciones
Las transformaciones modifican la apariencia visual de elementos, mientras las transiciones animan cambios de propiedades.
/* 🚀 TRANSFORMACIONES Y TRANSICIONES */
/* 🔹 TRANSFORMS 2D */
.transform-2d {
/* Traslación */
transform: translate(50px, 100px); /* X, Y */
transform: translateX(50px); /* Solo X */
transform: translateY(100px); /* Solo Y */
/* Escala */
transform: scale(1.5); /* Uniforme */
transform: scale(1.5, 2); /* X, Y diferentes */
transform: scaleX(1.5); /* Solo X */
transform: scaleY(2); /* Solo Y */
/* Rotación */
transform: rotate(45deg); /* Grados */
transform: rotate(0.785rad); /* Radianes */
/* Sesgo/Inclinación */
transform: skew(30deg, 20deg); /* X, Y */
transform: skewX(30deg); /* Solo X */
transform: skewY(20deg); /* Solo Y */
/* Múltiples transformaciones */
transform: translate(50px, 100px) rotate(45deg) scale(1.2);
/* Origen de transformación */
transform-origin: center center; /* center, top, bottom, left, right, px, % */
transform-origin: top left;
transform-origin: 50% 50%;
}
/* 🔹 TRANSFORMS 3D */
.transform-3d {
/* Perspectiva (aplicar al contenedor padre) */
perspective: 1000px;
/* Traslación 3D */
transform: translate3d(50px, 100px, 200px);
transform: translateZ(200px);
/* Rotación 3D */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 0, 45deg); /* Vector X, Y, Z, ángulo */
/* Escala 3D */
transform: scale3d(1.5, 2, 0.5);
transform: scaleZ(0.5);
/* Estilo de transformación 3D */
transform-style: preserve-3d; /* flat, preserve-3d */
backface-visibility: hidden; /* visible, hidden */
}
/* 🔹 TRANSICIONES */
.transicion-basica {
/* Propiedades iniciales */
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
/* Transición */
transition: background-color 0.3s ease;
/* Al hacer hover */
&:hover {
background-color: #2980b9;
}
}
/* Transiciones múltiples */
.transicion-multiple {
width: 100px;
height: 100px;
background: #e74c3c;
transform: scale(1);
opacity: 1;
/* Múltiples propiedades */
transition:
width 0.3s ease,
height 0.3s ease,
background-color 0.5s linear,
transform 0.2s ease-out,
opacity 0.4s ease-in;
/* Shorthand para todas las propiedades */
transition: all 0.3s ease;
}
.transicion-multiple:hover {
width: 150px;
height: 150px;
background: #c0392b;
transform: scale(1.1) rotate(10deg);
opacity: 0.8;
}
/* 🔹 TIMING FUNCTIONS */
.timing-functions {
transition-duration: 0.5s;
/* Funciones predefinidas */
transition-timing-function: ease; /* Default */
transition-timing-function: linear; /* Velocidad constante */
transition-timing-function: ease-in; /* Lento al inicio */
transition-timing-function: ease-out; /* Lento al final */
transition-timing-function: ease-in-out; /* Lento en ambos extremos */
/* Bezier personalizada */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
/* Funciones de pasos */
transition-timing-function: steps(4, end);
}
/* 🔹 EJEMPLOS PRÁCTICOS */
/* Botón con efecto hover */
.boton-animado {
background: #3498db;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.boton-animado::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: left 0.3s ease;
}
.boton-animado:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3);
}
.boton-animado:hover::before {
left: 100%;
}
/* Tarjeta con flip 3D */
.tarjeta-flip {
width: 300px;
height: 200px;
perspective: 1000px;
}
.tarjeta-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.tarjeta-flip:hover .tarjeta-inner {
transform: rotateY(180deg);
}
.tarjeta-front,
.tarjeta-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.tarjeta-back {
background: #2c3e50;
color: white;
transform: rotateY(180deg);
}
/* Loader con animación */
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
margin: 20px auto;
transition: transform 0.1s linear;
}
/* Galería con zoom */
.imagen-zoom {
width: 200px;
height: 150px;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
.imagen-zoom img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.imagen-zoom:hover img {
transform: scale(1.1);
}
/* Menu hamburguesa animado */
.hamburger {
width: 30px;
height: 22px;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #333;
border-radius: 3px;
opacity: 1;
left: 0;
transition: all 0.25s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 0px;
}
.hamburger span:nth-child(2) {
top: 9px;
}
.hamburger span:nth-child(3) {
top: 18px;
}
.hamburger.activo span:nth-child(1) {
top: 9px;
transform: rotate(135deg);
}
.hamburger.activo span:nth-child(2) {
opacity: 0;
left: -60px;
}
.hamburger.activo span:nth-child(3) {
top: 9px;
transform: rotate(-135deg);
}Animaciones
Las animaciones CSS permiten crear movimientos complejos y efectos visuales sin JavaScript.
/* 🚀 ANIMACIONES CSS */
/* 🔹 DEFINIR KEYFRAMES */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Keyframes con porcentajes */
@keyframes slideInRight {
0% {
transform: translateX(100%);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
/* Animación compleja */
@keyframes bounce {
0%,
20%,
53%,
80%,
100% {
transform: translate3d(0, 0, 0);
}
40%,
43% {
transform: translate3d(0, -20px, 0);
}
70% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
/* 🔹 APLICAR ANIMACIONES */
.elemento-animado {
/* Propiedades de animación */
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
/* Shorthand */
animation: fadeIn 1s ease-out 0.5s 1 normal forwards;
}
/* 🔹 PROPIEDADES DE ANIMACIÓN */
.propiedades-animacion {
/* Duración */
animation-duration: 2s; /* segundos o milisegundos */
/* Función de tiempo */
animation-timing-function: ease; /* ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier() */
/* Retraso */
animation-delay: 1s; /* segundos o milisegundos */
/* Repeticiones */
animation-iteration-count: 3; /* número, infinite */
/* Dirección */
animation-direction: alternate; /* normal, reverse, alternate, alternate-reverse */
/* Estado de relleno */
animation-fill-mode: both; /* none, forwards, backwards, both */
/* Estado de reproducción */
animation-play-state: paused; /* running, paused */
}
/* 🔹 ANIMACIONES ÚTILES */
/* Fade In/Out */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 40px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Slide */
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
/* Zoom */
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
/* Rotación */
@keyframes rotateIn {
from {
transform-origin: center;
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
transform-origin: center;
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* Pulse */
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
/* Shake */
@keyframes shake {
from,
to {
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0);
}
}
/* 🔹 EJEMPLOS PRÁCTICOS */
/* Loading spinner */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Typing effect */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: orange;
}
}
.typewriter {
overflow: hidden;
border-right: 0.15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 0.15em;
animation:
typing 3.5s steps(40, end),
blink-caret 0.75s step-end infinite;
}
/* Floating animation */
@keyframes floating {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, -15px);
}
100% {
transform: translate(0, 0px);
}
}
.floating {
animation: floating 3s ease-in-out infinite;
}
/* Progress bar animation */
@keyframes progress {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.progress-bar {
width: 0%;
height: 20px;
background: #3498db;
border-radius: 10px;
animation: progress 2s ease-out forwards;
}
/* Notification slide in */
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: #2ecc71;
color: white;
padding: 1rem 2rem;
border-radius: 5px;
animation: slideInDown 0.5s ease-out;
}
/* 🔹 ANIMACIONES CON HOVER */
.hover-animado {
transition: all 0.3s ease;
}
.hover-animado:hover {
animation: pulse 0.5s;
}
/* Button press effect */
@keyframes buttonPress {
0% {
transform: scale(1);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
.button-press:active {
animation: buttonPress 0.1s ease-out;
}
/* 🔹 CONTROLAR ANIMACIONES CON JAVASCRIPT */
.paused {
animation-play-state: paused;
}
.delayed {
animation-delay: 2s;
}
.infinite {
animation-iteration-count: infinite;
}
/* 🔹 ANIMACIONES RESPONSIVE */
/* Reducir animaciones en dispositivos móviles */
@media (max-width: 768px) {
.elemento-animado {
animation-duration: 0.5s; /* Más rápido en móvil */
}
}
/* Respetar preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* 🔹 PERFORMANCE */
/* Usar propiedades que no causan reflow/repaint */
.optimizado {
/* ✅ Buenas para animaciones */
transform: translateX(100px);
opacity: 0.5;
/* ❌ Evitar animar estas propiedades */
/* width: 200px; */
/* height: 100px; */
/* top: 50px; */
/* left: 100px; */
}
/* Usar will-change para optimización */
.pre-optimizado {
will-change: transform, opacity;
}
/* Remover will-change después de la animación */
.post-optimizado {
will-change: auto;
}Media Queries
Las media queries permiten aplicar estilos diferentes según las características del dispositivo.
/* 🚀 MEDIA QUERIES */
/* 🔹 SINTAXIS BÁSICA */
/* Ancho máximo */
@media (max-width: 768px) {
.elemento {
font-size: 14px;
}
}
/* Ancho mínimo */
@media (min-width: 1024px) {
.elemento {
font-size: 18px;
}
}
/* Rango de anchos */
@media (min-width: 768px) and (max-width: 1023px) {
.elemento {
font-size: 16px;
}
}
/* 🔹 BREAKPOINTS COMUNES */
/* Mobile first approach */
.responsive-element {
/* Mobile styles (default) */
font-size: 14px;
padding: 10px;
}
/* Small tablets */
@media (min-width: 480px) {
.responsive-element {
font-size: 15px;
padding: 12px;
}
}
/* Tablets */
@media (min-width: 768px) {
.responsive-element {
font-size: 16px;
padding: 15px;
}
}
/* Small desktops */
@media (min-width: 1024px) {
.responsive-element {
font-size: 17px;
padding: 18px;
}
}
/* Large desktops */
@media (min-width: 1200px) {
.responsive-element {
font-size: 18px;
padding: 20px;
}
}
/* Extra large screens */
@media (min-width: 1440px) {
.responsive-element {
font-size: 20px;
padding: 25px;
}
}
/* 🔹 CARACTERÍSTICAS DE DISPOSITIVO */
/* Orientación */
@media (orientation: portrait) {
.nav {
flex-direction: column;
}
}
@media (orientation: landscape) {
.nav {
flex-direction: row;
}
}
/* Resolución/DPI */
@media (min-resolution: 2dppx) {
.logo {
background-image: url('logo@2x.png');
background-size: 100px 50px;
}
}
/* Tipo de dispositivo */
@media screen {
body {
font-family: Arial, sans-serif;
}
}
@media print {
body {
color: black;
background: white;
}
.no-print {
display: none;
}
}
/* Hover capability */
@media (hover: hover) {
.button:hover {
background-color: #0056b3;
}
}
@media (hover: none) {
.button:active {
background-color: #0056b3;
}
}
/* 🔹 CARACTERÍSTICAS AVANZADAS */
/* Densidad de píxeles */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.retina-image {
background-image: url('image@2x.png');
}
}
/* Modo de color */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #ffffff;
}
}
@media (prefers-color-scheme: light) {
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
}
/* Preferencias de animación */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Transparencia */
@media (prefers-reduced-transparency: reduce) {
.glass-effect {
backdrop-filter: none;
background: solid-color;
}
}
/* 🔹 MEDIA QUERIES COMBINADAS */
/* Múltiples condiciones */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
.tablet-landscape {
display: flex;
}
}
/* Condiciones OR */
@media (max-width: 480px), (max-height: 600px) {
.small-screen {
font-size: 12px;
}
}
/* Negación */
@media not screen and (max-width: 480px) {
.not-mobile {
display: block;
}
}
/* 🔹 EJEMPLOS PRÁCTICOS */
/* Layout responsive completo */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* Header responsive */
.header {
padding: 10px 0;
text-align: center;
}
.logo {
width: 100px;
height: auto;
}
/* Navegación */
.nav {
display: flex;
justify-content: center;
gap: 1rem;
}
.nav-link {
color: #3498db;
text-decoration: none;
}
.nav-link:hover {
text-decoration: underline;
}
/* Contenido principal */
.main-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.card {
background: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Footer */
.footer {
padding: 1rem 0;
text-align: center;
background: #2c3e50;
color: white;
}Siguiente paso
Si quieres aprender CSS paso a paso y en orden, tienes el Curso de CSS.