ombre portée bas seulement css3

Question

Est-il possible de laisser tomber l’ombre que sur le fond ?. J’ai un menu avec 2 images côté de l’autre. Je ne veux pas une ombre juste parce qu’elle superpose à l’image de droite. Je n’aime pas utiliser les images car il s’agit donc là une façon de laisser tomber que sur le fond comme :

``ou similaire ?

Answer 1

Mise à JOUR 3

Tous mes réponses précédentes ont été à l'aide de supplémentaires de balisage pour obtenir cet effet, ce qui n'est pas forcément nécessaire. Je pense que c'est un beaucoup plus propre solution... le seul truc, c'est de jouer avec les valeurs pour obtenir le bon positionnement de l'ombre ainsi que le droit sur la force, l'opacité de l'ombre. Voici un nouveau violon, à l'aide de pseudo-éléments:

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

Mise à JOUR 2

Apparemment, vous pouvez le faire avec un paramètre supplémentaire à la box-shadow CSS que tout le monde vient de rappeler. Voici la démo:

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

Ce serait une meilleure solution. Le paramètre supplémentaire qui est ajouté est décrit comme:

La quatrième longueur est un écart distance. Les valeurs positives de provoquer l' forme de l'ombre à se développer dans toutes les directions par le rayon spécifié. Les valeurs négatives cause de la forme de l'ombre de contrat.

Mise à JOUR

Découvrez la démo sur jsFiddle: http://jsfiddle.net/K88H9/4/

Ce que j'ai fait était de créer une "ombre " élément" qui se cache derrière l'élément que vous voulez avoir une ombre. J'ai fait la largeur de l'ombre "élément" pour être exactement moins large que les éléments réels par 2 fois l'ombre que vous spécifiez; ensuite, j'ai aligné correctement.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

Réponse Originale À Cette Question

Oui, vous pouvez le faire avec la même syntaxe que vous avez fournis. La première valeur contrôle la position horizontale et la deuxième valeur contrôle la position verticale. Donc, il suffit de régler le premier de la valeur à 0px et la seconde à ce décalage que vous souhaitez comme suit:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

Pour plus d'informations sur la boîte ombres, découvrez ces:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

J'espère que cette aide.

Answer 2

Il suffit d’utiliser le paramètre de propagation pour faire de l’ombre plus petits :

``

Démonstration en direct : http://dabblet.com/gist/a8f8ba527f5cff607327

Pour ne pas voir l’ombre sur les côtés, la (valeur absolue de la) rayon de propagation (4ème paramètre) doit être le même que le rayon de flou (3ème paramètre).

Answer 3

Si vous avez un arrière-plan fixe, vous pouvez masquer l'ombre à certaines frontières et de le conserver sur les autres:

Juste cacher des ombres avec un masquage de l'ombre ayant la même couleur de l'arrière-plan et le flou = 0, exemple:

box-shadow: -6px 0 white, 6px 0 white, 0 6px 4px -2px black;

Notez que la taille de withe ombres doit être au moins égale à la plus value de l'ombre noire.

J'ai ajouté un peu d'écart négatif (-2px) à l'ombre noire pour l'empêcher de extendig delà les coins.

Ici, le violon (faire de l'ombre rouge au lieu de blanc pour voir comment il fonctionne!)

Answer 4

Je pense que c’est ce que vous recherchez ?

Answer 5

Il est toujours préférable de lire les spécifications. Il n’y a pas `` bien, et comme le souligne Lea vous devrez placer toujours la propriété non préfixée en bas, après ceux avec le préfixe.

Alors il a :