Degradados lineales
Los degradados en CSS3 permiten realizar transiciones suaves entre dos o más colores.
CSS3 define dos tipos de degradados:
- Degradados lineales (linear-gradient): definen una transición entre dos puntos
- Degradados radiales (radial-gradient): definen una transición a partir de un punto central
A lo largo de este artículo veremos las diferentes opciones que tenemos para definir degradados lineales.
Soporte en navegadores
Todos los navegadores principales soportan degradados.En la siguiente tabla podemos ver las diferentes propiedades que define CSS3 para la definición de degradados y a partir de qué versión de los diferentes navegadores están soportadas.
Los números de versiones seguidos de un prefijo (-webkit-, -moz-, -o-) indican la primera versión en la que estaba soportada la propiedad con prefijo.
| Propiedad | Internet Explorer | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
Degradados lineales
Para definir un degradado lineal debe definirse la dirección del degradado y dos o más "paradas de color" (o color stops) con los colores entre los que se realizará la transición.La sintaxis para definir un degradado como fondo es:
background: linear-gradient(dirección, parada-color-1, parada-color-2, ...)
Degradado por defecto: de arriba a abajo
Si se omite la dirección se utiliza por defecto la dirección de arriba a abajo.
El siguiente ejemplo establece un degradado de arriba a abajo que pasa del color rojo al verde.
<style> .lineargradient { width: 80%; margin-left: 10%; padding: 4px; min-height: 100px; background: -moz-linear-gradient(red, green); background: -o-linear-gradient(red, green); background: -webkit-linear-gradient(red, green); background: linear-gradient(red, green); } </style> <div class="lineargradient"></div>
Degradado horizontal
Para especificar una dirección diferente debe especificarse como primer parámetro de linear-gradient. En este caso existe una diferencia entre la versión estándar y las prefijadas. Mientras que en las versiones prefijadas se indica el punto de origen de la transición, en la versión estándar se indica el punto destino precedido de la palabra clave to.
Por ejemplo para definir el degradado anterior de izquierda a derecha:
<style> .horizontalgradient { width: 80%; margin-left: 10%; padding: 4px; min-height: 100px; background: -moz-linear-gradient(left, red, green); background: -o-linear-gradient(left, red, green); background: -webkit-linear-gradient(left, red, green); background: linear-gradient(to right, red, green); } </style> <div class="horizontalgradient"></div>
Degradado diagonal
También se pueden definir degradados diagonales especificando la posición horizontal y vertical de destino (o de origen en el caso de las versiones prefijadas).
En el siguiente ejemplo establezco un degradado desde la posición superior izquierda hacia la posición inferior derecha.
<style> .diagonalgradient { width: 80%; margin-left: 10%; padding: 4px; min-height: 100px; background: -moz-linear-gradient(left top, red, green); background: -o-linear-gradient(top left, red, green); background: -webkit-linear-gradient(top left, red, green); background: linear-gradient(to bottom right, red, green); } </style> <div class="diagonalgradient"></div>
Otras direcciones
Para indicar otras direcciones diferentes podemos indicar el ángulo de inclinación del degradado en grados.
0 grados de inclinación equivale a un degradado de abajo hacia arriba. A partir de ahí los grados indican el ángulo respecto a esta línea vertical en la dirección de las agujas del reloj. Así 90 grados de inclinación equivalen a un degradado de izquierda a derecha, 180 grados a uno de arriba a abajo y 270 grados (que también puede indicarse como -90 grados) a uno de derecha a izquierda.
<style> .anglegradient { width: 80%; margin-left: 10%; padding: 4px; min-height: 100px; background: -moz-linear-gradient(-90deg, red, green); background: -o-linear-gradient(-90deg, red, green); background: -webkit-linear-gradient(-90deg, red, green); background: linear-gradient(-90deg, red, green); } </style> <div class="anglegradient"></div>
Múltiples paradas de color
No tenemos porqué limitarnos a dos colores en la definición del degradado (aunque éste es el número mínimo), podemos indicar tantos colores como queramos.
Por ejemplo podemos crear un degradado como el de la cabecera del artículo indicando de manera consecutiva los colores azul, rojo, amarillo, azul, verde y rojo.
<style> .multicolorgradient { width: 80%; margin-left: 10%; padding: 4px; min-height: 100px; background: -moz-linear-gradient(left, blue, red, yellow, blue, green, red); background: -o-linear-gradient(left, blue, red, yellow, blue, green, red); background: -webkit-linear-gradient(left, blue, red, yellow, blue, green, red); background: linear-gradient(to right, blue, red, yellow, blue, green, red); } </style> <div class="multicolorgradient"></div>
Por defecto los colores se distribuyen a intervalos regulares a lo largo del ancho del elemento, pero podemos indicar la posición de cada color a través de un porcentaje.
<style> .percentgradient { width: 80%; margin-left: 10%; padding: 4px; min-height: 100px; background: -moz-linear-gradient(left, blue 0, red 10%, yellow 20%, blue 30%, green 40%, red 100%); background: -o-linear-gradient(left, blue 0, red 10%, yellow 20%, blue 30%, green 40%, red 100%); background: -webkit-linear-gradient(left, blue 0, red 10%, yellow 20%, blue 30%, green 40%, red 100%); background: linear-gradient(to right, blue 0, red 10%, yellow 20%, blue 30%, green 40%, red 100%); } </style> <div class="percentgradient"></div>
Usando Transparencia
También podemos utilizar colores con transparencia en la definición de los degradados a través de la función rgba.
La función rgba define un color especificando los valores para los componentes de rojo(r), verde(g) y azul(b), y admite un cuarto parámetro para indicar el grado de transparencia a través de un valor entre 0 (completamente transparente) y 1 (nada transparente).
<style> .transparentgradient { width: 80%; margin-left: 10%; padding: 4px; min-height: 100px; background: -moz-linear-gradient(left, rgba(204,17,24,1), rgba(204,17,24,0), rgba(204,17,24,1)); background: -o-linear-gradient(left, rgba(204,17,24,1), rgba(204,17,24,0), rgba(204,17,24,1)); background: -webkit-linear-gradient(left, rgba(204,17,24,1), rgba(204,17,24,0), rgba(204,17,24,1)); background: linear-gradient(to right, rgba(204,17,24,1), rgba(204,17,24,0), rgba(204,17,24,1)); } </style> <div class="transparentgradient"></div>
Repetición de degradados
También podemos definir patrones de degradados que se repitan a lo largo de la longitud del elemento a través de la función repeating-linear-gradient.
<style> .repeatinggradient { width: 80%; margin-left: 10%; padding: 4px; min-height: 100px; background: -moz-repeating-linear-gradient(left , rgba(204,17,24,1) 10%, rgba(204,17,24,0) 20%, rgba(204,17,24,1) 30%); background: -o-repeating-linear-gradient(left , rgba(204,17,24,1) 10%, rgba(204,17,24,0) 20%, rgba(204,17,24,1) 30%); background: -webkit-repeating-linear-gradient(left , rgba(204,17,24,1) 10%, rgba(204,17,24,0) 20%, rgba(204,17,24,1) 30%); background: repeating-linear-gradient(to right , rgba(204,17,24,1) 10%, rgba(204,17,24,0) 20%, rgba(204,17,24,1) 30%); } </style> <div class="repeatinggradient"></div>
No hay comentarios:
Publicar un comentario