Degradados y fondos en CSS3

En esta lección aprenderemos a poner fondos con degradado mediante CSS3, ahora es posible aplicar degradado al fondo de contenedores y muchos elementos de HTML; los degradados le dan un toque más allá de un simple color sólido y en esta entrada aprenderás todo sobre esta característica, aprenderás los tipos de degradado y cómo aplicarlos, además aprenderemos a controlar los colores, las paradas de color, las orientaciones del degradado y mucho más; así que ponte cómodo que ¡Empezamos!

Qué es un degradado en CSS

Se trata de un rango de colores dispuestos en forma, pueden ser lineales, radiales u otra forma, de tal manera que el efecto es una transición suave entre colores distintos, es decir poco a poco de un color a otro, en un degradado puede haber varias transiciones, entre sus principales características podemos mencionar, los colores implicados y la forma de degradado.

Cómo poner fondos degradados en CSS

Ya sabemos que es posible establecer colores degradados mediante código CSS3 para ponerla al fondo de algún elemento deseado. Poner un degradado de fondo es tan simple como establecer la propiedad background que ya conocemos y seguidamente indicar el degradado en su valor.

El degradado se establece de manera simple, establecemos la función linear-gradient(); para degradados lineales y radial-gradient(); para degradados radiales y dentro de los paréntesis estableceremos los colores deseados, las paradas de color, la dirección, etc. esto y mucho más aprenderemos a continuación con ejemplos reales y concretos. ¡Seguimos!

Degradados lineales

Para crear un degrado lineal con CSS haremos uso de linear-gradient(); Un degradado lineal es un tipo de degradado en el que los colores cambian en forma lineal, a partir de una posición hacia una dirección recta, por ejemplo un degradado básico puede generarse desde el lado derecho de un elemento e ir hacia el izquierdo; otra sería de arriba hacia abajo, o de una esquina hacia otra, viceversa o en cualquier sentido, pero deben seguir una línea. Observa las imágenes a continuación:

Ahora vamos al centro de nuestro asunto, cómo crear fondos con degradados lineales en CSS3, empezamos; para ello debemos saber más cositas.

Te recomendamos leer:  Imágenes de fondo con CSS3 background-size

Los colores

Un degradado está formado por dos o más colores, especificar dichos colores es tan simple como escribirlas dentro de los paréntesis, separando cada color con comas. Por ejemplo: linear-gradient(red, yellow, blue, green);

<div class="lineal"></div>
<style>
  .lineal {
    width: 250px;
    height:200px;
    background: linear-gradient(red, yellow, blue, green);  
  }
</style>

Parada de colores

También podemos establecer cuanto abarca cada color, podemos indicar mediante porcentajes y también mediante longitudes con unidades como px, em, etc. si no especificamos, los colores abarcarán valores proporcionales. Por ejemplo: linear-gradient(red 70%, yellow); esto hará que el rojo abarque hasta el 70%, luego degradarse en lo que resta hacia el amarillo.

<div class="lineal"></div>
<style>
  .lineal {
    width: 250px;
    height:200px;
    background: linear-gradient(red 70%, yellow);  
  }
</style>

Dirección

Por defecto, el degradado se realiza de arriba hacia abajo, pero podemos controlar la dirección del degradado mediante palabras clave y también mediante un ángulo específico. Veamos cómo podemos especificar dichos valores de dirección.

Palabras clave:

  • Left: el degradado se genera de izquierda a derecha, por ejemplo: linear-gradient(left, blue, yellow);
  • Right.- el degradado se genera de derecha a izquierda, por ejemplo: linear-gradient(right, blue, yellow);
  • Top: hará que el degrado se genere de arriba hacia abajo. Ejemplo: linear-gradient(top, blue, yellow);
  • Bottom: hace que el degradado se genere de abajo hacia arriba. Ejemplo: linear-gradient(bottom, blue, yellow);

Ejemplo de degrado lineal CSS

En el siguiente ejemplo hacemos uso de la dirección left, para asegurar que funcione en las versiones de navegadores le agregaremos un prefijo -webkit-.

<div class="lineal"></div>
<style>
  .lineal {
    width: 250px;
    height:200px;
    border: solid 1px blue;
    background: -webkit-linear-gradient(left, red, yellow, blue);  
  }
</style>

Por otro lado, es posible realizar combinaciones para especificar en qué dirección se realiza el degradado; por ejemplo, a continuación veamos las posibles combinaciones:

  • bottom left .- Degradado desde la esquina inferior izquierda.
  • top left.- Degradado desde la esquina superior izquierda.
  • bottom right.- Degradado desde la esquina inferior derecha.
  • top right.- Degradado desde la esquina superior izquierda.

Ejemplo de dirección de degradado

<div class="lineal"></div>
<style>
  .lineal {
    width: 200px;
    height:200px;
    border: solid 1px blue;
    background: -webkit-linear-gradient(bottom right, red, yellow, blue);  
  }
</style>

Ángulos

Para ser exactos, podemos especificar un ángulo que determine la dirección del degradado. El ángulo parte desde el eje horizontal, por lo tanto 0deg es un degradado horizontal de izquierda a derecha, mientras tanto un ángulo de 90deg crea un degradado vertical de abajo hacia arriba.

<div class="lineal"></div>
<style>
  .lineal {
    width: 350px;
    height:150px;
    border: solid 1px black;
    background: -webkit-linear-gradient(70deg, red, yellow, blue);  
  }
