Desde principios de este año, el neumorfismo se ha convertido en una tendencia dentro del diseño que acumula casi tanto seguidores como detractores. Lo que no podemos decir es que haya dejado indiferente a nadie y, por varios motivos, desde SiloCreativo hemos querido hacer un pequeño tutorial sobre como podemos conseguir este aspecto en nuestros diseños web usando unas pocas líneas de CSS. Y más concretamente, construyendo diferentes formatos de botones.
Antes que nada, y para los que sea la primera vez que escucháis este término, viene de la unión de New y Skeuomorphism (esqueumorfismo, es español). Este estilo visual se consigue jugando tanto con sombras interiores y exteriores, para conseguir su aspecto tan característico. Si con el Material Design buscábamos que los elementos diesen la impresión de flotar sobre el fondo, con el neumorfismo queremos que parezca que estén extruídos del fondo.
Esto lo conseguimos mediante dos principios constantes. Uno es que el elemento (en nuestro caso, un botón) tenga el mismo color base que el fondo. Y para que no se confundan, le daremos al elemento dos sombras muy suaves en direcciones opuestas, una más clara que el color base, y otra más oscura, como podemos ver en la siguiente imagen.
La posición de las sombras no es fija, sino que podemos colocarlas en las posiciones que queramos. Eso si, siempre en lados o vértices opuestos, para crear el contraste con el fondo. Y hablando del contraste, este es uno de los puntos más criticados del neumorfismo. El uso de colores tan similares, y de sombras muy suaves, hacen que el contraste no sea idóneo en temas de accesibilidad. Además, al utilizar dos sombras, el espacio ocupado por cada elemento es mayor.
Por ello, el uso de esta técnica debe utilizarse en escenarios donde la accesibilidad no sea un punto crítico, como son pruebas de concepto. En este tipo de entornos, donde prima más lo visual, el neumorfismo encaja a la perfección, ya que da un aspecto visualmente muy agradable, no distrae del contenido y conseguimos un soplo de frescura. Una vez dicho esto, pasemos a lo importante: como conseguir en nuestro diseño web este resultado. Para ellos, tendremos un HTML muy básico con varios botones, sobre el que aplicaremos este estilo de diferentes formas para conseguir diversos resultados.
Escribiendo nuestro código HTML y CSS inicial
Antes de meternos de lleno en el diseño de los botones, veamos el código HTML y CSS que estamos usando para preparar nuestro proyecto. Si no estas familiarizado con estos lenguajes, te recomendamos echar un vistazo a nuestros artículos de iniciación a HTML y a CSS. Seguro que te servirán de guía antes de empezar con el tutorial de este texto. Por resumir, en HTML solo hemos creado varios botones, y a cada uno de ellos le aplicaremos diferentes estilos para jugar un poco con las opciones que nos ofrece el neumorfismo. Cada elemento tendrá una clase diferente, así nos resultará más sencillos aplicarle su estilo CSS correspondiente.
Y en cuanto al CSS, no es más que un poco de estilo a las tipografías, y algo de Flexbox, que nos ayudará a que todo esté bien centrado y sea más cómoda la visualización de los ejemplos.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
font-weight: normal;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
}
.block-pad {
display: flex;
justify-content: center;
padding: 150px 0 150px 0;
}
a {
display: flex;
min-width: 275px;
padding: 25px 35px;
margin: 0 35px;
border-radius: 10px;
color: #53657D;
align-items: center;
justify-content: center;
text-decoration: none;
}
Una vez tengamos establecido este código previo, nos podemos olvidar del HTML, ya que todo lo que vamos a hacer a partir de ahora es aplicar estilo a nuestros botones mediante CSS.
Neumorfismo con tonalidades grises
Usaremos los mismo códigos de color que hemos visto en la imagen interior, para que podáis comprobar lo sencillo que es conseguir este aspecto. Simplemente tendremos que usar la propiedad CSS box-shadow dos veces, una para cada tipo de sombra. Si queréis saber más sobre esta propiedad CSS, os recomendamos echar un vistazo al artículo que escribimos sobre como conseguir mejores sombras en vuestros diseños.
Sin más tardanza, veamos como sería el código CSS que tenemos que escribir:
.block-btn-grey {
background: #e3edf7;
}
.block-btn-grey a {
background: #e3edf7;
box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
-6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}
Por simplificar, solo hemos aplicado mediante CSS dos sombras al botón, cada una con unas coordenadas diferentes para posicionarlas en su lugar correcto. También hemos jugado con el valor spread o difuminado de la sombra, para conseguir una sombra más suave. Podemos jugar con estos valores según sea el resultado que vayamos buscando, o el tamaño del elemento al que lo vayamos a aplicar. Pero los principios básicos son estos.
Neumorfismo con tonos de color y formatos diversos
Pero el neumorfismo no está solo centrado en tonalidades grises. También podemos usarlo en diseños con otros colores. En estos casos, en vez de usar una sombra blanca con transparencia, y otra negra también con transparencia, usaremos dos tonalidades diferentes del color base. Una tonalidad con más brillo para la sombra clara, y otra con menos brillo para la sombra oscura.
También podemos darle otro aspecto al botón, para que no sea una pieza plana, jugando con diferentes estilos de sombras y degradados de color. Comentar que estos no son resultados totales, y siempre podéis jugar con los colores para obtener el aspecto que más os guste. Eso si, mejor que todas estas explicaciones, es verlo con un ejemplo.
Botón azul y formato plano
Como hemos dicho antes, probemos en primer lugar cambiando el color grisáceo #EBEBEB, por uno azulado como #CAD8ED. Y jugando un poco con el brillo de este color base, obtenemos los otros dos colores para las sombras. Este sería nuestro código CSS:
.block-btn-blue {
background: #CAD8ED;
}
.block-btn-blue a {
background: #CAD8ED;
box-shadow: 6px 6px 20px -1px #acb8c9,
-6px -6px 20px -1px #e8f8ff;
}
La elección de no usar blancos y negros con transparencia es para conseguir unas sombras aún más suaves y naturales. En la siguiente imagen podemos ver como quedaría usando esta solución.
Botón verde y formato cóncavo
En el caso de este botón, además del color, queremos que tenga un aspecto cóncavo. Para ellos, le aplicaremos un gradiente de color al botón, en la misma dirección al que hemos aplicado las sombras, y usando también los colores de las sombras, eso si, de forma inversa. Es decir, en el vértice de la sombra clara, estaré la zona del gradiente más oscura. Y en el vértice de la sombra oscura, estará la zona del gradiente más clara. Veamos como quedaría el CSS, y una imagen con el resultado.
.block-btn-green {
background: #72CAAF;
}
.block-btn-green a {
background: linear-gradient(145deg, #67b69e, #7ad8bb);
box-shadow: 6px 6px 20px -1px #61ac95,
-6px -6px 20px -1px #83e8c9;
}
Botón amarillo y formato convexo
Para la forma convexa, el proceso sería el mismo que con la cóncava, solo que ahora la posición de los colores dentro del gradiente es justo la contraria. Este sería el CSS:
.block-btn-yellow {
background: #FAEFDE;
}
.block-btn-yellow a {
background: linear-gradient(145deg, #ffffee, #e1d7c8);
box-shadow: 6px 6px 20px -1px #d5cbbd,
-6px -6px 20px -1px #ffffff;
}
Un truco es no utilizar justo el mismo color para el gradiente de color y la sombra, ya que podemos tener partes del botón que se puedan confundir con el fondo. Lo ideal es que las sombras sean algo más claras por un vértice, y más oscura en el otro, para que se puedan distinguir.
Botón rojo y formato presionado
Aquí usaremos una propiedad de box-shadow para crear sombras interiores, y construir el efecto de que nuestro botón, en vez de estar extruído hacia afuera, lo está hacia el fondo. Y lo haremos en CSS gracias al valor inset:
.block-btn-red {
background: #F283A5;
}
.block-btn-red a {
background: #F283A5;
box-shadow: inset 6px 6px 20px -1px #ce6f8c,
inset -6px -6px 20px -1px #ff97be;
}
¿Y si añadimos efecto hover al botón?
Si queremos dar un efecto hover a nuestro botón, simplemente vamos a mezclar dos de los estilos que hemos usado antes: el formato de botón plano para el estado normal, y el presionado para el hover. Veamos como quedaría nuestro CSS:
.btn-hover {
background: #EBEBEB;
}
.btn-hover a {
background: #EBEBEB;
box-shadow: 6px 6px 20px -1px rgba(0, 0, 0, 0.15),
-6px -6px 20px -1px rgba(255, 255, 255, 0.7);
}
.btn-hover a:hover {
box-shadow: inset 4px 4px 10px -1px rgba(0, 0, 0, 0.15),
inset -4px -4px 10px -1px rgba(255, 255, 255, 0.7);
}
Este ejemplo lo hemos realizado con el botón gris, pero es extrapolable a cualquier otro color, como ya hemos visto. Si queremos ir una paso más allá, podemos añadirle una pequeña escala para que parezca un elemento 3D al presionarlo, o una traslación. Como siempre, os animamos a experimentar e investigar, para conseguir resultados diversos, que añadirán una capa extra a vuestros diseños.
Experimento con neumorfismo en Codepen
Para concluir, os dejamos el Codepen con el que hemos realizado este artículo, para que podáis visualizarlo de primera mano y ver todo el código que hemos usado:
Conclusiones finales
Tal como hemos visto, el neumorfismo nos proporciona un aspecto minimalista y moderno, y conseguirlo es muy sencillo si tenemos claro cuales son sus principios básicos. A partir de ahí podemos empezar a jugar con los colores, gradientes y sombras para conseguir diversos resultados. Eso sí, siempre hay que tener en cuenta sus puntos negativos, ya que no es idóneo para usarlo en cualquier escenario.
Y, sobre todo, es importante que no tengáis miedo a experimentar con diferentes colores, posiciones y estilos de sombras, etc. El neumorfismo nos da juego para poder cambiar nuestro código y hacer que se adapte perfectamente en otras situaciones. Podemos tener un aspecto aun más minimalista con sombras aún más suaves. O aumentar poner sombras de diversos tamaños para que de la impresión de que cada elemento está a una altura diferente. Nuestro objetivo no es más que conocieseis esta tendencia, sepáis como usarla y, a partir de aquí, que consigáis vuestros propios resultados.
Como siempre, esperamos que os haya gustado este artículo, y que os sirva de inspiración en vuestros proyecto. Tenéis abiertos los comentarios para cualquier duda o experiencia que tengáis sobre el neumorfismo, y que queráis compartir con nosotros.
