Résolu

La propriété box-shadow ne fonctionne pas

Bonsoir,


Je souhaite créer une ombre intérieure avec la propriété box-shadow en CSS, mais l'ombre n'apparaît pas sur le menu de navigation comme dans cette vidéo.


Voici mon code de HTML et CSS que j'ai fait :


<!-- navigation menu start -->
    <nav class="nav-menu">
        <div class="close-nav-menu outer-shadow hover-in-shadow">&times;</div>
        <div class="nav-menu-inner">
            <ul>
                <li><a href="#" class="inner-shadow active">accueil</a></li>
                <li><a href="#" class="outer-shadow hover-in-shadow">à propos</a></li>
                <li><a href="#" class="outer-shadow hover-in-shadow">prestations de service</a></li>
                <li><a href="#" class="outer-shadow hover-in-shadow">portfolio</a></li>
                <li><a href="#" class="outer-shadow hover-in-shadow">témoignage</a></li>
                <li><a href="#" class="outer-shadow hover-in-shadow">contactez</a></li>
            </ul>
        </div>
    </nav>
 <!-- navigation menu end -->


/* define custom css variables */
:root{
    --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px -3px #f8f8f8;
    --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
    --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px -3px #f8f8f8;
}
.outer-shadow{
    box-shadow: var(--outer-shadow);
}
.inner-shadow{
    box-shadow: var(--inner-shadow);
}
.hover-in-shadow{
    position: relative;
    z-index: 1;
}
.hover-in-shadow:hover{
    box-shadow: var(--outer-shadow-0);
}
.hover-in-shadow:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}
.hover-in-shadow:hover:after{
    box-shadow: var(--inner-shadow);
}
/*------------
navigation menu
--------------*/
.nav-menu{
    position: fixed;
    background-color: var(--bg-black-50);
    padding: 0 15px;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow-y: auto;
}
.nav-menu .close-nav-menu{
    height: 40px;
    width: 40px;
    display: block;
    font-size: 35px;
    line-height: 35px;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
    text-align: center;
    color: var(--text-black-600);
    transition: all 0.3s ease;
}
.nav-menu .close-nav-menu:after{
    border-radius: 50%;
}
.nav-menu-inner{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-menu ul{
   padding: 15px;
}
.nav-menu ul li{
    display: block;
    margin-bottom: 20px;
    text-align: center;
}
.nav-menu ul li:last-child{
    margin-bottom: 0;
}
.nav-menu ul li a{
    display: inline-block;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-black-700);
    padding: 5px 30px;
    text-transform: capitalize;
    border-radius: 30px;
    transition: all 0.3s ease;
}
.nav-menu ul li a:after{
    border-radius: 30px;
}


Merci d'avance pour vos réponses.

367 vues
12 mai 2022 à 20:04
Cette pub permet au site de vivre ...

Salut @Epeny14 ,


Désolé pour la réponse tardive, j'avais déjà trouvé la solution depuis quelques jours mais je n'ai pas eu le temps de te répondre avant 😅


Alors ce qui ne fonctionne pas c'est ça :


:root{
  --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px -3px #f8f8f8;
  --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
  --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px -3px #f8f8f8;
}



Il faut que tu mettes ça plutôt :


:root{
  --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
  --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
  --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
}


Si tu te demandes quel est la différence entre les 2 bout de code c'est le -3px tu peux uniquement mettre -x sur les 2 premiers arguments mais pas sur le dernier qui joue sur la porté de l'ombre 😁

Cette pub permet au site de vivre ...

4 commentaires

Salut @Clouder ,


J'ai compris que j'ai fait une erreur dans mon code CSS, car je n'étais pas attentif.


J'ai vérifié dans le tutoriel et j'ai vu ce code correction que tu m'as conseillé dans la vidéo.


:root{
  --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
  --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
  --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
}


La prochaine fois je ferais attention lorsque j'aurais le même problème.


Merci d'avoir répondu à ce topic. 👍👍👍

Salut @Epeny14 ,


Désolé pour la réponse tardive, j'avais déjà trouvé la solution depuis quelques jours mais je n'ai pas eu le temps de te répondre avant 😅


Alors ce qui ne fonctionne pas c'est ça :


:root{
  --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px -3px #f8f8f8;
  --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
  --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px -3px #f8f8f8;
}



Il faut que tu mettes ça plutôt :


:root{
  --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
  --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
  --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
}


Si tu te demandes quel est la différence entre les 2 bout de code c'est le -3px tu peux uniquement mettre -x sur les 2 premiers arguments mais pas sur le dernier qui joue sur la porté de l'ombre 😁

Bonjour @Clouder ,


J'utilise le navigateur Firefox.

Salut @Epeny14 ,


Tu utilises quel navigateur ? Chrome, Edge, Firefox, etc. ?

Cette pub permet au site de vivre ...