Degradados CSS | Programar Plus

Así como puede declarar que el fondo de un elemento es un color sólido en CSS, también puede declarar que el fondo es un degradado. Usar degradados declarados en CSS, en lugar de usar un archivo de imagen real, es mejor para el control y el rendimiento.

Los degradados suelen ser de un color que se desvanece en otro, pero en CSS puede controlar todos los aspectos de cómo sucede eso, desde la dirección hasta los colores (tantos como desee) hasta el lugar donde ocurren esos cambios de color. Repasemos todo.

Los degradados son imagen de fondo

Al declarar los usos de un color sólido background-color propiedad en CSS, los degradados usan background-image. Esto resulta útil de varias formas que veremos más adelante. La taquigrafía background La propiedad sabrá lo que quiere decir si declara uno u otro.

.gradient {

  /* can be treated like a fallback */
  background-color: red;

  /* will be "on top", if browser supports it */
  background-image: linear-gradient(red, orange);

  /* these will reset other properties, like background-position, but it does know what you mean */
  background: red;
  background: linear-gradient(red, orange);

}

Gradiente lineal

Quizás el tipo de gradiente más común y útil es el linear-gradient(). El “eje” de los degradados puede ir de izquierda a derecha, de arriba a abajo o en cualquier ángulo que elija.

No declarar un ángulo supondrá de arriba a abajo:

Esos colores separados por comas pueden ser el tipo de color que usa normalmente: Hex, colores con nombre, rgba, hsla, etc.

Para hacerlo de izquierda a derecha, pasa un parámetro adicional al comienzo de la linear-gradient() función que comienza con la palabra “a”, indicando la dirección, como “a la derecha”:

Esta sintaxis “a” también funciona para las esquinas. Por ejemplo, si desea que el eje del degradado comience en la esquina inferior izquierda y vaya a la esquina superior derecha, podría decir “hacia arriba a la derecha”:

Si esa caja fuera cuadrada, el ángulo de ese gradiente habría sido de 45 °, pero como no lo es, no lo es. Si desea asegurarse de que sea de 45 °, puede declarar que:

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      red, #f06d06
    );
}

Tampoco estás limitado a solo dos colores. De hecho, puede tener tantos colores separados por comas como desee. Aquí hay cuatro:

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

También puede declarar dónde desea que “comience” cualquier color en particular. Esos se denominan “paradas de color”. Supongamos que desea que el amarillo ocupe la mayor parte del espacio, pero el rojo solo un poco al principio, podría hacer que el amarillo color-stop bastante temprano:

Tendemos a pensar en los degradados como colores que se desvanecen, pero si tiene dos paradas de color iguales, puede hacer que un color sólido cambie instantáneamente a otro color sólido. Esto puede resultar útil para declarar un fondo de altura completa que simula columnas.

Compatibilidad con navegador / Prefijos

Hasta ahora solo hemos examinado la nueva sintaxis, pero los degradados CSS han existido durante bastante tiempo. El soporte del navegador es bueno. Donde se vuelve complicado es la sintaxis y los prefijos. Existen Tres diferentes sintaxis compatibles con los navegadores. Así no es como se llaman oficialmente, pero puedes pensar en ello como:

  1. Viejo: forma original de WebKit, con cosas como from () y color-stop ()
  2. Tweener: sistema de ángulo antiguo, por ejemplo, “izquierda”
  3. Nuevo: nuevo sistema de ángulos, por ejemplo, “a la derecha”

Y luego prefijar también.

Probemos con un gráfico:

