4

ūüé®Voc√™ conhece o Glassmorphism e Neomorphism [CSS]

#Equipe Motivada #JavaScript #CSS
‚ö°Eros Lima
‚ö°Eros Lima

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.

3
56

Coment√°rios (3)

1
Letícia

Letícia

15/02/2021 16:49

muito legal espero poder chegar nesse nivél um dia :)

1
J

Jullya Prado

15/02/2021 15:53

Eu achei bem interessante, parabéns <3

1
Jos√© J√ļnior

Jos√© J√ļnior

15/02/2021 15:14

Boa tarde, Big Eros.

Eu curto muito essa "pegada" minimalista, acredito que deixa a experi√™ncia do usu√°rio muito mais centrada, isto √©, sem distra√ß√Ķes que tiram a aten√ß√£o da principal finalidade da aplica√ß√£o.


P.S.: Vamos ativar o Windows kkk


Abraços, nobre!

Jr.ūüĎ®‚ÄćūüíĽFull-Stack Developer - JavaScript | React.js | Next.js | Angular | Node.js | Python | .NET | C# | Scientific Researcher | DevSecOps | Cyber Sec. Enthusiast

Brasil