Share
Los gradientes están haciendo una reaparición furtiva. Por un tiempo pertenecieron al mundo de Miami Vice y Tequila Sunrise, luego agregaron profundidad a las revistas de los 80, luego hubo Geocities, ok, no nos detengamos en el pasado..
Hoy en día, los gradientes se utilizan en la web de manera audaz; mezcla colores altamente saturados para efectos extremadamente ricos (aunque no es del gusto de todos).
Parece que todos están usando un gradiente diagonal otra vez como si fuera 1995. El mismo en eso (L: Stripe, R: Google). pic.twitter.com/j3cXyWo9tq
- Eli Schiff (@eli_schiff) 24 de noviembre de 2015
Veamos algunos ejemplos que he encontrado recientemente y veamos si podemos inspirarnos en ellos..
No te sorprenderá ver a Spotify en esta lista. Sus gráficos en los últimos seis meses han estado llenos de imágenes duotono y gradientes ricos, concluyendo con su característica Año en la música.
Combinado con el tipo fuerte, la marca visual de Spotify no solo te golpea en el hombro en este momento, mantiene tu cabeza contra el amplificador y sube el volumen.
Atomic utilizó un enfoque similar con su reciente retrospectiva en los artículos de diseño de 2015.
Aquí, el morado y el fucsia (con un ángulo de 45 grados) dan una profundidad isométrica encantadora y hacen un verdadero espectáculo de la página..
realfuturefair.com utiliza una gama de colores igualmente espectacular, de nuevo en un ángulo diagonal, con un gráfico de onda generado:
Mi antiguo colega Jeffrey Way se ha vuelto horizontal, usando un sutil de púrpura a índigo en laracasts.com:
Los comentarios usan una estética menos retro, en lugar de optar por colocar una imagen de gradiente semi-opaca sobre el fondo de la página principal:
Esto podría haberse hecho con más recursos (la imagen adicional agrega otra solicitud http y 75kb a la página), pero es un efecto elegante.
La tarde de la web de la conferencia web utiliza un degradado de azul a púrpura recurrente en su página, que es particularmente efectivo como los bordes de los botones:
Coloca el cursor sobre el enlace y todo el fondo adopta el degradado. Entonces, ¿cómo se hace esto? Después de algunos estilos básicos, el borde del botón recibe un degradado lineal con el imagen de borde propiedad. Esto nos permite efectivamente lanzar una imagen en el borde, en lugar de confiar en el trazo normal, aunque puede declarar propiedades de borde estándar primero para dejar una caída si la imagen de borde no es compatible.
Luego notará que la propiedad de imagen de borde es seguida por borde-imagen-rebanada: 1;. Esto determina dónde se divide la imagen de fondo, para que pueda escalar con el elemento. El valor de 1 toma el primer píxel a lo largo de la "imagen" de la izquierda, la parte superior, la derecha y la parte inferior de nuestra gradiente, y asigna esos cortes a las ocho regiones del borde. Lea más sobre rebanar en MDN.
Luego, para el estado de desplazamiento, se aplica el mismo degradado al relleno de fondo. Aquí está en acción:
Hasta ahora hemos cubierto gradientes suaves; dos o más colores que fluyen entre sí a lo largo de una transición perfecta. CSS hace que este proceso sea relativamente sencillo y fácil de mantener en la actualidad. Pero a los gradientes también se les puede dar carácter en forma de textura:
En worldseasiestdecision.org esta textura de dibujo aproximado se utiliza para dar más personalidad a sus gradientes. Buen trabajo.
www.viens-la.com también usa imágenes (a diferencia de CSS) para permitir que sus gradientes tengan un poco de personalidad:
Un gradiente similar se puede ver repetido en los detalles a lo largo de su sitio:
Los degradados no solo se limitan a los fondos y bordes, también pueden agregar un elemento de interés a la tipografía:
Aquí Pierre Georges usa un gradiente en el fondo del bloque de párrafo "Bonjour", luego usa el clip de fondo propiedad para restringir el pintado area al texto. -webkit-text-fill-color: transparente; luego hace que el texto real sea transparente, por lo que el degradado es visible desde abajo.
Así es como se ve la sintaxis (webkit):
p imagen de fondo: -webkit-gradiente (lineal, superior izquierda, superior derecha, límite de color (0, # f24a70), límite de color (0.5, # c557d8), límite de color (0.99, # f24a70)); -webkit-background-clip: texto; -webkit-text-fill-color: transparente;
¿Necesitas más inspiración? Echa un vistazo a estos archivos disponibles en Envato Market:
Gradiente - tema Tumblr
RedRice - Tema multipropósito de una página de WordPress
QuickEvents - Página de inicio responsiva de Unbounce
Colormuse - Plantilla de One Page Portfolio Muse
Accentsconagua