You are here
Degradados con CSS 3 Sin categoría 

Degradados con CSS 3

Degradados con CSS 3

 

Presentación de las características de los degradados con CSS3, que permiten hacer todo tipo de gradientes sin necesidad de usar imágenes.

 

Los degradados son uno de los recursos que utilizan los diseñadores para decorar las webs y la verdad es que dan mucho juego para mejorar el aspecto de la página. No obstante, hasta la llegada de CSS 3, también tenían una desventaja importante, ya que para implementarlos necesitábamos usar imágenes como fondo de los elementos. Ello tiene algunas desventajas, como una mayor carga de peso en la página y la necesidad de fabricar los archivos gráficos con un programa de diseño, con la molestia adicional que necesitaríamos usar de nuevo el programa de diseño gráfico, para producir una nueva imagen, en el momento que queramos retocar el degradado.

 

Degradados lineares:
En los que se crea un gradiente que va de un color a otro de manera lineal. Puede ser de arriba a abajo, de izquierda a derecha y viceversa. Incluso se puede conseguir un degradado en un gradiente de una línea con cualquier ángulo.

Los degradados lineares se consiguen con el atributo background asignándole el gradiente con la propiedad “linear-gradient” de CSS 3. Un ejemplo puede verse a continuación:

 

div{
height: 130px;
width: 630px;
background: -webkit-linear-gradient(orange, pink);
background: -moz-linear-gradient(orange, pink);
background: -o-linear-gradient(orange, pink);
}

 

 

Degradados circulares:
En ellos se implementa un gradiente que se distribuye radialmente, desde un punto del elemento hacia fuera, de manera circular, que puede tener el mismo valor de radio (para hacer degradados en círculos perfectos) o con valores de radio variables (lo que generaría elipses).

 

El valor que asignamos a background en este caso será por medio del atributo “radial-gradient”, además de toda la serie de parámetros necesarios para definir el degradado según nuestras intenciones.

 

div.circular{
background: -webkit-radial-gradient(#0f0, #06f);
background: -moz-radial-gradient(#0f0, #06f);
border: 1px solid #333;
height: 200px;
width: 250px;
}

 

 

Degradado lineal, linear-gradient de CSS3

 

Explicación detallada de los degradados lineales de CSS3 que conseguimos con la propiedad linear-gradient. Crear degradados de colores, que se distribuyen en un gradiente lineal.

 

El degradado de colores más sencillo que podemos crear es el degradado lineal. Con CSS 3 se pueden especificar con tan solo definir una serie de parámetros en la propiedad linear-gradient, que nos permiten configurar todo tipo de gradientes de dos o más colores, sin la necesidad de usar imágenes.

 

Sintaxis de creación de degradados lineales

 

background: linear-gradient(parámetros);

 

O bien

background-image: linear-gradient(parámetros);

Como vemos, para asignar un degradado a un elemento, tenemos que utilizar la propiedad linear-gradient sobre un atributo background, o background-image. Todos los elementos que soportan imágenes de fondo permiten también colocar degradados de fondo. Además, tendremos que indicar una serie de parámetros variables para la creación del degradado, que son los que realmente tienen alguna dificultad de entender. Estos parámetros son los siguientes:

  1. A) Origen-y/o-angulo del degradado:
    El primer parámetro sería el origen desde donde comenzará el degradado y/o el ángulo de disposición del gradiente de color. Podemos decir que el degradado comience desde arriba, abajo o desde una esquina cualquiera. Por defecto los degradados serán distribuidos en un gradiente en línea recta, pero además podemos indicar un ángulo distinto con el que se vaya produciendo el gradiente de color.
  2. B) lista-de-colores y opcionalmente, el lugar hasta donde se debe mostrar cada uno:
    Luego colocaremos los colores, todos los que queramos, que deben utilizarse en el degradado, separados por comas. Además, si lo deseamos, podemos definir las paradas de color “color stops”, que consiste en declarar el lugar desde donde debe empezar el gradiente del color.

background: linear-gradient(orange, pink);

Esto hace un degradado desde el color naranja hacia el rosa. Todos los demás parámetros quedarían con sus valores predeterminados y el resultado sería que el degradado se realiza en toda la altura del elemento, de arriba a abajo, en un gradiente vertical, comenzando el naranja en la parte de arriba y acabando en rosa en la parte de abajo.

background: linear-gradient(top left, #fff, #f66);

Este degradado comienza en la esquita superior izquierda y se crea un gradiente que va hacia la esquina opuesta. Por tanto, el degradado formará un gradiente oblicuo, en diagonal desde la esquina superior izquierda, donde estaría el blanco (#fff), hasta la esquina inferior derecha, donde estaría el rosa (#f66).

background: -webkit-linear-gradient(180deg, #f0f, #f66);

Este degradado define su dirección por medio de un ángulo expresado en grados. 0 grados haría que el degradado comenzara en la parte de la izquierda y 180deg indica que el degradado empezaría justo por el lado contrario, es decir, por la derecha. De modo que en la parte de la derecha tendríamos el color morado y en la izquierda tendríamos el rosado.

background: linear-gradient(#00f 50%, #000);

Este degradado tiene lo que se llama un “color stop” es decir, una parada de color, que está asignada con el 50% en el primer color. Quiere decir que el primer color estaría homogeneo (sin degradado) hasta el 50% del tamaño del elemento y que luego comenzaría a degradarse hacia el segundo color.

background: linear-gradient(45deg, #66f, #f80, #ffc);

Este degradado tiene una disposición en diagonal, por los 45 grados que se han definido. Además, podemos ver que hemos definido más de dos colores en el degradado. Podemos poner tantos como queramos, separados por comas. Como no hay “color stops” los tres colores se distribuyen de manera equitativa, desde la esquina inferior izquierda hasta la superior derecha.

background: linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);

Este degradado se hace también en diagonal, desde la esquina inferior izquierda, igual que el anterior, pero hemos definido una serie de paradas de color (color stops), con lo cual la distribución del gradiente no es homogénea. El primer color empezaría a degradarse hacia el segundo cuando se llega al 10% del tamaño del elemento. El degradado hacia el segundo color se completaría al llegar al 30% y a partir de ese punto empezaría a degradarse hacia el tercer color. El degradado entre el segundo y tercer color se realizaría desde el 30% al 60% del tamaño del elemento y se completaría cuando estamos en el 60%. A partir de ese último color stop (60%) tendríamos el último color de manera homogénea hasta el 100% del tamaño. Por tanto, el color predominante veremos que es el tercero, que tiene un 40% (100% del elemento – 60% del espacio donde veremos degradados) del espacio para mostrarse con su RGB tal cual fue definido.

background: linear-gradient(45deg, #66f 160px, #f80 180px, #ffc);

Este es el mismo degradado que el anterior, pero con paradas de color distintas. Además, estamos definiendo esos “color stops” con medidas en píxeles en lugar de porcentajes.

Nota: se aconseja no mezclar unidades CSS distintas en las paradas de color, como podría ser:

background: linear-gradient(left, #66f 60%, #f80 50px)

Porque en ese caso, dependiendo del anchura del elemento, la segunda parada de color, con 50px, podría estar en un punto anterior al 60% de su tamaño, lo que podría provocar que la distribución del gradiente de color fuera imposible de realizar.

background: linear-gradient(left, #f00, #f80, #ff0, #0f0, #00f, #60f, #c0f);

Este degradado, que empieza en la izquierda y con un gradiente recto hacia la derecha, tiene varios colores, los del arcoiris.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts