web-dev-qa-db-fra.com

Comment puis-je supprimer uniquement la partie supérieure d'une boîte-ombre?

J'utilise border-radius et box-shadow pour faire briller un élément.

Puis-je supprimer uniquement la partie supérieure du box-shadow?

Exemple live

div {
    margin-top: 25px;
    color: #fff;
    height: 45px;
    margin-top: -5px;
    z-index: -10;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: #000; /*#fff;*/
    border-top: 0px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
     -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
       -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
            box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
}

Edit: cette petite chose est le problème!enter image description here

cssbordercss3
25
Bakudan

Cela fonctionne, mais j'admettrai de ne pas savoir s'il existe un meilleur moyen (ou s'il est possible de ne pas ajouter d'élément wrapper). Utiliser plusieurs box-shadows serait une bonne idée, mais je n'arrive pas à le faire ressembler.

Voir:http://jsfiddle.net/thirtydot/8qEUc/3/

HTML:

<div id="bla">
    <div> something </div>
</div>

CSS:

#bla {
    overflow-y: hidden;
    padding: 0 10px 10px 10px;
    margin: 0 -10px
}
#bla > div {
    /* the CSS from your question here */
}
10
thirtydot

Puisque vous utilisez box-shadow, vous pouvez utiliser un pseudo-élément pour le créer et le placer sous votre div, en le plaçant de sorte que seules les parties nécessaires soient visibles: http://jsfiddle.net/kL8tR/60/

Il y a quelques notes importantes:

  • Le pseudo-élément doit avoir z-index: -1
  • La div elle-même doit avoir position: relative et non z-index

Pseudo-éléments + CSS3 = génial :)

12
kizu

@milo; n'est pas votre bordure supérieure, c'est une shadow que vous indiquez dans votre code 

pour supprimer la lueur supérieure, vous devez définir l'espacement vertical de votre ombre.

Ecrivez ceci dans votre css shadow:

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

& your peut générer à partir d’ici http://css3generator.com/

REMARQUE: il existe quatre propriétés de shadow: horizontal, vertical, blur & spread Pour shadow, vous pouvez définir inset pour elle.

8
sandeep

Vous pouvez essayer ce qui suit. Ma méthode utilise uniquement CSS.

Exemple Lien:http://jsfiddle.net/kL8tR/56/

div{
    margin-top: 25px;
    color: #fff;
    height: 45px;

    padding: 26px 24px 46px;

    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-top: none;

    -moz-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);

}

Fondamentalement, je crée des ombres multi-couches afin que la première ombre recouvre la seconde couche en masquant la partie supérieure.

Je l'ai déjà utilisé auparavant, voici ma référence:

Rechercher dans la section - Superposition de plusieurs ombres [ http://www.css3.info/preview/box-shadow/ ]

1
Marc Uberstein

vous pouvez simplement déplacer l'ombre vers le bas (déplacement vertical) et réduire le rayon de l'ombre, comme indiqué ci-dessous (remplacez l'astérisque par le nombre de pixels requis pour couvrir seulement l'ombre supérieure avec le cadre lui-même) :

box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);
1
Lobabob

Si vous utilisez un rayon de dispersion négatif et que vous calibrez les autres paramètres en fonction de vos besoins, vous obtiendrez l'effet souhaité.

Rayon négatif du rayon de l'ombre de la boîte CSS

div {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  -webkit-box-shadow: 5px 5px 10px -6px black;
  -moz-box-shadow: 5px 5px 10px -6px black;
  box-shadow: 5px 5px 10px -6px black;
}
<div></div>

0
Matt C