</style>

 Repetición

Es posible establecer la repetición de un determinado degradado, para ello haremos uso de la función repeating-linear-gradient(); es decir simplemente agregamos la palabra repeating antes del degradado.

<div class="lineal"></div>
<style>
  .lineal {
    width: 300px;
    height:150px;
    border: solid 1px black;
    background: -webkit-repeating-linear-gradient(left, red 100px, yellow 200px);  
  }
</style>

Degradados radiales

Para crear un degradado radial utilizaremos la función radial-gradient(); y dentro de los paréntesis indicaremos las características que deseamos, ya las veremos en adelante. Los degradados radiales son aquellos que parten de un centro y se extienden en dirección radial, es decir en todas direcciones.

Te recomendamos leer:  Transiciones en CSS3

Es posible crear degradados circulares y en forma elíptica, a continuación aprenderemos las funciones que utilizamos y los valores que hacen posible recrear un degradado radial.

Forma del degradado radial

Podemos crear formas circulares y elípticas de degradado radial, para crear un degradado con forma elíptica, no es necesario especificar nada, pues es la forma por defecto; en cambio para crear un degradado circular, debemos utilizar la palabra circle antes de establecer cualquier otra característica dentro de los paréntesis.

Colores

Los colores del degradado se especifican separándolos con comas, pero después de establecer la forma del degradado radial en caso sea necesario, es decir, si se desea una forma elíptica ya sabemos que es por defecto, entonces directamente pasamos a establecer los colores separándolos por comas. Por ejemplo: radial-gradient(red, yellow, blue);

<div class="radial"></div>
<style>
  .radial {
    width: 350px;
    height:200px;
    border: solid 1px black;
    background: radial-gradient(red, yellow, blue, green);  
  }
</style>

Si queremos un degradado circular, empezaremos estableciendo el valor circle y seguidamente estableceremos los colores deseados, igualmente, separándolos con comas. Por ejemplo: radial-gradient(circle, red, yellow, blue);

<div class="circulo"></div>
<style>
  .circulo {
    width: 350px;
    height:200px;
    border: solid 1px black;
    background: radial-gradient(circle, red, yellow, blue, green);  
  }
</style>

Junto a cada color, también podemos establecer los espacios abarcados por cada color, ya sea expresándolos con porcentajes o medidas de longitud, por ejemplo px, em, etc.

<div class="radial"></div>
<style>
  .radial {
    width: 350px;
    height:200px;
    border: solid 1px black;
    background: radial-gradient(red 10%, yellow 40%, blue 60%);  
  }
</style>

Posición  del degradado

La posición del degradado está definida por la posición del centro del degradado, dicho centro puede ser ubicado donde queremos, para este fin podemos hacer uso de palabras clave que establezcan dicha posición, o podemos hacer uso de valores porcentuales, veamos cómo.

Te recomendamos leer:  Border-radius: Esquinas redondeadas con CSS3

Palabras clave

Para desplazar el centro del degradado horizontalmente, es decir a lo largo del eje X, podemos hacer uso de las palabras clave: left (izquierda), center (centro), right (derecha).

Para desplazar la posición del centro verticalmente, es decir a lo largo del eje Y podemos emplear las siguientes palabras clave: top (arriba), center (centro), bottom (abajo).

El valor por defecto es el center, tanto horizontal como verticalmente, por ende si no establecemos la posición, por defecto el degradado se genera a partir del centro del elemento.

<div class="radial"></div>
<style>
  .radial {
    width: 350px;
    height:200px;
    border: solid 1px black;
    background: -webkit-radial-gradient(bottom, red 10%, yellow 40%, blue 60%);  
  }
</style>

También se pueden emplear combinaciones como:

  • bottom left .- Origen en la esquina inferior izquierda.
  • top left.- Se origina en la esquina superior izquierda.
  • bottom right.- Degradado con centro en esquina inferior derecha.
  • top right.- Degradado con centro en la esquina superior izquierda.

Ejemplo

<div class="radial"></div>
<style>
  .radial {
    width: 350px;
    height:200px;
    border: solid 1px black;
    background: -webkit-radial-gradient(bottom right, red 10%, yellow 40%, blue 60%);  
  }
</style>

Valores porcentuales

Podemos posicionar el degradado radial mediante valores porcentuales, nos permite tener un control más preciso de la ubicación del centro del degradado; los valores pueden ir entre el 0% y 100%, tanto en el eje horizontal como en el eje vertical.

Con respecto al eje horizontal, 0% es lo mismo que left (izquierda) y 100%  equivale a right (derecha), el center (centro) es lo mismo que 50%.

Con respecto al eje vertical, 0 %  es lo mismo que top (arriba), en tanto 100% es lo mismo que bottom (abajo) y center (centro) es igual al 50%. Cabe señalar que también es posible poner valores negativos, harán que el degradado tenga el centro fuera del elemento.

Por ejemplo

<div class="radial"></div>
<style>
  .radial {
    width: 350px;
    height:200px;
    border: solid 1px black;
    background: -webkit-radial-gradient(-30% 70%, red 10%, yellow 40%, blue 60%);  
  }
</style>

Podemos decir que el valor por defecto si no se especifica la posición del degradado será 50%, tanto horizontal y verticalmente, básicamente es el centro del elemento en cuestión.

[popup_anything id=»5821″]

Rate this post

Deja un comentario

Desarrolladores web