Aplicar estilos visuales a un header directamente desde un diseño en Figma es una de las tareas más comunes al maquetar una página web. Saber extraer colores, tamaños de fuente y propiedades tipográficas del diseño para traducirlos a CSS marca la diferencia entre un resultado profesional y uno improvisado. A continuación se explica paso a paso cómo agregar un fondo degradado al header, estilizar el H1 y el párrafo, y preparar el terreno para un botón flotante.
¿Cómo aplicar un linear gradient como fondo del header?
El fondo del header en el diseño no es un color sólido, sino un degradado que mezcla dos colores de forma difuminada. En CSS esto se logra con linear gradient [0:12], una función que permite definir una transición suave entre dos o más colores.
Desde Figma, al seleccionar la sección del header, se pueden identificar los colores base del degradado. La herramienta incluso ofrece el código del linear gradient listo para copiar. Al pegarlo en la propiedad background del header, el resultado es inmediato:
- El degradado recibe dos colores separados por coma.
- Se definen los grados de inclinación, que determinan desde qué esquina o dirección comienza la transición.
- Cada color lleva un porcentaje que indica cuánto espacio ocupa dentro del degradado.
En este caso, un porcentaje menor de negro y uno mayor de naranja generan el efecto visual del diseño [1:22].
¿Qué propiedades CSS se usan para estilizar el H1?
Con el fondo listo, el siguiente paso es igualar la tipografía del H1 a lo que muestra Figma. Pero antes de escribir los estilos, se aplica un criterio de especificidad [3:24]: en lugar de seleccionar solo la etiqueta h1, se antepone la clase del header (.header h1). Esto evita conflictos futuros si se integra una librería como Bootstrap que podría sobrescribir estilos genéricos de h1. La especificidad resultante es 0-1-1, más alta que la de una simple etiqueta.
Las propiedades aplicadas al H1 son:
font-size: 2.4rem — equivale a veinticuatro píxeles [4:10].font-weight: bold — le da el aspecto grueso que se ve en el diseño.line-height: 2.6rem — define la altura entre líneas, es decir, la dimensión vertical que ocupa cada renglón de texto [4:30]. Esto permite controlar el espaciado interno del texto sin recurrir a padding.color: var(--just-white) — se reutiliza una variable CSS previamente definida para el color blanco.
El line height [5:10] es una propiedad que muchas veces se pasa por alto, pero resulta fundamental para la legibilidad. Controla la altura de la caja de cada línea de texto y permite ajustar el espacio visual entre renglones.
¿Cómo se estiliza la etiqueta de párrafo del header?
Siguiendo la misma lógica de especificidad, el párrafo se selecciona con .header p. Las propiedades extraídas de Figma son:
margin-top: 25px — separa el párrafo del H1 para que no queden pegados [6:20].font-size: 1.4rem — catorce píxeles.font-weight: 500 — un peso intermedio, ni regular ni bold [6:40].line-height: 1.8rem — dieciocho píxeles de altura de línea.color: var(--soft-orange) — otro color almacenado como variable CSS.
El uso de variables CSS para los colores garantiza consistencia en todo el proyecto y facilita cambios globales con una sola modificación.
¿Qué es un botón flotante y por qué requiere position?
El diseño incluye un botón que no pertenece a ningún contenedor específico, sino que se ubica entre dos secciones. Esto crea la sensación visual de que el botón está flotando [7:40]. Para lograr este efecto en CSS se utiliza la propiedad position, que permite sacar un elemento del flujo normal del documento y colocarlo en coordenadas precisas.
Con el degradado del header, la tipografía del H1 y el párrafo ya igualados al diseño de Figma, el siguiente reto es dar forma a ese botón flotante. ¿Has trabajado antes con position: absolute o position: relative para ubicar elementos entre secciones? Comparte tu experiencia.
