Eu usei o estilo do Neumorfismo, que é uma tendência bem "recente" entre designs de interface e tem ficado cada dia mais popular, ele visa simular um efeito tridimensional dos objetos, fazendo-os parecer estar "saltando" da tela ou estar sendo "pressionados", como um botão do mundo real.
A forma que isso é feita é bem simples, normalmente é feito o uso de 2 tipos de sombra simultaneamente, uma sombra clara simulando a luz e uma escura pra o que seria a sombra "real".
Vou deixar o tutorial o mais simples possível para que qualquer Dev em qualquer nível com facilidade, portanto não vou fazê-lo responsivo, ou seja, ele não vai se adequar pra telas menores. Mas se tiver interesse, por favor comente se gostaria que eu fizesse um tutorial sobre isso.
Requisitos:
- Somente um editor de texto (estarei usando o vscode mais nada impede que use até mesmo seu bloco de notas no windows).
Vamos começar criando a base do nosso menu, uma página html simples. Abra seu editor e cole o seguinte código e salve como index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Menu Horizontal</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style-neumorphic.css">
</head>
<body class="">
<nav class="navbar">
<h2>
<a href="#">
Dot<span>.</span>Perfect
</a>
</h2>
<div class="menu">
<a href="#" class="active">início</a>
<a href="#">sobre</a>
<a href="#">projetos</a>
<a href="#">contato</a>
</div>
</nav>
</body>
</html>Esse é um documento básico de HTML que no cabeçalho <head> chama apenas uma fonte do google e um arquivo css chamado "style-neumorphic.css" que contém os estilos do nosso menu.
No corpo do documento temos a estrutura do nosso menu que começa com um elemento <nav> que é usado comumente pra menus e conjuntos de links de navegação.
Dentro dele temos um <h2> que vai ser usado como o logo do nosso menu. E por último a lista dos links do menu dentro de uma <div> com id menu para ser usado de referência no nosso css.
Explicado nosso html, crie uma nova pasta no mesmo diretório do index.html chamada css e dentro crie um arquivo chamado "style-neumorphic.css" sem aspas. Dentro dele coloque as seguintes linhas de código css:
:root {
--color-primary: rgb(150, 149, 227);
--color-secondary: rgb(66, 66, 96);
--color-background-light: #ebe8ef;
--color-background-dark: rgb(26, 26, 40);
--color-text-light: rgb(255, 255, 255);
--color-text-dark: rgb(66, 66, 96);
}
* {
margin: 0;
padding: 0;
}
body {
background-color: var(--color-background-light);
}
body.dark {
background-color: var(--color-background-dark);
}
.navbar {
min-height: 60px;
margin: 12px 14px;
color: rgb(26, 25, 28);
box-shadow: 2px 2px 8px #0d27502c, -2px -2px 8px #ffffff;
border-radius: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
body.dark .navbar {
background-color: var(--color-background-dark);
color: var(--color-text-light);
box-shadow: 2px 2px 4px rgb(17, 17, 27), -2px -2px 4px rgb(38, 38, 60);
}
.navbar h2 span{
color: var(--color-primary);
}
.navbar h2 {
font-family: Oswald;
font-size: 1.5rem;
font-weight: 600;
margin-left: 22px;
color: var(--color-text-dark);
}
body.dark .navbar h2 {
color: rgb(255, 255, 255);
}
.navbar .menu {
font-family: 'Maven Pro';
font-size: 1.1rem;
font-weight: light;
margin-right: 22px;
}
.navbar a {
text-decoration: none;
color: var(--color-secondary);
padding: 6px 16px;
border-radius: 50px;
vertical-align: middle;
}
.navbar .menu a.active,
.navbar .menu a:hover,
.navbar .menu a:focus {
background-color: var(--color-primary);
color: rgb(255, 255, 255);
}
body.dark .navbar a {
color: rgb(255, 255, 255);
}
Após salvar, o seu menu agora está pronto pra ser testado. Basta clicar com botão direito e abrir com seu navegador (um navegador moderno de verdade, não o internet explorer versão 1).
Um documento css é separado por regras que servem para atribuir estilos à determinado seletor. Por exemplo para definir a cor do texto de um elemento podemos usar como seletor uma id que sempre inicia com um (#), uma classe que sempre inicia com um ponto (.) ou uma hierarquia dizendo para pegar por exemplo todos os parágrafos (elemento <p>) que estejam dentro de uma div escreveríamos div p.
Quanto ao nosso código nós começamos definindo variáveis, um dos recursos mais interessantes e recentes do CSS. Pra isso usamos o seletor ::root, damos um nome pra nossa varável que deve começar com dois hífens (traços --) e atribuímos um valor, no nosso caso os valores são cores, mas poderíam ser alguma medida em pixels como 30px ou em viewport height como 50vh que seria metade da altura da tela do dispositivo.
Após isso resetei todos os espaçamentos de todos os elementos com o seletor (*) sem parênteses e atribuindo a ele margin (espaçamento externo) e padding (espaçamento interno).
Em seguida dei ao elemento <body> uma cor de fundo com background-color e a cor de fundo foi definida como uma das variáveis criadas no início, para resgatar o valor de uma variável é necessário usar a "função" var(--nome-da-variável). E informei que se o <body> contivesse a classe dark, teria uma cor escura.
Com esse mínimo de conhecimento e sabendo um pouquinho de inglês você consegue deduzir o que cada linha faz, caso esteja com dúvidas na aba do seu navegador aberto com o menu, clique com o botão direito do mouse e em seguida em "inspecionar elemento" com isso você consegue ver cada elemento HTML e por quais regras CSS estão sendo afetados.
Espero que tenha aprendido mesmo que algo pequeno com esse tutorial, e até a próxima dev.