Teórico CSS

Introducción

Realizaremos una breve guía teórica de las propiedades más importantes que se pueden aplicar a un documento web escrito en HTML para darle una apariencia atractiva.

CSS da color, forma y orden a las páginas web. Modifica el diseño, los textos y los espacios de los elementos HTML mediante reglas que usan un selector y propiedades con valores.

📐 Modelo de la Caja y Espacios

El modelo de caja define las dimensiones y el espacio que ocupa cada elemento en la pantalla.

● width : Define el ancho de un elemento.
● height : Define el alto de un elemento.
● padding : Crea espacio dentro del borde de la caja.
● margin : Crea espacio fuera del borde de la caja.
● border : Pone una línea alrededor del elemento.
● border-radius : Redondea las esquinas de la caja.
● box-shadow : Añade una sombra a la caja.

Cuando hablamos de una etiqueta que se muestra en bloque, refiere a que ocupa todo el ancho de la pantalla y se ubican una debajo de otra. En cambio en línea ocupa solo su contenido y se ubica una al lado de la siguiente.

🖋️ Textos y Fuentes

● color : Cambia el color del texto.
● font-family : Define la tipo-letra o fuente.
● font-size : Ajusta el tamaño del texto.
● font-weight : Cambia el grosor de las letras.
● font-style : Pone el texto en cursiva.
● text-align : Alinea el texto a los lados o al centro.
● text-decoration : Añade líneas como subrayado.
● line-height : Cambia el espacio entre renglones.
● letter-spacing : Cambia el espacio entre letras.

🎨 Colores y Fondos

● background-color : Pone color de fondo.
● background-image : Pone una imagen de fondo.
● background-size : Ajusta el tamaño del fondo.
● opacity : Cambia la transparencia del elemento.

💻 Posición y Pantalla

● display : Cambia cómo se muestra el elemento (bloque, línea, oculto).
● position : Define el tipo de posición (relativa, absoluta, fija).
● top, bottom, left, right : Mueven el elemento desde sus lados.
● z-index : Ordena qué elemento pasa al frente.overflow: Oculta o muestra lo que sobra de la caja.

display decide cómo se comporta y se organiza un elemento dentro del diseño.
position decide dónde se coloca ese elemento respecto de su posición normal o de otro elemento.

🪛 Flexbox y Alineación

● flex-direction : Define la fila o columna de los elementos.
● justify-content : Acomoda los elementos de forma horizontal.
● align-items : Acomoda los elementos de forma vertical.
● gap : Deja espacio entre los elementos flexibles.

🎯 Centrar Elementos

Centrar elementos es uno de los retos más comunes en CSS. La técnica correcta depende de si el elemento es texto, un bloque o si usas herramientas modernas de diseño.

⭐ 1.Centrado con Flexbox (Recomendado)

Es el método más rápido y limpio. Funciona para centrar cualquier elemento hijo (tanto horizontal como verticalmente) dentro de un contenedor.

.contenedor-padre {
    display: flex;
    justify-content: center; /* Centra de forma horizontal */
    align-items: center;     /* Centra de forma vertical */
    height: 100vh;           /* Altura total de la pantalla para notar el efecto */
}

🧮 2.Centrado con Grid (El más corto)

Es la forma con menos líneas de código para lograr un centrado absoluto en dos ejes.

.contenedor-padre {
    display: grid;
    place-items: center;    /* Centra en ambos ejes a la vez */
    height: 100vh;
}

🔧 3.Centrado de Bloques con Margen

Sirve para centrar elementos de bloque (como un <div>, <section> o <form>) de forma horizontal. Requiere que el elemento tenga un ancho fijo.

.elemento-hijo {
    width: 50%;             /* El elemento debe tener un ancho definido */
    margin: 0 auto;         /* Arriba/Abajo 0, Izquierda/Derecha automático */
}

🖍️ 4.Centrado de Texto y Elementos de Línea

Sirve para centrar texto, enlaces (<a>) o imágenes (<img>) dentro de un bloque. Solo centra de forma horizontal.

.contenedor-padre {
    text-align: center;     /* Afecta a todo el contenido de línea interno */
}

🧰 5.Centrado Absoluto (Para casos especiales)

Se usa cuando necesitas posicionar un elemento encima de todo lo demás, como una ventana flotante o un menú de carga.

.elemento-hijo {
    position: absolute;
    top: 50%;               /* Lo baja al centro */
    left: 50%;              /* Lo mueve a la derecha al centro */
    transform: translate(-50%, -50%); /* Corrige el desfase de su propio tamaño */
}

