¿Qué es neumorphism? Si habéis llegado hasta este artículo probablemente ya lo sepáis. Es muy probable que os hayan pasado un diseño neomórfico y os encontréis ante la tarea de crear la UI en HTML. Bien, por consideración a vosotros, conocedores del término, no me extenderé demasiado en la respuesta. Sin embargo, siento la obligación de hacer una pequeña introducción al Neomorfismo antes de pasar a las técnicas CSS.
Neomorfismo (o neumorfismo)
Lo cierto es que cuando nos llegan nombres extranjeros de difícil pronunciación, acaban saliendo múltiples adaptaciones al castellano y rara vez hay una convención o consenso entre los usuarios del término. Podéis usar el término original Neumorphism o si os es más sencillo cualquiera de los dos que aparecen en el título.
Origen de Neumorphism
Parece que la primera propuesta de diseño neomórfico vino de la mano de Alexander Plyuto en Dribble, presentando un diseño inspirado en Esqueumorfismo, otra tendencia anterior caracterizada por simular fielmente la realidad y popularizada por iOS durante la primera década del milenio; tendencia que siguió también MS, aunque no de forma tan obvia, aplícándolo principalmente en sus iconos de aspecto realista.
Sin embargo la propuesta de Plyuto no era ni remótamente tan fiel a la realidad en sus formas, pero sí conservaba esa percepción de elementos palpables. Volúmenes suaves pero efectivos que parecen salir del propio fondo para conformar los espacios y controles de la interfaz.
Características neomórficas
Como decía, las líneas de diseño del Neomorfismo buscan un realismo lumínico con volúmenes suaves de elementos que aparentan emerger diréctamente del fondo. Se busca la armonía por encima del contraste lumínico más característico del Esqueumorfismo, concentrando el color en elementos clave de la interfaz, que gracias a él logran mayor contraste.
La mayoría de los diseños neomórficos usan fondos planos o con con suaves degradados en interfaces poco saturadas de contenido dejando que el espacio enmarque los pocos elementos que los conforman, confiriéndo a estos mayor protagonismo.
Es común encontrarnos diseños híbridos entre Neumorphism y Glassmorphism, pues ambos comparten características comunes como la suavidad de los fondos, los espacios muy aireados y el realismo de los volúmenes. También comparten algunos retos, como lograr contrastes suficientes entre texto y fondo.
Pero del diseño al hecho hay un trecho. Porque a veces los diseñadores nos podemos dejar llevar por la creatividad sin tener muy en cuenta la complejidad del desarrollo. Así que en este artículo veremos algunas soluciones para los elementos más comunes del diseño neomórfico: una imagen, un par de campos de formulario y dos tipos de botones diferentes:
Técnicas Neumorphism con CSS
El clásico efecto neomórfico que hace que los elementos parezcan emerger del propio fondo se basa en la fusión entre luces y sombras que crea la ilusión de volúmenes realistas. En CSS no tenemos el concepto de luces pero sí de sombras que pueden ser del color que queramos y que, por lo tanto, nos servirán también para crear el efecto lumínico.
Marco neomórfico para imagen
Así, para crear dicha fusión deberemos superponer al menos dos sombras proyectadas en direcciones opuestas. A mí me gusta usar un ángulo de 45 grados que ayuda a darle realismo. Puesto que la superposición debe ser parcial, deberemos desplazar las sombras respecto del objeto usando una relación de 1px por al menos 3px que mida la sombra. Para este ejemplo la sombra medirá 12px y la desplazaremos 4px. Vamos a verlo:
box-shadow:
4px 4px 12px 6px rgba(0,0,0,.05), /*Sombra*/
-4px -4px 12px 6px rgba(255,255,255,1); /*Luz*/
En naranaja, tenemos el desplazamiento vertical y horizontal, que al ser iguales nos dan un ángulo de 45º hacia abajo para la sombra y -45º para la luz, haciendo que ésta parezca venir de arriba a la izquierda.
Seguidamente nos encontramos 12px que será la distancia de proyección de la sombra. Para lograr un mayor contraste entre luces y sombras expandiremos ambas un 50% (ver en violeta). Así logramos que los volúmenes se acentúen un poco más ya que para conservar la sutileza hemos rebajado el nivel de negro de la sombra al mínimo (alpha 0.05).
Marco neomórfico con paspartú
Esas son las sombras que hemos aplicado a la imagen para hacerla salir del fondo (en concreto al tag <figure> que la contiene), pero como véis tiene un doble efecto, haciendo que vuelva a hundirse y dejando un marco a modo de paspartú alredededor de ella.
Para lograrlo deberemos añadir dos sombras más precedidas por el parámetro inset que hará que las sombras se proyecten en el interior del objeto. No será necesario extenderlas porque añadiremos un borde blanco que acentúe el vértice de la forma 3D, creando así la ilusión de un «canto».
box-shadow:
4px 4px 12px 6px rgba(0,0,0,.05), /*Sombra*/
-4px -4px 12px 6px rgba(255,255,255,1); /*Luz*/
inset 4px 4px 12px rgba(0,0,0,.05),/*Sombra interior*/
inset -4px -4px 12px rgba(255,255,255,1);/*Luz interior*/
border: solid 1px #fff;
En el ejemplo hemos usado un border-radius: 50% para crear un círculo, pero podemos crear multiplicidad de formas con border-radius. También hemos usado overflow: hidden para que la imagen tome la misma forma. Sin embargo podrías optar por usar una imagen que excediese los límites de <figure> y añadirle una sombra que crease mayor sensación de tridimiensionalidad.
Campo input neomórfico
Para el campo de texto, Neumorphism aporta un efecto visual que, lejos de parecerse a la realidad del papel, otorga mayor intuitividad al uso que debe darse del elemento, invitando a pulsarlo, a «tocarlo». En este caso la profundidad será exclusivamente interior y algo más pequeña que la dada al marco de la imagen ya que queremos conservar la apariencia de «casilla» y evitar que se pueda confundir con contenedores que usen este mismo recurso.
A mí me gusta trabajar con valores de sombra de entre 3 y 9px. La necesidad de extender las sombras/luces la determinarán los colores del diseño. En este caso no la he usado pero sí he subido un poco el valor alpha de la sombra.
box-shadow:
inset 3px 3px 9px rgba(0,0,0,.125), /*Sombra*/
inset -3px -3px 9px rgba(255,255,255,1); /*Luz*/
Las esquinas redondeadas ayudarán al efecto, que terminaremos añadiendo un canto igual al usado en el marco neomórfico. Para ello usaremos outline. De esa forma no reducimos el espacio interior.
border-radius: 24px; /*La mitad de la altura de 48px*/
outline: solid 1px #fff;
NOTA DE DISEÑO: Por supuesto esta es sólo una propuesta que os hago con el fin de explicaros el uso de los volúmenes que luego podréis aplicar en cualquier otro elemento. En cuestión de diseño, las opciones son bastante variadas, pudiendo mezclar estilos de otras tendencias minimalistas como flat o material design, que puedan encajar en la composición.
Efecto de foco – la luz en Neumorphism
En Neumorphism se trabaja mucho con los efectos lumínicos; hay menos colores implicados en la composición y las separaciones las crean los espacios entre bloques de contenido, por lo que hay menos bordes o cambios de color en los fondos. Por eso la luz que crea los suaves volúmenes es la protagonista.
Así como se usa para crear los volúmenes, también es común acentuar la luminosidad de los elementos cuando se activan o reciben foco. Y esto último es lo que he usado para resaltar el input:
El efecto es sutil pero suficiente. Podéis acentuarlo más si lo consideráis necesario, o incluso teñirlo ligeramente. Sin embargo yo evitaría cambiar colores del borde, p.e., porque no encajaría con el realismo minimalista de Neumorphism.
Deslizador de rangos (slider)
El aspecto neomórfico del slider dependerá del tipo y cantidad de valores con los que se haya de trabajar en la fase de diseño. No es lo mismo trabajar con valores numéricos que con cadenas de texto, o hacerlo con una cantidad pequeña de ellos que con rangos muy amplios. Por lo tanto, me he decantado por una de las opciones más minimalistas y verasátiles para el que sólo os voy a dar un pequeño tip.
Partimos del efecto dado al campo de texto escalando los valores al tamaño del rail por el que se deslizará el manejador.
El detalle que debéis tener en cuenta es que la sombra del rail de base se proyectará también sobre la barra de progreso. Si estamos trabajando con tonos de gris, esto hará perder pureza al color intenso que queremos conseguir en ella. El truco aquí es trabajar con sombras azuladas o violáceas, que se fusionarán con el color de fondo sin agrisar. Aunque teñirán también un poco el resto del rail, no quedará mal, es más, probablemente mejorarán el diseño.
box-shadow: inset 2px 2px 6px rgba(100,0,100,.5), inset -2px -2px 6px rgba(255,200,255,.5);
CSS del slider neomórfico
En cuanto a la ejecución, os doy únicamente un par de detalles, ya que explicar type range aquí se saldría mucho del objetivo del artículo, por lo que os dejo un enlace para aquellos que queráis profundizar en la personalización de input type range. Cuando lo leáis entenderéis la raíz del problema de las sombras.
Al final de este artículo también os dejo el código específico para este caso. Pero vamos con esos detalles que no se explican en el anterior enlace. La personalización de type range se basa en los pseudoelementos que los navegadores generan al vuelo para pintar sus partes. Resulta que no todos disponen de uno específico para la barra de progreso, como Chrome, que sólo dispone del track y el thumb. Así que para dar una solución consistente para todos ellos, usamos un background «degradado» dinamizando la variable CSS por medio de javascript que nos indicará el porcentaje de progreso, es decir, el punto en el que el degradado cambiará de color, pues no es un degradado como tal ya que el cambio de color se produce en un único punto.
Sin embargo, aquí aprovecharemos ese linear-gradient para darle nuestro efecto neomórfico consistente en un degradado de colores vivos que resaltará la franja de progreso.
background: linear-gradient(to right, #99F 0%, rgba(#33A,1) var(--progressW), #f0f0f0 var(--progressW), #f0f0f0 100%);
Botonera neomórfica
En Neumorphism solemos encontrar dos tipos de botones, uno de superficie plana y otro más realista. Vamos a ver el primero aplicado a unos radio button para crear una botonera.
Paso 1: aplicamos el efecto de sombras a un contenedor y añadimos el canto de luz, pero esta vez usando outline en lugar de border, para evitar que afecte a la percepción del tamaño de los botones.
HTML
<fieldset></fieldset>
CSS
fieldset {
box-shadow: 3px 3px 9px rgba(0,0,0,0.15), -3px -3px 9px 3px rgba(255,255,255,1);
background: #ccc;
outline: solid 1px rgba(255,255,255,0.75);
}
Paso 2: convertimos el radio button en un botón estándar mediante pseudoelementos :after a los que les daremos la forma deseada similar al campo de texto. También usaremos el atributo aria-label para pintar el texto usando la función CSS attr() aplicada a content.
Para darle un contorno más suave añadiremos un borde blanco, pero casi trasparente. Así evitamos un canto excesivamente marcado que resultaría artificial. También acenturará ligeramente la separación entre los botones.
HTML
<input type="radio" name="gender" aria-label="Hombre"/>
<input type="radio" name="gender" aria-label="Mujer"/>
CSS
[type=radio]{
display: inline-block;
appearance: none;
}
[type=radio]:after {
content: attr(aria-label);
height: 44px; /*4px menos para compensar su borde y el outline del fieldset*/
border: solid 1px rgba(255,255,255,0.25);
background: #f0f0f0;
}
Paso 3. Aplicamos sombras interiores como las del campo de texto cuando se seleccione uno de los radio buttons. Además iluminaremos el fondo tal como hicimos con el campo de texto al recibir el foco.
[type=radio]:checked:after {
box-shadow: inset 3px 3px 9px rgba(0,0,0,0.15), inset -3px -3px 9px rgba(255,255,255,1);
color: #33A;
background: #f6f6f6;
}
Botón neomórfico embebido
Y llegamos a la guinda del pastel de Neumorphism, el botón de acción. Como ya hemos trabajado los biseles, en este último componente trabajaremos un botón embebido en dos colores, uno primario y otro secundario que usaremos como base para aprender cómo trabajar con botones.
En Neomorfismo, los botones o bien tienen relieve positivo o negativo. Nosotros trabajaremos con el segundo que será más adecuado para embeberlo en el plano de fondo, quedando bien integrado en la superficie.
Tal como hizimos en la botonera, el color del botón secundario será igual al del fondo. Para definir su contorno crearemos una «endidura» usando dos sombras exteriores, una gris de 1px y otra blanca de 2px, ya que si fuese de 1px, quedaría oculta por la gris. La razón de usar sombras en vez de borde y/o outline es que el borde lo usaremos para dar forma al botón y outline va asociado al elemento que, como veremos más adelante, se desplaza. Y nosotros necesitamos que este límite, definido por la endidura, quede fijo para crear la ilusión de que el botón se hunde al pulsarlo.
El resto es sencillo: añadimos el mismo efecto que al campo de texto pero algo más suave sin crear un canto entre el borde del botón y el inicio del contra-relieve. Ya tenemos nuestro botón secundario.
button {
color: #99F;
border: solid 4px #f0f0f0;
border-radius: $module/2;
/*Definimos variables que nos permitirán economizar código más adelante*/
--borderCLR: rgba(0,0,0,.15);
--lightCLR: rgba(240,240,255,.5);
--shadowCLR: rgba(0,0,0,0.05);
box-shadow: 0px 0px 1px 1px var(--borderCLR), 0px 0px 2px 2px white, inset 3px 3px 9px var(--shadowCLR), inset -3px -3px 9px var(--lightCLR);
}
Para el primario sólo hemos de cambiar los colores del fondo y el borde y, para que el efecto de volumen quede bien integrado, también el de las sombras, usando colores dentro de la misma escala cromática.
.submit {
color: white;
border-color: #99F;
background-color: #99F;
--lightCLR: rgba(200,200,255,.75);
--shadowCLR: rgba(0,0,100,0.15);
}
Efecto de botón activo (pulsado)
Para terminar crearemos el efecto para el botón activo que consiste en desplazar el botón en la misma dirección que la luz. Para ello debemos:
- Posicionarlo relativamente, evitando así pérdidas de layout. Con 1 o 2px es suficiente.
- Compensamos ese desplazamiento, alargando la sombra que usamos para crear la endidura.
- Simulamos ocultar la parte inferior del botón al hundirse encogiendo los bordes inferior y derecho.
button:active {
position: relative; /*Posicionamos el elemento en relación a su propia posición*/
top: 2px; /*desplazamos verticalmente*/
left: 1px;/*desplazamos horizontalmente*/
box-shadow: -1px -1px 1px 1px var(--borderCLR), -1px -1px 2px 2px white, inset 3px 3px 9px var(--shadowCLR), inset -3px -3px 9px var(--lightCLR);
border-width: 4px 2px 2px 4px;
}
Y listo ya tenemos terminados nuestros botones. Podéis ver el conjunto completo en el siguiente CODEPEN.
See the Pen
Neumorphism UI by Daniel Abril (@elcssar)
on CodePen.
Espero que no se os haya hecho muy largo. Quería daros suficientes herramientas para que pudiéseis afrontar la mayor cantidad de retos que os encontraréis con diseños Neumorphism. Y por supuesto si tenéis cualquier duda, pregunta o petición… no dudéis en dejarla en los comentario y os responderé gustoso.
Y si no os queréis perder los próximos artículos, podéis suscribiros desde la columna de la izquierda y recibiréis puntualmente las nuevas publicaciones. Tranquilos que no os spamearé -palabrita del niño Jesús 😉 -.