7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Inspiration

Caramba, degradados por toda la Web

Scroll to top
Read Time: 4 mins
This post is part of a series called Weeks of Web Design Inspiration.
Online Annual Reviews From 2015
Big Smiles and Happy Faces in Web Design

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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 vino 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 en los últimos seis meses han estado llenos de imágenes en duo tono y con exuberantes degradados, culminando con su presentación de Un año en música.

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 reciente pieza retrospectiva artículos sobre diseño de 2015.

Aquí, el púrpura y el fucsia (con un ángulo de 45 grados) aportan una encantadora profundidad y crean una página realmente espectacular.

realfuturefair.com usa un rango de color igualmente espectacular, de nuevo con un ángulo diagonal, y con un <canvas> gráfico generado 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, optando por colocar un degradado semi-opaco sobre la fotografía de 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 al peso de 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 adopta el gradiente. ¿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 soportado.

Después habrás notado que a la propiedad borde-image le sigue broder-image-slice: 1;. Esto determina a partir de donde la imagen del fondo se recorta, de manera 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:

Granulado hacia arriba

Hasta ahora hemos visto degradados suaves; con dos o más colores uno seguido del otro en una transición perfecta. CSS logra que este proceso sea relativamente sencillo y fácil de mantener hoy en día. Pero a los degradados también se les puede dotar de carácter en forma de textura:

En worldseasiestdecision.org esta áspera textura se usa para dar a sus gradientes más personalidad. Buen trabajo.

www.viens-la.com también usa imágenes (en oposición a CSS) para dotar a sus gradientes de un poco de personalidad:

Un degradado similar puede verse repetido en los detalles a lo largo de su web:

Tipografía

Los degradados no están restringidos únicamente a los fondos y los bordes, pueden añadir un aspecto también interesante a la tipografía:

Aquí Pierre Georges usa un degradado en el fondo del bloque del párrafo "Bonjour", después usa la propiedad background-clip para restringir el área pintada al texto. Después con -webkit-text-fill-color: transparent; convierte el texto actual en transparente, de forma que el gradiente sea visible desde abajo.

Aquí tienes como se ve la sintaxis (webkit):

Envato Market

¿Necesitas algo de inspiración? Visita estos archivos disponibles en Envato Market:

gradiente - tumblr themegradiente - tumblr themegradiente - tumblr theme
Gradiente - Tema de Tumblr
RedRice - WordPress One-Page Multipurpose ThemeRedRice - WordPress One-Page Multipurpose ThemeRedRice - WordPress One-Page Multipurpose Theme
RedRice - Tema WordPress Multipropósito de estilo "one page"
QuickEvents Responsive Unbounce Landing PageQuickEvents Responsive Unbounce Landing PageQuickEvents Responsive Unbounce Landing Page
QuickEvents - Responsive Unbounce Landing Page
Colormuse - One Page Portfolio Muse TemplateColormuse - One Page Portfolio Muse TemplateColormuse - One Page Portfolio Muse Template
Colormuse - Plantilla para portafolio estilo "one page"
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.