Cromo 1-9: antiguo, con prefijo
10-25: Tweener, prefijo
26: Nuevo, sin prefijo
Safari 3-: Sin soporte
4-5.0: antiguo, con prefijo
5.1-6.0: Tweener, prefijado
6.1: Nuevo, sin prefijo
Firefox 3.5-: Sin soporte
3.6-15: Tweener, prefijado
16: nuevo, sin prefijo
Ópera 11.0-: Sin soporte
11.1-11.5: Tweener, prefijado, solo lineal
11.6-12: Tweener, prefijado, radial agregado
12.1: Tweener, sin prefijo
15: nuevo, sin prefijo
ES DECIR 8-: Sin soporte
9: solo filtros
10+: nuevo, sin prefijo (también es compatible con Tweener con prefijo)
Androide 2.0-: Sin soporte
2.1-3.0: Tweener, prefijado
4.0-4.3: Nuevo, con prefijo
4.4+: Nuevo, sin prefijo
iOS 3-: Sin soporte
3.2-4.3: Tweener, prefijado
5.0-6.1: Nuevo, con prefijo
7.0: nuevo, sin prefijo

Hay algo de superposición ahí. Por ejemplo, cuando un navegador admite la sintaxis nueva, probablemente también admitan las sintaxis más antiguas, incluido el prefijo. La mejor práctica es: si admite Nuevo, use Nuevo.

Por lo tanto, si desea obtener la compatibilidad con el navegador más profunda posible, un degradado lineal podría verse así:

.gradient {
  
  /* Fallback (could use .jpg/.png alternatively) */
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(left, red, #f06d06);

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(left, red, #f06d06);

  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(left, red, #f06d06);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to right, red, #f06d06);

}

Eso es una gran cantidad de código allí. Hacerlo a mano sería propenso a errores y mucho trabajo. Autoprefixer hace un buen trabajo con él, lo que le permite recortar esa cantidad de código mientras decide qué navegadores admitir.

El mixin de Compass puede hacer URI de datos SVG para IE 9 si eso es importante para usted.

Para complicar las cosas un poco más, la forma en que funcionan los títulos en la sintaxis OLD vs NEW es un poco diferente. La forma VIEJA (y TWEENER – generalmente prefijada) define 0deg y de izquierda a derecha y procede en sentido anti-horario, mientras que la forma NUEVA (generalmente sin prefijo) define 0deg como abajo hacia arriba y procede agujas del reloj.

VIEJO (o TWEENER) = (450 – nuevo)% 360

o incluso más simple:

NUEVO = 90 – VIEJO
VIEJO = 90 – NUEVO

me gusta:

Gradiente lineal VIEJO (135 grados, rojo, azul)
NUEVO degradado lineal (315 grados, rojo, azul)

Filtros IE

Internet Explorer (IE) 6-9, aunque no admiten la sintaxis de degradado CSS, ofrecen una forma programática de hacer degradados de fondo

/* "Invalid", but works in 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* Valid, works in 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Aquí hay algunas consideraciones sobre la decisión de usar esto o no:

  1. filter generalmente se considera una mala práctica para el rendimiento,
  2. background-image anula el filtro, por lo que si necesita usarlo para una reserva, los filtros están desactivados. Si un color sólido es una alternativa aceptable (background-color), el filtro es una posibilidad

Aunque los filtros solo funcionan con valores hexadecimales, aún puede obtener transparencia alfa anteponiendo el valor hexadecimal con la cantidad de transparencia de 00 (0%) a FF (100%). Ejemplo:

rgba (92,47,90,1) == # FF5C2F5A
rgba (92,47,90,0) == # 005C2F5A

Gradientes radiales

Los gradientes radiales se diferencian de los lineales en que comienzan en un solo punto y emanan hacia afuera. Los degradados se utilizan a menudo para simular una iluminación que, como sabemos, no siempre es recta, por lo que pueden ser útiles para hacer que un degradado parezca aún más natural.

El valor predeterminado es que el primer color comience en el (center center) del elemento y se desvanecen hasta el color final hacia el borde del elemento. El desvanecimiento ocurre a la misma velocidad sin importar en qué dirección.

Puedes ver cómo ese degradado hace una forma elíptica, ya que el elemento no es un cuadrado. Ese es el valor predeterminado (ellipse, como primer parámetro), pero si decimos que queremos un círculo podemos forzarlo a que sea así:

.gradient {
  background-image:
    radial-gradient(
      circle,
      yellow,
      #f06d06
    );
}

Observe que el degradado es circular, pero solo se desvanece hasta el color final a lo largo del borde más lejano. Si necesitáramos que ese círculo estuviera completamente dentro del elemento, podríamos asegurarnos de que al especificar que queremos que el desvanecimiento termine en el “lado más cercano” como un valor separado por espacios de la forma, como:

Los posibles valores allí son: closest-corner, closest-side, farthest-corner, farthest-side. Puedes pensar en ello como: “Quiero que este degradado radial se desvanezca desde el punto central hasta el __________, y en cualquier otro lugar se rellene para adaptarse a eso”.

Un degradado radial tampoco tiene que comenzar en el centro predeterminado, puede especificar un cierto punto usando “en ______” como parte del primer parámetro, como:

Lo haré más obvio aquí haciendo que el ejemplo sea un cuadrado y ajustando una parada de color:

La compatibilidad del navegador con degradados radiales es en gran medida la misma que linear-gradient(), excepto una versión muy antigua de Opera, justo cuando comenzaron a admitir degradados, solo lo hizo lineal y no radial.

Pero similar a lineal, radial-gradient() ha sufrido algunos cambios de sintaxis. Hay, de nuevo: “Antiguo”, “Tweener” y “Nuevo”.

/* Example of Old */
background-image: 
  -webkit-gradient(radial, center center, 0, center center, 141, from(black), to(white), color-stop(25%, blue), color-stop(40%, green), color-stop(60%, red), color-stop(80%, purple));

/* Example of Tweener */
background-image: 
  -webkit-radial-gradient(45px 45px, farthest-corner, #F00 0%, #00F 100%) repeat scroll 0% 0% rgba(0, 0, 0, 0);

/* Example of New */
background-image: 
  radial-gradient(circle farthest-side at right, #00F, #FFF);

Los sellos son:

  • Viejo: Prefijado con -webkit-, Cosas como from() y color-stop()
  • Tweener: El primer parámetro fue la ubicación del centro. Eso se romperá por completo ahora en los navegadores que admiten la nueva sintaxis sin prefijo, así que asegúrese de que cualquier sintaxis tweener tenga el prefijo.
  • Nuevo: Primer parámetro detallado, como “círculo en la esquina más cercana en la parte superior derecha”

Una vez más, dejaría que Autoprefixer se encargara de esto. Escribes en la sintaxis más nueva, hace retrocesos. Los gradientes radiales son más alucinantes que lineales, por lo que recomendaría intentar simplemente sentirse cómodo con la sintaxis más nueva y seguir con eso (y si es necesario, olvide lo que sabe sobre las sintaxis más antiguas).

Gradientes cónicos

Un gradiente cónico es similar a un gradiente radial. Ambos son circulares y utilizan el centro del elemento como punto de origen para las paradas de color. Sin embargo, donde las paradas de color de un degradado radial emergen del centro del círculo, un degradado cónico las coloca alrededor del círculo.

Ilustrando la diferencia entre gradientes cónicos (izquierda) y radiales (derecha).

Se les llama “cónicos” porque tienden a parecerse a la forma de un cono que se ve desde arriba. Bueno, al menos cuando se proporciona un ángulo distinto y el contraste entre los valores de color es lo suficientemente grande como para notar la diferencia.

La sintaxis del gradiente cónico es más fácil de entender en inglés simple:

Hacer una gradiente cónico que se encuentra en [some point] eso comienza con [one color] en algún ángulo y termina con [another color] en [some angle]

En su nivel más básico, se ve así:

.conic-gradient {
  background: conic-gradient(#fff, #000);
}

… donde se supone que la ubicación del gradiente comienza en el centro mismo del elemento (50% 50%) y se distribuye uniformemente entre los valores de color blanco y negro.

Podríamos haber escrito esto de varias otras formas, todas las cuales son válidas:

.conic-gradient {
  /* Original example */
  background-image: conic-gradient(#fff, #000);
  /* Explicitly state the location center point */
  background: conic-gradient(at 50% 50%, #fff, #000);
  /* Explicitly state the angle of the start color */
  background: conic-gradient(from 0deg, #fff, #000);
  /* Explicitly state the angle of the start color and center point location */
  background: conic-gradient(from 0deg at center, #fff, #000);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background: conic-gradient(#fff 0%, #000 100%);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background: conic-gradient(#fff 0deg, #000 1turn);
}

Si no especificamos un ángulo para los colores, se supone que el degradado se divide uniformemente entre los colores, comenzando en 0deg y termina en 360deg. Eso crea una parada difícil donde los colores chocan entre sí en 0deg y 360deg. Si nuestro color inicial comenzara en algún otro lugar del círculo, digamos un cuarto del camino en 90deg, entonces eso crea un gradiente más suave y comenzamos a obtener esa perspectiva genial de aspecto de cono.

.conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}

Podemos divertirnos con gradientes cónicos. Por ejemplo, podemos usarlo para crear el mismo tipo de patrón que podría ver en un selector de color o en el infame indicador de pelota de playa giratoria de Mac:

.conic-gradient {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

Una maqueta que ilustra un degradado cónico que emula un patrón de rueda de colores.

O intentemos un gráfico circular simple agregando paradas precisas entre tres valores de color:

.conic-gradient {
  background: conic-gradient(lime 40%, yellow 0 70%, red 0);
}

Una maqueta que ilustra un degradado cónico que emula un gráfico circular simple de tres colores.

Desafortunadamente, conic-gradient no tiene soporte de navegador en el momento de escribir este artículo. Actualmente es parte de la especificación de nivel 4 del módulo de contenido reemplazado y imagen CSS, que se encuentra en un borrador de trabajo. Mientras tanto, Lea Verou (quien ha contribuido a la especificación) proporciona un polyfill que los hace posibles.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.

Escritorio

Cromo Firefox ES DECIR Borde Safari
69 83 No 79 12,1

Móvil / Tableta

Android Chrome Android Firefox Androide Safari de iOS
96 94 96 12,2-12,5

Gradientes repetidos

Con un soporte de navegador cada vez menor, se repiten los degradados. Vienen en variedades lineales y radiales.

Existe un truco, con degradados que no se repiten, para crear el degradado de tal manera que si fuera un pequeño rectángulo, se alinearía con otras pequeñas versiones de sí mismo para crear un patrón repetitivo. Así que, esencialmente, crea ese degradado y establece el background-size para hacer ese pequeño rectángulo. Eso facilitó la creación de rayas, que luego se podían rotar o lo que fuera.

Con repeating-linear-gradient (), no tiene que recurrir a ese truco. El tamaño del gradiente está determinado por la parada de color final. Si es de 20 px, el tamaño del degradado (que luego se repite) es un cuadrado de 20 px por 20 px.

Lo mismo con radial:

Carga de respaldo incorrecta

Como hemos cubierto, algunos navegadores realmente antiguos no admiten ninguna sintaxis de degradado CSS en absoluto. Si necesita un respaldo que aún sea un degradado, una imagen (.jpg / .png) podría ser la solución. La parte aterradora de eso es que algunos navegadores un poco menos antiguos, que apenas comenzaban a admitir gradientes CSS, cargarían la imagen de respaldo. Al igual que en, realice la solicitud HTTP para la imagen a pesar de que representaría el degradado CSS.

Firefox 3.5.8 hizo esto (ver captura de pantalla), así como Chrome 5- y Safari 5.0.1. Ver:

Safari 5.0.1 carga los fallbacks de forma incorrecta

La buena noticia es que esto ya no es un problema. Los únicos navegadores ofensivos fueron Chrome y Safari y Chrome no lo ha hecho desde 6 y Safari no lo ha hecho a partir de 5.1, hace tres años.

Recursos adicionales

  • Coge un bloque de CSS que cubra todos los prefijos / sintaxis de CSS3 ¡Por favor!
  • ¿Puedo usar en gradientes?
  • Documentos de Mozilla para degradados lineales, degradado de trazador de líneas repetido, degradado radial y degradado lineal repetido.
  • Galería de degradados (puedes hacer algunos patrones locos con degradados)
(Visited 44 times, 1 visits today)