Los degradados están reapareciendo de forma sigilosa. Durante un tiempo pertenecieron al mundo de «Miami Vice» y «Tequila Sunrise», añadieron profundidad a las revistas de los años 1980, luego fue Geocities, ok, no nos detengamos en el pasado.
Hoy en día los degradados se usan en la web con estilos audaces; mezclando colores altamente saturados para crear efectos extremadamente ricos (aunque no son del gusto de todo el mundo).
Echemos un vistazo a algunos ejemplos con los que me he topado recientemente y veamos si podemos extraer algo de inspiración de ellos.
No te sorprenderás al encontrarte con Spotify en esta lista. Sus gráficos han estado llenos de imágenes en duotono y con exuberantes degradados.
Combinados con tipografías fuertes o agresivas, la imagen de marca de Spotify no solo te da unos toquecitos en el hombro al momento, sino que te hace volver la cabeza hacia el amplificador y los botones del volumen.
Atomic usó un enfoque similar en su pieza retrospectiva de artículos sobre diseño.
Aquí, el púrpura y el fucsia (con un ángulo de 45 grados) aportan una encantadora profundidad y crean una página realmente espectacular.
Real Future Fair usó un rango de color igualmente espectacular, de nuevo con un ángulo diagonal, y con un canvas gráfico con ondas:
Mi ex colega Jeffrey Way ha preferido la horizontalidad, utilizando un sutil púrpura que se transforma en índigo para laracasts.com:
Comment usa una estética menos retro, en lugar de eso opta por colocar un degradado semi-opaco sobre una fotografía real situada en el fondo de la página principal:
Esto se podría haber hecho más hábilmente, la imagen extra añade otra solicitud http y 75kb a la página, no obstante, es un efecto elegante.
Degradados y bordes
La conferencia Web Afternoon usa recurrentemente un degradado azul hacia púrpura en su página, que es particularmente efectivo en los bordes de los botones.
Sitúate sobre el enlace y todo el fondo adoptará el degradado. ¿Cómo se hace esto? Tras algunos estilos básicos, al borde del botón se le aplica un degradado lineal mediante la propiedad border-image. Esto efectivamente nos permite mostrar una imagen en el borde, en lugar del habitual trazo, aunque puedes declarar las propiedades de un borde normal primero para dejar una alternativa en caso de que border-image no fuese admitido por algún navegador antiguo.
Después habrás notado que a la propiedad de borde-image le sigue broder-image-slice: 1;. Esto determina a partir de donde la imagen del fondo se recorta para que pueda escalarse con el elemento. El valor de 1 toma el primer píxel desde la parte superior, la inferior, la izquierda y la derecha de nuestra «imagen» degradada, y mapea esas rebanadas en ocho regiones del borde. Lee más sobre el troceado en MDN
Después, para el estado hover, el mismo degradado se aplica al fondo del borde. Aquí lo tienes en acción:
Lo que te queda por leer:
- Degradados con texturas
- Texto degradado
Recursos:
- Artículo sobre los degradados en MDN
- Artículo sobre border- image en CSS-Tricks
- Artículo sobre bordes con gradientes CSS en CSS-Tricks
- Artículo sobre cómo animar los bordes con gradientes CSS en CSS-Tricks
- Inspiración sobre degradados en Codepen
Deja una respuesta