💥 Uso propiedad flex

Flexbox (Caja Flexible) es un modelo de diseño unidimensional. Esto significa que organiza los elementos en una sola dirección a la vez: en fila (horizontal) o en columna (vertical).
Para que funcione, necesitas entender que hay dos roles: el Contenedor (el papá) y los Elementos Flex (los hijos).

1.El Contenedor (Propiedades del Padre)

Estas propiedades se aplican exclusivamente al elemento que va a guardar a los demás.

display:flex;

Activa el modo Flexbox. Por defecto, al poner esto, todos los hijos se alinearán en una fila horizontal, uno al lado del otro.

flex-direction

Define la dirección del eje principal.

● row (por defecto): Elementos en fila, de izquierda a derecha.
● row-reverse: Elementos en fila, de derecha a izquierda.
● column: Elementos en columna, de arriba a abajo.
● column-reverse: Elementos en columna, de abajo a arriba.

justify-content

Alinea los elementos a lo largo del eje principal (si es row, controla el espacio horizontal; si es column, controla el espacio vertical).

● flex-start: Elementos al inicio del contenedor.
● flex-end: Elementos al final del contenedor.
● center: Elementos en el centro.
● space-between: Primer y último elemento pegados a las esquinas; espacio limpio en medio.
● space-around: Espacio alrededor de cada elemento (los espacios de los lados son más pequeños).
● space-evenly: Todos los espacios intermedios y de los bordes son exactamente iguales.

align-items

Alinea los elementos a lo largo del eje secundario (el eje opuesto a flex-direction).

● stretch (por defecto): Los hijos se estiran para llenar todo el contenedor.
● flex-start: Elementos al inicio del eje secundario.
● flex-end: Elementos al final del eje secundario.
● center: Elementos centrados en este eje.

flex-wrap

Por defecto, Flexbox intenta meter todos los elementos en una sola línea, aunque se aplasten. Esta propiedad cambia eso.

● nowrap (por defecto): Todo en una sola línea.
● wrap: Si los elementos no caben, saltan a la siguiente línea de forma automática.

gap

Define la separación o espacio mínimo que habrá entre cada hijo, sin necesidad de usar márgenes individuales.

2.Los Elementos Flex (Propiedades de los Hijos)

Estas propiedades se aplican directamente a los elementos que están dentro del contenedor.

flex-grow

Define la capacidad de un elemento para crecer si hay espacio libre.

● 0 (por defecto) : No crece.
● 1 : Si todos tienen 1, se reparten el espacio sobrante por igual. Si uno tiene 2, crecerá el doble que el resto.

flex-shrink

Define la capacidad de un elemento para encogerse si no hay suficiente espacio.

● 1 (por defecto) : Se encoge si es necesario.
● 0 : No se encoge, mantiene su tamaño original aunque se salga de la pantalla.

flex-basis

Define el tamaño inicial de un elemento antes de que se reparta el espacio restante (es como un width o height inicial pero más inteligente).

align-self

Permite a un elemento hijo romper la regla general de align-items que le impuso el padre y alinearse de forma individual (por ejemplo, que todos estén arriba pero solo uno abajo).

order

Cambia el orden visual en el que aparecen los elementos, sin modificar el archivo HTML.

● Por defecto es 0.
● Los números negativos se muestran primero y los positivos después.

Ejemplo de aplicación en galería de Tarjetas

<div class="galeria">
  <div class="tarjeta">
    <div class="imagen-simulada"></div>
    <h3>Tarjeta 1</h3>
    <p>Descripción corta de la tarjeta.</p>
  </div>
  <div class="tarjeta">
    <div class="imagen-simulada"></div>
    <h3>Tarjeta 2</h3>
    <p>Descripción corta de la tarjeta.</p>
  </div>
  <div class="tarjeta">
    <div class="imagen-simulada"></div>
    <h3>Tarjeta 3</h3>
    <p>Descripción corta de la tarjeta.</p>
  </div>
</div>

/* 1. Propiedades del CONTENEDOR (Padre) */
.galeria {
  display: flex;            /* Activa Flexbox */
  flex-direction: row;      /* Organiza los hijos en fila */
  flex-wrap: wrap;          /* Permite que las tarjetas bajen si no caben */
  justify-content: center;  /* Centra las tarjetas horizontalmente */
  gap: 20px;                /* Deja un espacio de 20px entre cada tarjeta */
  padding: 20px;
}

