Horizontal Menu Neumorphism

Elegant navbar in neumorphism

by dougkusanagi

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

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);
}