CSS: Estilización de texto y fondo

En el ámbito del diseño web, la estilización de texto y fondo con CSS 3 permite crear interfaces visuales atractivas y funcionales. A través de diversas propiedades, CSS 3 ofrece una amplia gama de opciones para personalizar la apariencia de texto y fondos en tus proyectos.

Estilización de texto

Tipografía

Para definir la tipografía, se utilizan propiedades como font-family, font-size, font-weight y font-style. A continuación, un ejemplo de cómo aplicar estas propiedades:

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
}

Alineación y espaciado

Las propiedades text-align, line-height y letter-spacing permiten controlar la alineación y el espaciado del texto:

p {
  text-align: justify;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

Decoración y transformación

Para decorar y transformar el texto, se utilizan text-decoration y text-transform:

h1 {
  text-decoration: underline;
  text-transform: uppercase;
}

Sombra de texto

La propiedad text-shadow agrega sombras al texto, mejorando su visibilidad y estética:

h2 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

Estilización de fondo

Colores y degradados

La propiedad background-color define el color de fondo, mientras que background-image permite agregar imágenes de fondo. Para añadir degradados, se utiliza linear-gradient:

body {
  background-color: #f0f0f0;
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

Imágenes de fondo

Las propiedades background-size, background-repeat y background-position controlan la apariencia de las imágenes de fondo:

header {
  background-image: url('header-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Múltiples fondos

CSS 3 permite aplicar múltiples fondos a un solo elemento, especificándolos separados por comas:

section {
  background-image: url('pattern.png'), linear-gradient(to bottom, #ffffff, #e0e0e0);
  background-blend-mode: overlay;
}

Sombra de fondo

La propiedad box-shadow añade sombras a los elementos, enriqueciendo su profundidad visual:

div.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Resumen de propiedades

A continuación, un resumen de las propiedades más relevantes para la estilización de texto y fondo en CSS 3:

• Texto: font-family, font-size, font-weight, font-style, text-align, line-height, letter-spacing, text-decoration, text-transform, text-shadow.
• Fondo: background-color, background-image, background-size, background-repeat, background-position, background-blend-mode, box-shadow.