web-dev-qa-db-fra.com

CSS3 Box Shadow en haut, à gauche et à droite uniquement

Salutations,

J'essaie d'appliquer une ombre de zone CSS3 uniquement au haut, à la droite et à la gauche d'une DIV dont le rayon correspond au résultat du code CSS suivant (moins l'ombre du bas)

 #div {
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

Quel serait le meilleur moyen d'y parvenir?

Merci!

UPDATE Cette ombre sera appliquée à une barre de navigation sur une page, la barre est positionnée en haut du conteneur principal DIV. Ce que j'essaie d'accomplir est de continuer l'ombre de la boîte de la DIV principale sur la barre de navigation, qui se trouve au-dessus de celle-ci, mais sans ombre inférieure sur la barre de navigation. Jetez un coup d'œil au site lui-même pour voir de quoi je parle, plus facile que d'ajouter tout le code HTML et CSS ici.

UPDATE 2 Étant donné que la DIV avec laquelle je travaille est singulière, plutôt que d'essayer de placer une ombre sur chaque navigateur, j'ai choisi de la modifier comme suit:

-webkit-box-shadow: 0px -4px 7px #e6e6e6;
    -moz-box-shadow: 0px -4px 7px #e6e6e6;
    box-shadow: 0px -4px 7px #e6e6e6;

Cela rend le sommet de l'ombre très visible, mais c'est ce que j'essaie d'accomplir. Si quelqu'un connaît un moyen de conserver l'ombre de la même apparence au conteneur DIV, veuillez me le faire savoir. Merci!

css3
43
NightMICU

C’est mieux si vous couvrez simplement la partie inférieure avec une autre div et que vous obtenez une ombre portée uniforme dans tous les domaines.

#servicesContainer {
  /*your css*/
  position: relative;
}

et c'est réparé! comme par magie!

18
Duopixel

utiliser la valeur de propagation ...

box-shadow a les valeurs suivantes

box-shadow: x y blur spread color;

afin que vous puissiez utiliser quelque chose comme ..

box-shadow: 0px -10px 10px -10px black;

UPDATE: j'ajoute un jsfiddle

26
Orlando

Vous pouvez donner plusieurs valeurs à box-shadow property
par exemple

-moz-box-shadow: 0px 10px 12px 0px #000,
                    0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
                    0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
            0px -10px 12px 0px #000;

c'est une ombre portée vers gauche et droite seulement, vous pouvez l'adapter à vos besoins 

14
Artur Keyan

J'ai trouvé un moyen de couvrir l'ombre avec ": after", voici mon code:

#div:after {
    content:"";
    position:absolute;
    width:5px;
    background:#fff;
    height:38px;
    top:1px;
    right:-5px;
}
7
yichengliu

Le code suivant m'a permis de créer un ombrage du côté droit:

-moz-box-shadow: inset -10px 0px 10px -10px #000;
-webkit-box-shadow: inset -10px 0px 10px -10px #000;
box-shadow: inset -10px 0px 10px -10px #000;

J'espère que ça va aider !!!!

4
Ya Basha

Je sais que c'est très vieux, mais aucune de ces réponses ne m'a aidé, alors j'ajoute ma réponse. Ceci, comme la réponse de @ yichengliu, utilise l'élément Pseudo ::after.

#div {
    position: relative;
}



#div::after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    z-index: -1;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
}

/*or*/

.filter.right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: white;
    z-index: -1;

    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}

Fiddle

Si vous décidez de changer le X de l'ombre portée (première mesure en pixel du drop-shadow ou du box-shadow), changer la largeur vous aidera à éviter l'apparence d'un espace blanc entre le div et l'ombre. 

Si vous décidez de changer le Y de l'ombre portée (deuxième mesure en pixels du drop-shadow ou du box-shadow), changer la hauteur vous aidera pour la même raison que ci-dessus.

1
Jaketr00

J'avais le même problème et je cherchais une idée possible pour résoudre ce problème.

J'avais déjà du CSS en place pour mes onglets et voici ce qui a fonctionné pour moi:

(Notez spécifiquement le padding-bottom: 2px; à l'intérieur de #tabs #selected a {. Cela cache parfaitement le box-shadow inférieur et fonctionne parfaitement pour moi avec le code CSS suivant.)

#tabs {
    margin-top: 1em;
    margin-left: 0.5em;
}
#tabs li a {
    padding: 1 1em;
    position: relative;
    top: 1px;
    background: #FFFFFF;
}
#tabs #selected {
    /* For the "selected" tab */
    box-shadow: 0 0 3px #666666;
    background: #FFFFFF;
}
#tabs #selected a {
    position: relative;
    top: 1px;
    background: #FFFFFF;
    padding-bottom: 2px;
}
#tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#tabs li {
    float: left;
    border: 1px solid;
    border-bottom-width: 0;
    margin: 0 0.5em 0 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

Je pensais que cela serait une autre solution possible pour tous ceux qui consultent SO à ce sujet.

1
Mikolaj

Ajouter une réponse séparée parce que c'est radicalement différent.

Vous pouvez utiliser rgba et définir un canal alpha faible (pour obtenir la transparence) afin de rendre votre ombre portée moins visible.

Essayez quelque chose comme ça (jouez avec le .5)

-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);

J'espère que cela t'aides!

1
jdhartley
#div:before {
 content:"";
 position:absolute;
 width:100%;
 background:#fff;
 height:38px;
 top:1px;
 right:-5px;
}
0
Ravi Bhoraniya