El neumorfismo es una nueva tendencia de diseño que combina diseño plano y esqueuomorfismo. Es una forma mínima de diseñar con un plástico suave extruido, con un aspecto casi de estilo 3D. Actualmente, este diseño es tendencia en Internet y es ampliamente utilizado por diseñadores y desarrolladores.

Si desea probar el neumorfismo para su próximo proyecto, aquí hay algunos fragmentos de código para comenzar.

1. Cartas neumorficas

Utilice los siguientes fragmentos de código HTML y CSS para crear las tarjetas neumorficas anteriores.

código HTML

Diseño

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Lee mas
















Código

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Lee mas










instagram viewer












Lanzamiento

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Lee mas

Código CSS

@import url (' https://fonts.googleapis.com/css? familia = Poppins: 400,500,600,700,800,900 & display = swap ');
*
{
margen: 0;
acolchado: 0;
tamaño de caja: caja de borde;
familia de fuentes: 'Poppins', sans-serif;
}
cuerpo
{
pantalla: flex;
justificar-contenido: centro;
alinear-elementos: centro;
altura mínima: 100vh;
fondo: # ebf5fc;
}
.envase
{
posición: relativa;
pantalla: flex;
justificar-contenido: espacio alrededor;
alinear-elementos: centro;
envoltura flexible: envoltura;
ancho: 1100px;
}
.container .card
{
ancho: 320px;
margen: 20px;
relleno: 40px 30px;
fondo: # ebf5fc;
radio del borde: 40px;
caja-sombra: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: hover
{
caja-sombra: recuadro -6px -6px 20px rgba (255,255,255,0.5), recuadro 6px 6px 20px rgba (0,0,0,0.05);
}
.container .card .imgBx
{
posición: relativa;
alineación de texto: centro;
}
.container .card .imgBx img
{
ancho máximo: 120px;
}
.container .card .contentBx
{
posición: relativa;
margen superior: 20px;
alineación de texto: centro;
}
.container .card .contentBx h2
{
color: # 32a3b1;
peso de fuente: 700;
tamaño de fuente: 1.4em;
espaciado entre letras: 2px;
}
.container .card .contentBx p
{
color: # 32a3b1;
}
.container .card .contentBx a
{
pantalla: bloque en línea;
relleno: 10px 20px;
margen superior: 15px;
radio del borde: 40px;
color: # 32a3b1;
tamaño de fuente: 16px;
decoración de texto: ninguna;
sombra de cuadro: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: hover
{
caja-sombra: recuadro -4px -4px 10px rgba (255,255,255,0.5), recuadro 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: intervalo de desplazamiento
{
bloqueo de pantalla;
transformar: escala (0,98);
}
.container .card: desplazarse .imgBx,
.container .card: desplazarse .contentBx
{
transformar: escala (0,98);
}

2. Forma neumorfica

Utilice los siguientes fragmentos de código HTML y CSS para crear la forma neumorfica anterior.

código HTML

Inscribirse










 Iniciar sesión

Código CSS

cuerpo, html {
color de fondo: # EBECF0;
}
cuerpo, p, entrada, seleccionar, área de texto, botón {
familia de fuentes: "Montserrat", sans-serif;
espaciado entre letras: -0,2px;
tamaño de fuente: 16px;
}
div, p {
color: #BABECC;
sombra de texto: 1px 1px 1px #FFF;
}
formulario {
relleno: 16px;
ancho: 320px;
margen: 0 automático;
}
.segment {
relleno: 32px 0;
alineación de texto: centro;
}
botón, entrada {
borde: 0;
contorno: 0;
tamaño de fuente: 16px;
radio del borde: 320px;
relleno: 16px;
color de fondo: # EBECF0;
sombra de texto: 1px 1px 0 #FFF;
}
etiqueta {
bloqueo de pantalla;
margen inferior: 24px;
ancho: 100%;
}
aporte {
margen derecho: 8px;
caja-sombra: recuadro 2px 2px 5px #BABECC, recuadro -5px -5px 10px #FFF;
ancho: 100%;
tamaño de caja: caja de borde;
transición: todos los 0,2 segundos de entrada y salida;
apariencia: ninguna;
-aparición del kit de web: ninguna;
}
input: focus {
caja-sombra: recuadro 1px 1px 2px #BABECC, recuadro -1px -1px 2px #FFF;
}
botón {
color: # 61677C;
font-weight: negrita;
sombra de cuadro: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
transición: todos los 0,2 segundos de entrada y salida;
cursor: puntero;
peso de fuente: 600;
}
button: hover {
sombra de cuadro: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
botón: activo {
caja-sombra: recuadro 1px 1px 2px #BABECC, recuadro -1px -1px 2px #FFF;
}
button .icon {
margen derecho: 8px;
}
button.unit {
radio del borde: 8px;
altura de línea: 0;
ancho: 48px;
altura: 48px;
pantalla: inline-flex;
justificar-contenido: centro;
alinear-elementos: centro;
margen: 0 8px;
tamaño de fuente: 19,2 px;
}
button.unit .icon {
margen derecho: 0;
}
button.red {
bloqueo de pantalla;
ancho: 100%;
color: # AE1100;
}
.input-group {
pantalla: flex;
alinear-elementos: centro;
justificar-contenido: flex-start;
}
.input-group label {
margen: 0;
flexión: 1;
}

3. Barra de navegación neumorfica

Utilice los siguientes fragmentos de código HTML, CSS y JavaScript para crear la barra de navegación neumorfica anterior.

código HTML

Relacionados: Mejores sitios para ejemplos de codificación HTML de calidad

Barra de navegación neumorfica

Código CSS

* {
margen: 0;
acolchado: 0;
tamaño de caja: caja de borde;
}
cuerpo {
color de fondo: #efeeee;
}
.nav {
ancho: 100vw;
altura: 100px;
color de fondo: #efeeee;
caja de sombra: 10px 10px 12px 0 rgba (0, 0, 0, 0.07);
radio del borde: 0 0 10px 10px;
pantalla: flex;
justificar-contenido: flex-end;
alinear-elementos: centro;
acolchado: 0 3rem;
tipo de estilo de lista: ninguno;
}
.nav li.logo {
margen derecho: automático;
familia de fuentes: "Roboto", sans-serif;
tamaño de fuente: 1.5rem;
color: gris oscuro;
peso de fuente: 900;
sombra de texto: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px blanco;
}
.nav li: no (.logo) {
margen: 0 1rem;
acolchado: 0.5rem 1.5rem;
borde: rgba sólido de 2px (255, 255, 255, 0.3);
caja de sombra: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px blanco;
radio del borde: 10px;
familia de fuentes: "Roboto", sans-serif;
cursor: puntero;
transición: color 0,2 s de salida fácil, transformación 0,2 s de salida fácil;
color: gris oscuro;
}
.nav li: not (.logo): hover {
transformar: escala (1.05);
caja-sombra: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px blanco;
}
.nav li: not (.logo): focus {
esquema: ninguno;
transformar: escala (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px blanco, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) inserto, -4px -4px 10px inserto blanco;
}
.nav li: not (.logo): hover, .nav li: not (.logo): focus {
color: rojo anaranjado;
}

Código JavaScript

feather.replace ();

4. Texto y formas neumorficas

Utilice los siguientes fragmentos de código HTML y CSS para crear el texto y las formas neumorficas anteriores.

código HTML

Relacionados: La hoja de referencia de HTML Essentials

Circulo

Rosquilla

Cuadrado

Cuadrado liso

Vaso

Texto neumorfo

Bienvenidos a MUO

Código CSS

Relacionados: Ejemplos de código CSS simple que puede aprender en 10 minutos

*, *::antes después {
tamaño de caja: caja de borde;
}
:raíz {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0.5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0.5);
}
cuerpo {
margen: 0;
familia de fuentes: sans-serif;
altura mínima: 100vh;
pantalla: flex;
alinear-elementos: centro;
justificar-contenido: centro;
envoltura flexible: envoltura;
fondo: var (- nColor);
}
.n-comienzo,
.n-inset {
pantalla: flex;
alinear-elementos: centro;
justificar-contenido: centro;
}
.n-circle {
color de fondo: var (- nColor);
caja de sombra: var (- brShadow), var (- tlShadow);
radio de borde: 50%;
ancho: 200px;
altura: 200px;
margen: 10px;
}
.n-donut {
color de fondo: var (- nColor);
caja de sombra: var (- brShadow), var (- tlShadow);
radio de borde: 50%;
ancho: 200px;
altura: 200px;
margen: 10px;
}
.n-donut .n-inset {
color de fondo: var (- nColor);
caja de sombra: inserción var (- brShadow), inserción var (- tlShadow);
radio de borde: 50%;
ancho: 50%;
altura: 50%;
margen: 0;
}
.n-tumbler {
color de fondo: var (- nColor);
caja de sombra: var (- brShadow), var (- tlShadow);
radio de borde: 50%;
ancho: 200px;
altura: 200px;
margen: 10px;
}
.n-tumbler .n-outset {
color de fondo: var (- nColor);
caja de sombra: var (- brShadow), var (- tlShadow);
radio de borde: 50%;
ancho: 80%;
altura: 80%;
margen: 0;
}
.n-cuadrado {
color de fondo: var (- nColor);
caja de sombra: var (- brShadow), var (- tlShadow);
radio de borde: 0;
ancho: 200px;
altura: 200px;
margen: 10px;
}
.n-smooth-sq {
color de fondo: var (- nColor);
caja de sombra: var (- brShadow), var (- tlShadow);
radio de borde: 10%;
ancho: 200px;
altura: 200px;
margen: 10px;
}
.n-text {
color: var (- nColor);
sombra de texto: var (- brShadow), var (- tlShadow);
tamaño de fuente: 6em;
font-weight: negrita;
}

5. Botones neumorficos

Utilice los siguientes fragmentos de código HTML, CSS y JavaScript para crear los botones neuromórficos anteriores.

código HTML

Presione los botones




play_arrow


pausa





barajar

Código CSS

@import url (' https://fonts.googleapis.com/icon? familia = Material + Iconos ');
cuerpo{
color de fondo: # 6ec7ff;
}
.btn-holder {
bloqueo de pantalla;
margen: 0 automático;
margen superior: 64px;
alineación de texto: centro;
}
.Texto de introducción{
margen inferior: 48px;
familia de fuentes: 'Arenas movedizas', sans-serif;
color blanco;
tamaño de fuente: 18px;
}
.btn {
ancho: 110px;
altura: 110px;
tamaño de fuente: 30px;
radio del borde: 30px;
borde: ninguno;
color blanco;
alineación vertical: superior;
-webkit-transición: .6s entrada-salida fácil;
transición: .6s entrada-salida fácil;
}
.btn: hover {
cursor: puntero;
}
.btn: focus {
esquema: ninguno;
}
.btn: primero de tipo {
margen derecho: 30px;
}
.neumorphic {
fondo: degradado lineal (145deg, # 76d5ff, # 63b3e6);
caja de sombra: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
borde: rgba sólido de 3px (255, 255, 255, .4);
}
.neumorphic-pressed {
fondo: gradiente lineal (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: recuadro 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: recuadro 15px 15px 20px -20px rgba (0,0,0, .5);
sombra de cuadro: recuadro 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorphic: foco, .neumorphic: flotar, .neumorphic: foco, .neumorphic: hover, .neumorphic-presionado: foco, .neumorphic-presionado: hover {
borde: rgba sólido de 3px (46, 74, 112, .75);
}
.material-icon {
font-family: 'Iconos de material';
font-weight: normal;
estilo de fuente: normal;
tamaño de fuente: 32px;
pantalla: bloque en línea;
altura de línea: 1;
transformación de texto: ninguna;
espaciado entre letras: normal;
ajuste de palabras: normal;
espacio en blanco: nowrap;
dirección: ltr;
-webkit-font-smoothing: suavizado;
representación de texto: optimizarLegibilidad;
-moz-osx-font-smoothing: escala de grises;
configuración de características de fuente: 'liga';
}
#pause {
color: # 143664;
pantalla: ninguna;
}

Código JavaScript

función changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorphic");
btn.classList.toggle ("neumorphic-press");
if (btnPressed 'play-pause') {
tocar();
} else if (btnPressed 'shuffle-btn') {
barajar();
}
}
function play () {
var playBtn = document.getElementById ('reproducir');
var pauseBtn = document.getElementById ('pausa');
if (playBtn.style.display 'none') {
playBtn.style.display = 'bloquear';
pauseBtn.style.display = 'ninguno';
} demás {
playBtn.style.display = 'ninguno';
pauseBtn.style.display = 'bloquear';
}
}
función shuffle () {
var shuffleBtn = document.getElementById ('shuffle-btn');
if (shuffleBtn.style.color == 'blanco' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} demás {
shuffleBtn.style.color = 'blanco';
}
}

Si desea ver el código fuente completo utilizado en este artículo, aquí está el Repositorio de GitHub.

Nota: El código utilizado en este artículo es Con licencia del MIT.

Diseñe su sitio web con neumorfismo

Puede utilizar el concepto de diseño minimalista del neumorfismo para diseñar su sitio web. Proporciona un aspecto estéticamente agradable. Pero aún así, el neumorfismo tiene limitaciones de accesibilidad.

Hay diferentes formas de darle un aspecto elegante a un sitio web. Si desea diseñar cuadros suaves en su sitio web, pruebe la propiedad CSS de sombra de cuadro.

Yuvraj Chandra (33 Artículos publicados)

Yuvraj es estudiante de licenciatura en Ciencias de la Computación en la Universidad de Delhi, India. Le apasiona el desarrollo web Full Stack. Cuando no está escribiendo, está explorando la profundidad de diferentes tecnologías.

Más de Yuvraj Chandra