Kevin Powell - Community•5mo ago

Animation on Navigation Bar

Hi guys, I am trying to create an animation similar to the one Kevin Powell made (refer to the attached picture). However, the issue is that I am unable to replicate it exactly because it's in my navigation bar and not a simple rectangle. Additionally, I would like to implement a diagonal animation, as shown in the attached paint picture. Could you please assist me with this?

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Critiques et Évaluations | Call of Duty</title>
</head>

<body>

    <header>
        <img src="img/Call-of-Duty-Logo.png" alt="Call-of-Duty-Logo-Accueil">
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="evaluation.html">Évalutation</a></li>
                <li><a href="#">Critiques</a></li>
                <li><a href="#">Nos Réseaux Sociaux</a></li>
                <li><a href="#">Nous Contacter</a></li>
            </ul>
        </nav>
    </header>

    <div class="nav">

    </div>

</body>

</html>

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Critiques et Évaluations | Call of Duty</title>
</head>

<body>

    <header>
        <img src="img/Call-of-Duty-Logo.png" alt="Call-of-Duty-Logo-Accueil">
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="evaluation.html">Évalutation</a></li>
                <li><a href="#">Critiques</a></li>
                <li><a href="#">Nos Réseaux Sociaux</a></li>
                <li><a href="#">Nous Contacter</a></li>
            </ul>
        </nav>
    </header>

    <div class="nav">

    </div>

</body>

</html>

8 Replies

smurf•5mo ago

/* Palette de couleurs: https://coolors.co/ */
$hard-black: #191b1c;
$soft-black: #313638;
$silver: #B5B5AE;
$soft-silver: #E0DFD5;
$soft-white: #E8E9EB;

/* Fonts importés */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

body {
    background-color: $hard-black;
    margin: 0;
    padding: 0;
}

header {
    img {
        margin-left: 8rem;
        width: 20rem;
        margin-top: 2rem;
    }

    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-right: 8rem;
    }

    a {
        color: $soft-white;
        text-decoration: none;
    }

    li:not(:first-child) {
        margin-left: 3rem;
    }

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    font-size: 1.4rem;
    font-family: "Black Ops One", system-ui;
}

/* Palette de couleurs: https://coolors.co/ */
$hard-black: #191b1c;
$soft-black: #313638;
$silver: #B5B5AE;
$soft-silver: #E0DFD5;
$soft-white: #E8E9EB;

/* Fonts importés */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

body {
    background-color: $hard-black;
    margin: 0;
    padding: 0;
}

header {
    img {
        margin-left: 8rem;
        width: 20rem;
        margin-top: 2rem;
    }

    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-right: 8rem;
    }

    a {
        color: $soft-white;
        text-decoration: none;
    }

    li:not(:first-child) {
        margin-left: 3rem;
    }

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    font-size: 1.4rem;
    font-family: "Black Ops One", system-ui;
}

smurf•5mo ago

EIO•5mo ago

You would need to spell the issues out one by one. Then, break them down so we can tackle them on their own merit. So, if I'm correct, you have ONLY 2 major issues: 1. Replicating the border and glow effect on your nav 2. Making a diagonal border also on your nav Is that right?

smurf•5mo ago

Yes thats my issues

EIO•5mo ago

Alright. 1. The effect is basically a div with a nested div, arranged in such a way that the nested div is just a little smaller than the parent div and it is centered within the parent div. The background of the parent div is a gradient. While the background of the child div is a solid color. And with that, your border is set. For the glow, you can just play with box-shadow and you can generate it to any extent. Of course, remember to set the background of the main wrapper (body or div) 2. I think a clearer demo of what exactly you want to achieve would be needed. In order to know what to utilize and how to approach it.

smurf•5mo ago

How would i be able to make a diagonal div connected with the other div so it follow the same line ?

EIO•5mo ago

From what I understand you are trying to do, you will need to play a lot with absolute positioning. Where you have another div rotated and conjoined in some way to the original one. I can only be very specific if I see the code to start with.

smurf•5mo ago

Thanks i’ll try this but it looks very complicated for my level. I’ll give it a try

Gaming

Programming

Animation on Navigation Bar