🎨Você conhece o Glassmorphism e Neomorphism [CSS]

Glassmorphism e Neumorphism

O glassmorphism e o neumorphism são propostas de design bem minimalistas e que visam reproduzir uma sensação mais realista nos componentes.

O neumorphism nos lembra muito o o design do Mac OS em meados de 2007 enquanto o glassmorphism este é bem presente no mais recente Mac OS Big Sur além é claro de sua participação no Windows Vista e IOS 7.

Glassmorphism

O glassmorphism como o nome já diz, é uma tentativa de simular uma película de vidro na aplicação, está sendo muito aplicada em cards, modais e etc… componentes mais quadrados ou retangulares.

No Glassmorphism focamos mais em trabalhar com poucas propriedades para conquistar o efeito de vidro, são elas:

• background: Irá determinar a cor do nosso vidro e precisa ter uma opacidade mais próxima de 0 para que tenhamos a transparência do componente.
• box-shadow: É crucial para trazer a impressão do relevo, como se realmente tivéssemos uma placa de vidro por cima da aplicação
• border-radius: Traz uma certa elegância para o componente, com um leve arredondamento das bordas.
• border: Neste cenário é opcional, mas ajuda a reforçar o foco no “vidro”.
• backdrop-filter blur: É ele que aplica o efeito de embaçado, quando maior seu valor menos foco vamos ter do fundo.

Neumorphism

O neumorphism é bem marcado pela sensação de relevo, os componentes podem passar a visão de estarem elevados ou afundados em relação ao plano de fundo.

No neumorphism pode se dar uma aparência bem simples, também temos uma implementação ainda mais simples, toda a codificação básica do CSS é feita em cima de 3 propriedades:

• background: É necessário que o background do componente seja o mesmo do plano de fundo, para que a sensação de relevo seja transmitida.
• border-radius: Os componentes no neumorphism tem um bom arredondamento das bordas, é uma característica do estilo.
• box-shadow: É onde mora o segredo, o controle do sombreamento, tando interno quanto externo é o que de fato da vida ao neumorphism.

https://flaviomartinssilva.medium.com/glassmorphism-e-neumorphism-pondo-em-prática-as-possíveis-tendências-de-ui-660678383261

Imagem: do meu Jogo da Memória do Batman com Glassmorphism, deixem sua opinião (comentem) e deixe o seu like.