/* 2. Propiedades de las TARJETAS (Hijos) */
.tarjeta {
  /* flex-grow: 1 (puede crecer), flex-shrink: 1 (puede encogerse), flex-basis: 300px (su base) */
  flex: 1 1 300px;          
  max-width: 400px;         /* Evita que la tarjeta crezca demasiado */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Estilos extra para rellenar el ejemplo */
.imagen-simulada {
  height: 150px;
  background-color: #3498db;
  border-radius: 4px;
}

¿Por qué funciona este diseño?

flex-wrap: wrap; Si abres la página en un celular, las tarjetas no se van a aplastar ni se saldrán de la pantalla. Flexbox las acomodará automáticamente una debajo de otra.
gap: 20px; No necesitas pelear con márgenes rebeldes. Esta propiedad del padre separa todas las tarjetas de forma exacta.
flex: 1 1 300px; Es el truco de magia. Le dice a cada tarjeta: “Intenta medir 300px de ancho. Si sobra espacio, crece para llenar la pantalla. Si el espacio se reduce, hazte más pequeña”.

📝 Flexbox aplicado a formulario

Aquí tienes un ejemplo práctico para estructurar y diseñar un formulario de contacto limpio y moderno utilizando Flexbox. En este caso, usaremos Flexbox en dos niveles: para ordenar el formulario completo y para alinear los iconos o campos internos.

<div class="contenedor-formulario">
  <form class="formulario">
    <h2>Escríbenos</h2>

    <div class="grupo-campo">
      <label for="nombre">Nombre Completo</label>
      <input type="text" id="nombre" placeholder="Tu nombre...">
    </div>

    <div class="grupo-campo">
      <label for="correo">Correo Electrónico</label>
      <input type="email" id="correo" placeholder="correo@ejemplo.com">
    </div>

    <div class="grupo-campo">
      <label for="mensaje">Mensaje</label>
      <textarea id="mensaje" rows="4" placeholder="¿En qué podemos ayudarte?"></textarea>
    </div>

    <button type="submit" class="boton-enviar">Enviar Mensaje</button>
  </form>
</div>

/* Centra todo el formulario en la pantalla */
.contenedor-formulario {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

/* 1. El Formulario como Contenedor Flex */
.formulario {
  display: flex;
  flex-direction: column;   /* Apila los campos verticalmente (uno abajo de otro) */
  gap: 20px;                /* Separa cada bloque de campo de forma exacta */
  width: 100%;
  max-width: 450px;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Título del formulario */
.formulario h2 {
  margin: 0;
  color: #333;
  text-align: center;
}

/* 2. Cada bloque (Label + Input) también usa Flexbox */
.grupo-campo {
  display: flex;
  flex-direction: column;   /* Pone la etiqueta arriba del input */
  gap: 8px;                 /* Separa el texto del cuadro de texto */
}

/* Estilos de los textos y cajas de entrada */
.grupo-campo label {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
}

.grupo-campo input,
.grupo-campo textarea {
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}

/* Efecto visual cuando el usuario hace clic para escribir */
.grupo-campo input:focus,
.grupo-campo textarea:focus {
  border-color: #3498db;
}

/* Botón de envío */
.boton-enviar {
  padding: 14px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.boton-enviar:hover {
  background-color: #2980b9;
}

¿Por qué es útil Flexbox en los formularios?

flex-direction: column; : En lugar de pelear con saltos de línea (<br>) o propiedades de bloque antiguas, esto obliga a que cada campo se coloque perfectamente debajo del anterior.
Mantenimiento simple: Si en el futuro quieres agregar más campos (por ejemplo, un campo de “Teléfono”), solo lo pegas en el HTML y Flexbox lo acomodará respetando el mismo espacio de separación (gap: 20px).

📱 Uso propiedad grid

CSS Grid Layout es un sistema de diseño bidimensional. A diferencia de Flexbox (que organiza elementos en una sola dirección), Grid te permite trabajar con filas y columnas al mismo tiempo. Es la herramienta perfecta para maquetar estructuras web completas o cuadrículas complejas. Al igual que en Flexbox, tenemos un Contenedor (padre) y Elementos Grid (hijos).

1.El Contenedor (Propiedades del Padre)

Estas reglas definen la estructura y el número de divisiones de tu cuadrícula.

display: grid;

Activa el sistema Grid en el contenedor. Por defecto, solo creará una columna con filas automáticas hacia abajo.

grid-template-columns y grid-template-rows

Definen el número y el tamaño de las columnas y filas. Puedes usar:

● píxeles (px)
● porcentajes (%)
● la unidad exclusiva de grid fr (fracción), que reparte el espacio libre.

.padre {
  /* Crea 3 columnas: la primera de 200px, la segunda toma el doble de espacio que la tercera */
  grid-template-columns: 200px 2fr 1fr; 
  /* Crea 2 filas de 150px de alto cada una */
  grid-template-rows: 150px 150px;
}

Truco repeat(): Para no escribir lo mismo, puedes usar repeat(3, 1fr) que equivale a escribir 1fr 1fr 1fr.

gap (o grid-gap)

Define la separación entre las celdas sin necesidad de usar márgenes.

● row-gap: 10px; (separación entre filas).
● column-gap: 20px; (separación entre columnas).
● gap: 10px 20px; (atajo: primero filas, luego columnas).

place-items

Es el atajo definitivo para alinear el contenido dentro de sus celdas. Acepta valores como center, start, end o stretch.

● place-items: center; (centra de forma vertical y horizontal todo a la vez).

2.Los Elementos (Propiedades de los Hijos)

Por defecto, Grid acomoda un hijo por cada celda en orden. Sin embargo, tú puedes obligar a un elemento a expandirse y ocupar varias celdas. Grid cuenta las divisiones usando líneas de cuadrícula (Grid Lines), empezando desde el número 1.

grid-column y grid-row

grid-column-start / grid-column-endgrid-row-start / grid-row-endEjemplo de atajo:

.hijo-especial {
  /* Empieza en la línea de columna 1 y termina en la línea 3 (ocupa 2 columnas) */
  grid-column: 1 / 3; 
  /* Empieza en la línea de fila 2 y se expande 3 filas usando la palabra 'span' */
  grid-row: 2 / span 3; 
}

grid-template-areas

Es la forma más visual de diseñar una página web. Te permite dibujar con palabras la estructura de tu diseño en el contenedor padre, y luego asignar los elementos a esas palabras.

.sitio-web {
  display: grid;
  grid-template-columns: 250px 1fr; /* Barra lateral y contenido */
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 15px;
}

/* Luego, le asignas el área a cada hijo */
.mi-header  { grid-area: header; }
.mi-sidebar { grid-area: sidebar; }
.mi-main    { grid-area: main; }
.mi-footer  { grid-area: footer; }

Ejemplo estilo Pinterest

Para crear una cuadrícula estilo Pinterest (donde las tarjetas tienen diferentes alturas y se acomodan de forma orgánica), la forma más eficiente y moderna en CSS puro es usar Grid Layout con filas dinámicas.

◆ Código HTML

Estructuramos el contenedor con varias tarjetas. Nota que añadiremos clases como corta, mediana o larga para simular que las imágenes o contenidos tienen diferentes tamaños.

<div class="muro-pinterest">
  <div class="pin corta">
    <div class="contenido-pin">Elemento 1</div>
  </div>
  <div class="pin larga">
    <div class="contenido-pin">Elemento 2</div>
  </div>
  <div class="pin mediana">
    <div class="contenido-pin">Elemento 3</div>
  </div>
  <div class="pin corta">
    <div class="contenido-pin">Elemento 4</div>
  </div>
  <div class="pin mediana">
    <div class="contenido-pin">Elemento 5</div>
  </div>
  <div class="pin larga">
    <div class="contenido-pin">Elemento 6</div>
  </div>
</div>

◆ Código CSS

El truco consiste en crear una cuadrícula con filas muy pequeñas (de 10px por ejemplo) y obligar a cada tarjeta a expandirse o abarcar (span) un número diferente de esas filas según su tamaño.

/* 1. El Contenedor Padre */
.muro-pinterest {
  display: grid;
  /* Crea columnas automáticas de mínimo 250px que llenan la pantalla */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* Crea filas automáticas muy delgadas (10px) para tener control preciso */
  grid-auto-rows: 10px;
  gap: 15px;
  padding: 20px;
}

/* 2. Estilo Base de los Pines (Hijos) */
.pin {
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
}

.contenido-pin {
  padding: 15px;
  background-color: #e74c3c;
  color: white;
  width: 100%;
  border-radius: 16px;
  display: flex;
  align-items: flex-end; /* Pone el texto abajo estilo Pinterest */
}

/* 3. EL TRUCO: Diferentes alturas basadas en filas (span) */
.corta {
  grid-row-end: span 15; /* Ocupa 15 filas de 10px + espacio */
}

.mediana {
  grid-row-end: span 25; /* Ocupa 25 filas de 10px */
}

.larga {
  grid-row-end: span 35; /* Ocupa 35 filas de 10px */
}

/* Variamos los colores solo para el ejemplo visual */
.corta .contenido-pin { background-color: #34495e; }
.mediana .contenido-pin { background-color: #3498db; }
.larga .contenido-pin { background-color: #2ecc71; }

¿Por qué funciona este truco?

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) : Hace que la interfaz sea totalmente responsiva. Si la pantalla es grande, meterá 4 o 5 columnas de pines. Si es un celular, dejará solo 1 o 2, estirándolas para que no queden huecos libres.
grid-auto-rows: 10px junto con grid-row-end: span 15; (opcion .corta): Al dividir el espacio vertical en bloques diminutos de 10px, puedes decidir con exactitud matemática qué tan alta es cada tarjeta sin que rompa la alineación de las tarjetas vecinas.

Dice vertical porque grid-auto-rows y grid-row-end controlan la altura (el eje vertical o de filas) de los elementos. El espacio se mide y se corta de arriba a abajo. grid-auto-rows:10px; crea pistas de fila de 10 píxeles de alto y span 15 hace que la tarjeta mida 15 filas de alto (15 * 10px = 150px). Define el alto de la tarjeta, no su ancho. Por eso se refiere al espacio vertical.

🧠 Unidades de Medida

Las unidades de medida en CSS determinan el tamaño de las fuentes, los espacios, los márgenes y las dimensiones de las cajas. Se dividen estrictamente en dos grupos: Absolutas (medidas fijas) y Relativas (medidas flexibles que se adaptan a otra referencia).

1. Unidades Absolutas

No cambian según el tamaño de la pantalla o del navegador. Tienen exactamente el mismo tamaño físico en cualquier dispositivo.

◆ px (Píxeles): Es la unidad base digital. Un píxel equivale a un punto en la pantalla. Es excelente para bordes delgados o elementos estructurales fijos que no deben estirarse.
◆ cm / mm / in: Centímetros, milímetros y pulgadas. Solo se utilizan de forma real cuando diseñas una hoja de estilos exclusiva para imprimir páginas web en papel (@media print).

2. Unidades Relativas al Texto

Su tamaño se calcula de forma automática con base en el tamaño de la fuente (font-size) configurado en el navegador o en el contenedor del elemento.

em

Toma como referencia el tamaño de fuente del propio elemento o de su padre directo.

● Si el padre tiene font-size: 16px, entonces 2em equivalen a 32px.
● Problema: Se acumulan. Si metes un contenedor con 1.5em dentro de otro contenedor con 1.5em, el texto se irá haciendo cada vez más y más grande de forma descontrolada.

rem (Root EM)

Toma como referencia únicamente la fuente del elemento raíz del documento (la etiqueta ).

● Por defecto, la mayoría de los navegadores web configuran la raíz a 16px. Por lo tanto, 1rem = 16px, 2rem = 32px, 0.5rem = 8px.
● Ventaja: Es la unidad estándar recomendada para textos y márgenes en la actualidad, ya que si el usuario aumenta el zoom o cambia el tamaño de letra de su navegador por accesibilidad, todo tu diseño se adapta perfectamente sin romperse.

3. Unidades Relativas a la Pantalla (Viewport)

Estas unidades se calculan directamente según el tamaño de la ventana del navegador donde el usuario está viendo la web.

vw (Viewport Width)

Representa un porcentaje del ancho total de la pantalla.100vw equivale exactamente al 100% del ancho del navegador.50vw equivale a la mitad de la pantalla horizontal.

vh (Viewport Height)

Representa un porcentaje del alto total de la pantalla.100vh equivale al 100% de la altura de la ventana visual. Se usa constantemente para hacer secciones de portada que cubran la pantalla completa al cargar la página.

vmin y vmax

Eligen automáticamente la medida más pequeña (vmin) o más grande (vmax) entre el ancho y el alto actuales. Son muy útiles para tipografías que deben leerse bien tanto en celulares (vertical) como en monitores (horizontal).

4. El Porcentaje (%)

Es una unidad de medida relativa, pero depende estrictamente del tamaño que tenga su contenedor padre directo. Si una caja mide 400px de ancho y su hijo tiene width: 50%, el hijo medirá exactamente 200px.

🎨 Gradientes

En CSS, los gradientes (o degradados) no son colores planos, sino imágenes generadas por el navegador que transicionan suavemente entre dos o más colores. Se aplican utilizando la propiedad background o background-image.Existen tres tipos principales de gradientes en CSS.

1. Tipos de Gradientes en CSS

linear-gradient() (Gradiente Lineal)

Los colores avanzan en línea recta. Puedes definir la dirección usando palabras clave (to right, to bottom left) o ángulos exactos (90deg, 135deg).

/* Va de arriba a abajo por defecto */
background: linear-gradient(#3498db, #2ecc71);

/* Va de izquierda a derecha en un ángulo de 45 grados */
background: linear-gradient(45deg, #ff007f, #7f00ff);

radial-gradient() (Gradiente Radial)

Los colores se esparcen de forma circular u ovalada desde un punto central (un patrón de “burbuja” o “destello”).

/* El color azul empieza al centro y se desvanece a negro hacia las esquinas */
background: radial-gradient(circle, #3498db, #000000);

conic-gradient() (Gradiente Cónico)

Los colores rotan alrededor de un punto central, similar a las agujas de un reloj o a un gráfico de pastel.

/* Crea un efecto de abanico o pirámide visto desde arriba */
background: conic-gradient(#red, #yellow, #green, #red);

2. Ejemplo: Fondo Oscuro con Efecto de Luz (Reflector)

Para lograr un efecto de “luz de estudio” o un haz de luz brillando sobre una pared oscura, combinamos un radial-gradient (que simula el foco de luz blanca) con un linear-gradient de fondo oscuro.

Puedes superponer varios gradientes separándolos con una coma , (el primero en la lista se dibuja arriba del segundo).

Código HTML

<div class="pantalla-con-luz">
  <div class="contenido">
    <h1>Efecto de Luz</h1>
    <p>Gradientes CSS avanzados</p>
  </div>
</div>

Código CSS

.pantalla-con-luz {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  /* CAPA 1 (Arriba): Un destello radial blanco semi-transparente ubicado arriba al centro (at top) */
  /* CAPA 2 (Abajo): Un degradado lineal que va de un azul marino muy oscuro a negro profundo */
  background: 
    radial-gradient(circle at top, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(to bottom, #111827, #030712);
    
  color: white;
  font-family: sans-serif;
  text-align: center;
}

.contenido h1 {
  font-size: 3rem;
  margin: 0;
  /* Extra: Le da un brillo sutil al texto para que combine con la luz de fondo */
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

¿Por qué funciona este efecto de luz?

circle at top: Le dice al navegador que el centro del círculo no esté en el medio de la pantalla, sino pegado al borde superior.
rgba(255, 255, 255, 0.15): El color blanco tiene una opacidad del 15%. Al llegar al 60% del tamaño del círculo, su opacidad cae a 0 (completamente transparente), dejando ver el fondo oscuro de la Capa 2 de forma extremadamente suave.

Texto con degradado

Hacer que el texto tenga un degradado de colores es un truco visual excelente. En CSS, esto se logra aplicando el degradado al fondo del elemento y luego recortando ese fondo para que solo sea visible a través de las siluetas de las letras.

<h1 class="texto-degradado">Letras de Colores</h1>

.texto-degradado {
  font-family: 'Arial Black', sans-serif; /* Se recomienda una tipografía gruesa */
  font-size: 4rem;
  text-align: center;
  
  /* 1. Definimos el degradado como fondo */
  background: linear-gradient(45deg, #ff007f, #7f00ff, #00f0ff);
  
  /* 2. TRUCO: Recorta el fondo para que solo llene el texto */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* 3. Hace transparente el color original del texto para que se vea el fondo */
  -webkit-text-fill-color: transparent;
  color: transparent; 
}

¿Por qué funciona este truco?

background-clip: text;: Por defecto, un fondo llena todo el cuadro de la caja del elemento. Esta propiedad le ordena al navegador: “Quita el fondo de todos lados, excepto de la forma exacta que tengan las letras”.
-webkit-text-fill-color: transparent;: Si dejas las letras de color negro o blanco, el degradado de abajo no se verá. Al hacer el texto transparente, el fondo recortado brilla a través de él. Usamos el prefijo -webkit- para asegurar que funcione perfectamente en todos los navegadores modernos (Chrome, Safari, Edge, Firefox).

←Teórico HTML5