Neumorfismo é uma nova tendência de design que combina design plano e skeuomorfismo. É uma maneira minimalista de projetar com um plástico macio extrudado, quase em estilo 3D. Atualmente, este design é tendência na Internet e é amplamente utilizado por designers e desenvolvedores.

Se você quiser experimentar o neumorfismo em seu próximo projeto, aqui estão alguns trechos de código para você começar.

1. Cartões Neumórficos

Use os seguintes trechos de código HTML e CSS para criar os cartões neumorficos acima.

Código HTML

Projeto

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

consulte Mais informação
















Código

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





instagram viewer


consulte Mais informação
















Lançar

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

consulte Mais informação

Código CSS

@import url (' https://fonts.googleapis.com/css? família = Poppins: 400.500.600.700.800.900 & display = swap ');
*
{
margem: 0;
preenchimento: 0;
dimensionamento da caixa: caixa de borda;
família da fonte: 'Poppins', sans-serif;
}
corpo
{
display: flex;
justificar o conteúdo: centro;
alinhar-itens: centro;
altura mínima: 100vh;
plano de fundo: # ebf5fc;
}
.recipiente
{
posição: relativa;
display: flex;
justify-content: space-around;
alinhar-itens: centro;
flex-wrap: wrap;
largura: 1100px;
}
.container .card
{
largura: 320px;
margem: 20px;
preenchimento: 40px 30px;
plano de fundo: # ebf5fc;
raio da borda: 40px;
box-shadow: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: hover
{
sombra da caixa: inserção -6px -6px 20px rgba (255,255,255,0.5), inserção 6px 6px 20px rgba (0,0,0,0,05);
}
.container .card .imgBx
{
posição: relativa;
alinhamento de texto: centro;
}
.container .card .imgBx img
{
largura máxima: 120px;
}
.container .card .contentBx
{
posição: relativa;
margem superior: 20px;
alinhamento de texto: centro;
}
.container .card .contentBx h2
{
cor: # 32a3b1;
peso da fonte: 700;
tamanho da fonte: 1,4em;
espaçamento entre letras: 2px;
}
.container .card .contentBx p
{
cor: # 32a3b1;
}
.container .card .contentBx a
{
display: bloco embutido;
preenchimento: 10px 20px;
margem superior: 15px;
raio da borda: 40px;
cor: # 32a3b1;
tamanho da fonte: 16px;
decoração de texto: nenhum;
sombra da caixa: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: hover
{
sombra da caixa: inserção -4px -4px 10px rgba (255,255,255,0.5), inserção 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: hover span
{
display: bloco;
transformar: escala (0,98);
}
.container .card: hover .imgBx,
.container .card: hover .contentBx
{
transformar: escala (0,98);
}

2. Forma Neumorfica

Use os seguintes trechos de código HTML e CSS para criar a forma neumórfica acima.

Código HTML

Inscrever-se










 Conecte-se

Código CSS

corpo, html {
cor de fundo: # EBECF0;
}
corpo, p, entrada, selecionar, área de texto, botão {
família da fonte: "Montserrat", sem serifa;
espaçamento entre letras: -0,2px;
tamanho da fonte: 16px;
}
div, p {
cor: #BABECC;
sombra do texto: 1px 1px 1px #FFF;
}
Formato {
preenchimento: 16px;
largura: 320px;
margem: 0 automático;
}
.segment {
preenchimento: 32px 0;
alinhamento de texto: centro;
}
botão, entrada {
fronteira: 0;
esboço: 0;
tamanho da fonte: 16px;
raio da borda: 320px;
preenchimento: 16px;
cor de fundo: # EBECF0;
sombra do texto: 1px 1px 0 #FFF;
}
rótulo {
display: bloco;
margem inferior: 24px;
largura: 100%;
}
entrada {
margem direita: 8px;
box-shadow: inserção 2px 2px 5px #BABECC, inserção -5px -5px 10px #FFF;
largura: 100%;
dimensionamento da caixa: caixa de borda;
transição: todos os 0.2s facilitam a entrada;
aparência: nenhuma;
-webkit-aparência: nenhum;
}
input: focus {
box-shadow: inserir 1px 1px 2px #BABECC, inserir -1px -1px 2px #FFF;
}
botão {
cor: # 61677C;
intensidade da fonte: Negrito;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
transição: todos os 0.2s facilitam a entrada;
cursor: ponteiro;
peso da fonte: 600;
}
botão: hover {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
botão: ativo {
box-shadow: inserir 1px 1px 2px #BABECC, inserir -1px -1px 2px #FFF;
}
botão .icon {
margem direita: 8px;
}
button.unit {
raio da borda: 8px;
altura da linha: 0;
largura: 48px;
altura: 48px;
display: inline-flex;
justificar o conteúdo: centro;
alinhar-itens: centro;
margem: 0 8px;
tamanho da fonte: 19,2 px;
}
button.unit .icon {
margem direita: 0;
}
button.red {
display: bloco;
largura: 100%;
cor: # AE1100;
}
.input-group {
display: flex;
alinhar-itens: centro;
justify-content: flex-start;
}
.input-group label {
margem: 0;
flex: 1;
}

3. Neumorphic Navbar

Use os seguintes trechos de código HTML, CSS e JavaScript para criar a barra de navegação neumorfa acima.

Código HTML

Relacionado: Melhores sites para exemplos de codificação de HTML de qualidade

Neumorphic Navbar

Código CSS

* {
margem: 0;
preenchimento: 0;
dimensionamento da caixa: caixa de borda;
}
corpo {
cor de fundo: #efeeee;
}
.nav {
largura: 100vw;
altura: 100px;
cor de fundo: #efeeee;
sombra da caixa: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
border-radius: 0 0 10px 10px;
display: flex;
justify-content: flex-end;
alinhar-itens: centro;
preenchimento: 0 3rem;
tipo de estilo de lista: nenhum;
}
.nav li.logo {
margem direita: automático;
família da fonte: "Roboto", sans-serif;
tamanho da fonte: 1.5rem;
cor: dimgray;
peso da fonte: 900;
sombra do texto: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px branco;
}
.nav li: not (.logo) {
margem: 0 1rem;
preenchimento: 0,5 rem 1,5 rem;
borda: rgba sólido 2px (255, 255, 255, 0,3);
sombra da caixa: 4px 4px 6px 0 rgba (0, 0, 0, 0,1), -4px -4px 6px branco;
raio da borda: 10px;
família da fonte: "Roboto", sans-serif;
cursor: ponteiro;
transição: cor 0,2s atenuação, transformar 0,2s atenuação;
cor: dimgray;
}
.nav li: not (.logo): hover {
transformar: escala (1,05);
sombra da caixa: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px branco;
}
.nav li: not (.logo): focus {
esboço: nenhum;
transformar: escala (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0,1), -4px -4px 10px branco, 4px 4px 10px 0 rgba (0, 0, 0, 0,1) inserido, -4px -4px 10px inserido branco;
}
.nav li: not (.logo): hover, .nav li: not (.logo): focus {
cor: laranja;
}

Código JavaScript

feather.replace ();

4. Texto e formas neumórficas

Use os seguintes trechos de código HTML e CSS para criar o texto e as formas neumorais acima.

Código HTML

Relacionado: A folha de referências do HTML Essentials

Círculo

Rosquinha

Quadrado

Quadrado liso

Tumbler

Texto Neumorfo

Bem-vindo ao MUO

Código CSS

Relacionado: Exemplos de código CSS simples que você pode aprender em 10 minutos

*, *::antes Depois {
dimensionamento da caixa: caixa de borda;
}
:raiz {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0.5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0,5);
}
corpo {
margem: 0;
família da fonte: sans-serif;
altura mínima: 100vh;
display: flex;
alinhar-itens: centro;
justificar o conteúdo: centro;
flex-wrap: wrap;
fundo: var (- nColor);
}
.n-início,
.n-inset {
display: flex;
alinhar-itens: centro;
justificar o conteúdo: centro;
}
.n-circle {
cor de fundo: var (- nColor);
sombra da caixa: var (- brShadow), var (- tlShadow);
raio da borda: 50%;
largura: 200px;
altura: 200px;
margem: 10px;
}
.n-donut {
cor de fundo: var (- nColor);
sombra da caixa: var (- brShadow), var (- tlShadow);
raio da borda: 50%;
largura: 200px;
altura: 200px;
margem: 10px;
}
.n-donut .n-inset {
cor de fundo: var (- nColor);
sombra da caixa: inserção var (- brShadow), inserção var (- tlShadow);
raio da borda: 50%;
largura: 50%;
altura: 50%;
margem: 0;
}
.n-tumbler {
cor de fundo: var (- nColor);
sombra da caixa: var (- brShadow), var (- tlShadow);
raio da borda: 50%;
largura: 200px;
altura: 200px;
margem: 10px;
}
.n-tumbler .n-outset {
cor de fundo: var (- nColor);
sombra da caixa: var (- brShadow), var (- tlShadow);
raio da borda: 50%;
largura: 80%;
altura: 80%;
margem: 0;
}
.n-square {
cor de fundo: var (- nColor);
sombra da caixa: var (- brShadow), var (- tlShadow);
raio da borda: 0;
largura: 200px;
altura: 200px;
margem: 10px;
}
.n-smooth-sq {
cor de fundo: var (- nColor);
sombra da caixa: var (- brShadow), var (- tlShadow);
raio da borda: 10%;
largura: 200px;
altura: 200px;
margem: 10px;
}
.n-text {
cor: var (- nColor);
sombra de texto: var (- brShadow), var (- tlShadow);
tamanho da fonte: 6em;
intensidade da fonte: Negrito;
}

5. Botões Neumórficos

Use os seguintes trechos de código HTML, CSS e JavaScript para criar os botões neumorosos acima.

Código HTML

Aperte os botões




play_arrow


pausa





embaralhar

Código CSS

@import url (' https://fonts.googleapis.com/icon? família = Material + Ícones ');
corpo{
cor de fundo: # 6ec7ff;
}
.btn-holder {
display: bloco;
margem: 0 automático;
margem superior: 64px;
alinhamento de texto: centro;
}
.texto de introdução{
margem inferior: 48px;
família da fonte: 'Quicksand', sans-serif;
cor branca;
tamanho da fonte: 18px;
}
.btn {
largura: 110px;
altura: 110px;
tamanho da fonte: 30px;
raio da borda: 30px;
fronteira: nenhum;
cor branca;
alinhamento vertical: topo;
-webkit-transit: .6s Easy-in-out;
transição: .6s de fácil entrada;
}
.btn: hover {
cursor: ponteiro;
}
.btn: focus {
esboço: nenhum;
}
.btn: primeiro do tipo {
margem direita: 30px;
}
.neumorphic {
fundo: gradiente linear (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30px -30px 40px # 7fe5ff;
borda: 3px solid rgba (255, 255, 255, .4);
}
.neumorphic-pressionado {
fundo: gradiente linear (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: inserir 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: inserir 15px 15px 20px -20px rgba (0,0,0, .5);
sombra da caixa: inserção 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorphic: focus, .neumorphic: hover, .neumorphic: focus, .neumorphic: hover, .neumorphic-pressionado: focus, .neumorphic-pressionado: hover {
borda: 3px solid rgba (46, 74, 112, 0,75);
}
.material-icon {
família de fontes: 'Ícones de materiais';
peso da fonte: normal;
estilo da fonte: normal;
tamanho da fonte: 32px;
display: bloco embutido;
altura da linha: 1;
transformação de texto: nenhum;
espaçamento entre letras: normal;
quebra automática de linha: normal;
espaço em branco: nowrap;
direção: ltr;
-webkit-font-smoothing: suavizado;
renderização de texto: optimizeLegibility;
-moz-osx-font-smoothing: tons de cinza;
font-feature-settings: 'liga';
}
#pausa {
cor: # 143664;
Mostrar nenhum;
}

Código JavaScript

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumórfico");
btn.classList.toggle ("neumorphic-pressionado");
if (btnPressione 'pausa de reprodução') {
Reproduzir();
} else if (btnPressed 'shuffle-btn') {
embaralhar ();
}
}
function play () {
var playBtn = document.getElementById ('reproduzir');
var pauseBtn = document.getElementById ('pause');
if (playBtn.style.display 'none') {
playBtn.style.display = 'bloquear';
pauseBtn.style.display = 'nenhum';
} senão {
playBtn.style.display = 'none';
pauseBtn.style.display = 'bloquear';
}
}
function shuffle () {
var shuffleBtn = document.getElementById ('shuffle-btn');
if (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} senão {
shuffleBtn.style.color = 'branco';
}
}

Se você quiser dar uma olhada no código-fonte completo usado neste artigo, aqui está o Repositório GitHub.

Observação: O código usado neste artigo é Licenciado MIT.

Estilize seu site com neumorfismo

Você pode usar o conceito de design minimalista de neumorfismo para estilizar seu site. Ele fornece uma aparência esteticamente agradável. Mesmo assim, o neumorfismo tem limitações de acessibilidade.

Existem diferentes maneiras de dar uma aparência elegante a um site. Se você quiser estilizar caixas brandas em seu site, experimente a propriedade CSS box-shadow.

Yuvraj Chandra (33 artigos publicados)

Yuvraj é estudante de graduação em Ciência da Computação na Universidade de Delhi, na Índia. Ele é apaixonado por Full Stack Web Development. Quando não está escrevendo, ele está explorando a profundidade de diferentes tecnologias.

Mais de Yuvraj Chandra