Diseño Web – Gradiente con CSS 3

En esta ocasión explicare cómo crear degradados de color lineales y radiales (gradients en inglés) en CSS, con lo que podemos crear efectos muy agradables. Se utilizan en todas partes, en la que podemos especificar una url(). En los siguientes ejemplos vamos a utilizar el degradado de color como un fondo en vez de usar una Imágen.

Los Siguientes Navegadores soportan degradados de color en CSS 3:

  • Firefox
  • Safari
  • Opera
  • Chrome
  • IE a partir de la versión 10

Sintaxis

Hay que diferenciar entre dos formas de degradado:

  • Lineal: Degradado en forma recta de dos o más colores.
  • Radial: Degradado en forma circular con dos o más colores.

Primeramente, un degradado linear con dos colores:

.gradient {
  background-image:
    linear-gradient(
      #ffffff, #blue
    );
}

Captura  (El Logo de Firefox es sólo un ejemplo de cómo se podría diseñar un fondo.

Los argumentos para crear un gradiente son lineal o radial. Firefox tiene 2 funciones separadas para mostrar est efecto.  Safari  y  Chrome utilizan una función para ambos tipos. Luego siguen el punto inicial y final, y así la dirección del del degradado. Por último, los códigos de color para el inicio y el final son necesarios.

[the_ad id=»4531″]

Degradado Radial

.gradient {
  background-image:
    radial-gradient(
      circle at center,
      #ffffff, blue
    );
}

Captura2

Para obtener un gradiente radial, se procede exactamente como antes. Es fácil: el punto de partida (center, top right, bottom, etc…), el color inicial, color final.

Jens Wagner

Fundador de Fosforito.Net y aficionado de las tecnologías de información, del viajar y cocinar. Trabaja en la IT y mantiene éste blog actualizado desde 2012.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio está protegido por reCAPTCHA y se aplican la política de privacidad y los términos de servicio de Google.