Clase 14 – Gradientes y patrones

CSS3 permite a los creadores incorporar gradientes y patrones complejos directamente mediante CSS, sin depender exclusivamente de imágenes.

Esta capacidad mejora la carga de la página y abre un abanico de posibilidades creativas para el diseño de fondos, botones, y más.

Gradientes en CSS3

Los gradientes son transiciones suaves entre dos o más colores, que pueden ser lineales o radiales.

Gradientes Lineales:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Ejemplo:

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

Crea un gradiente que va de rosa a naranja, de izquierda a derecha.

Gradientes Radiales:

background: radial-gradient(shape size at position, start-color, ..., last-color);

Ejemplo:

div {
  background: radial-gradient(circle, #ff7e5f, #feb47b);
}

Genera un gradiente radial que va de rosa en el centro a naranja en los bordes.

Patrones en CSS3

Los patrones, aunque no son una característica específica de CSS3 como los gradientes, pueden crearse mediante la repetición de pequeñas imágenes o utilizando técnicas de gradiente para simular patrones complejos.

Patrón de Rayas:

background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

Este código crea un patrón de rayas diagonales alternando dos tonos de azul.

Uso Creativo de Gradientes y Patrones

Gradientes y patrones pueden utilizarse para:

• Fondos de Pantalla: Crear fondos dinámicos y atractivos para secciones o toda la página web.
• Textos con Efectos: Aplicar gradientes a textos para un impacto visual.
• Interfaces de Usuario Estilizadas: Diseñar botones, barras de navegación y otros elementos de UI con un estilo único.

Ejemplo de Texto con Gradiente:

h1 {
  background: -webkit-linear-gradient(left, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent;
}

Aplica un gradiente al texto de un encabezado, mostrando el gradiente a través de las letras.

Los gradientes y patrones en CSS3 ofrecen una potente herramienta para los diseñadores web, permitiendo la creación de diseños visualmente ricos y atractivos sin sacrificar el rendimiento.

Al explorar estas características, los desarrolladores pueden llevar el diseño de sus sitios a nuevos niveles de creatividad y expresión visual.