Estilos de Gradientes y Fuentes en CSS para Headers

Clase 10 de 32 • Curso de Responsive Design: Maquetación Mobile First

Clase anteriorSiguiente clase

Resumen

Luego de implementar el BEM, es momento de aplicar los estilos restantes al header de nuestro proyecto, como son el degradado en el background, las etiquetas h1 y p.

Cómo dar estilos al fondo

Vamos al prototipo del proyecto en Figma. Si hacemos clic sobre el fondo observamos los colores que tiene. En la sección de código css encontramos un linear-gradient con la información que necesitamos. Lo copiamos y lo agregamos dentro de los estilos del header.

background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
estilos al fondo

El código nos muestra el pocentaje de color que le da a cada uno. 16.69% al negro hasta un 100% de naranja. Al renderizarlo en el navegador vemos que el naranja ocupa un mayor espacio que el negro, posicionándose cada uno en esquinas opuestas.

Nota: Si quieres crear degradados de manera sencilla, te recomiendo usar CSS Gradient. Es muy sencillo e intuitivo de usar.

Cómo dar estilos al título

  • Revisamos los estilos del título principal en el prototipo, no con la intención de copiarlos, sino solo tomar detalles como el tamaño y grosor del texto.
image.png
  • Llamamos la etiqueta h1 usando el nombre de la clase contenedora .header–title-container. Y sí, podríamos llamar solo la etiqueta h1, después de todo sólo debe existir una en todo el documento, ¿verdad? Es así, sin embargo, ser específicos es parte de las buenas prácticas. Cuando avances más usarás librerías como Bootstrap que pueden traer consigo estilos para ciertas etiquetas. Siendo específicos los estilos que apliquemos no se verán afectados por estas. Ya sabes, siempre trata de ser específico.
  • Ajustamos el tamaño de fuente con font-size: 2.4rem (24px) y el ancho con font-weight: bold.
  • Ajustamos la dimensión entre líneas o interlineado con line-height: 2.6rem.
  • Cambiamos su color con la variable correspondiente, ***color: var(–just-white)***.
.header--title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

Cómo dar estilos al párrafo

  • Llamamos nuestra etiqueta de párrafo desde la clase contenedora .header–title-container.
image.png
  • Añadimos un margen superior para separarla un poco del título con margin-top: 25px.
  • Ajustamos el tamaño con font-size: 1.4rem y su grosor con font-weight: 500.
  • Le damos un interlineado con line-height 1.8rem.
  • Cambiamos el color de fuente con la variable correspondiente, ***color: var(–soft-orange)***.
.header--title-container p {
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange)
}

En el navegador deberíamos poder ver este resultado:
image.png

¡Se ve mucho mejor! Continuemos con la última parte del header, el botón flotante.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).