web-dev-qa-db-fra.com

ombre portée seulement en bas css3

Y at-il un moyen de déposer l'ombre uniquement sur le fond? J'ai un menu avec 2 images côte à côte. Je ne veux pas d'une ombre droite car elle chevauche la bonne image. Je n'aime pas utiliser les images pour cela, donc existe-t-il un moyen de le déposer uniquement sur le fond, comme: 

box-shadow-bottom: 10px #FFF; ou similaire?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
csscss3
207
damage000

MISE À JOUR 4

Identique à la mise à jour 3 mais avec les CSS modernes (= moins de règles) de sorte qu'aucun positionnement spécial sur le pseudo-élément n'est requis.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}
<div id="box" class="box-shadow"></div>

MISE À JOUR 3

Toutes mes réponses précédentes utilisaient du balisage supplémentaire pour créer cet effet, ce qui n’est pas nécessairement nécessaire. Je pense que cette solution est beaucoup plus propre ... le seul truc consiste à jouer avec les valeurs pour obtenir le bon positionnement de l'ombre ainsi que la bonne force/opacité de l'ombre. Voici un nouveau violon utilisant 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 juste un paramètre supplémentaire au CSS Box-Shadow, comme tout le monde vient de le souligner. 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 ajouté est décrit comme suit:

La quatrième longueur est un écart distance. Les valeurs positives causent le forme d'ombre à développer dans l'ensemble directions par le rayon spécifié . Les valeurs négatives provoquent la forme de l'ombre contracter.

METTRE À JOUR

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

Ce que j’ai fait, c’est de créer un "élément ombre" qui se cache derrière l’élément sur lequel vous souhaitez créer une ombre. J'ai fait la largeur de "l'élément shadow" pour être exactement moins large que l'élément réel de 2 fois l'ombre que vous spécifiez; alors je l'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

Oui, vous pouvez le faire avec la même syntaxe que celle que vous avez fournie. La première valeur contrôle le positionnement horizontal et la seconde valeur le positionnement vertical. Il suffit donc de définir la première valeur sur 0px et la seconde sur le décalage souhaité, comme suit:

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

Pour plus d'informations sur les ombres de la boîte, consultez celles-ci: 

J'espère que ça aide.

218
Hristo

Utilisez simplement le paramètre spread pour réduire l'ombre:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}
<div class="shadow">Some content</div>

Démo en direct: http://dabblet.com/Gist/a8f8ba527f5cff607327

Pour ne voir aucune ombre sur les côtés, le rayon (paramètre absolu) du rayon de propagation (valeur absolue) doit être identique au rayon du flou (paramètre tiers).

61
Lea Verou

Si vous avez une couleur fixe sur l'arrière-plan, vous pouvez masquer l'effet d'ombre latérale avec deux ombres masquantes ayant la même couleur d'arrière-plan et un flou égal à 0, par exemple:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

Notez que l'ombre noire doit être la dernière et présente une étendue négative (-3px) afin de l'empêcher de s'étendre au-delà des coins.

Ici le fiddle (change la couleur des ombres de masquage pour voir comment cela fonctionne vraiment).

enter image description here

20
T30

Je pense que c'est ce que tu veux?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}
<div class="shadow">wefwefwef</div>

5
James T

Il est toujours préférable de lire les spécifications . Il n'y a pas de propriété box-shadow-bottom et, comme le souligne Lea, vous devez toujours placer la propriété sans préfixe en bas, après les préfixes.

Alors c'est:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}
<div class="shadow">Some content</div>

5
Misha Reyzlin

Que diriez-vous simplement d'utiliser une div qui contient un débordement défini sur hidden et un remplissage en bas? Cela semble être la solution la plus simple.

Désolé de ne pas y avoir pensé moi-même, mais de l'avoir vu ailleurs .

Utiliser un élément pour envelopper l'élément en obtenant l'ombre de la boîte et un débordement: caché sur l'emballage, vous pourriez faire disparaître l'ombre de la boîte supplémentaire et conserver une bordure utilisable . Cela corrige également le problème où l'élément est plus petit qu'il y paraît, en raison de la propagation.

Comme ça:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

Le contenu va ici

Encore une solution intelligente quand il faut le faire en CSS pur!

Comme dit par Jorgen Evens .

2
Ben

J'avais aussi besoin d'une ombre mais seulement sous une image et mise légèrement à gauche et à droite. Cela a fonctionné pour moi:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

L'élément auquel il est appliqué est une image de la page (980px x 300px).

Si cela vous aide lorsque vous modifiez les paramètres, ils fonctionnent comme suit:

ombre horizontale, ombre verticale, distance de flou, étendue (c.-à-d. taille de l’ombre) et couleur.

1
Chris9

Vous pouvez également utiliser clip-path pour découper (masquer) tous les bords débordants, sauf celui que vous souhaitez afficher:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

Voir clip-path (MDN) . Les arguments de polygon sont le point en haut à gauche , le point en haut à droite point, le en bas à droite et le en bas à gauche point. En définissant le bord inférieur sur 200% (ou un nombre supérieur à 100%), vous contraignez votre débordement au seul bord inférieur.

1
theengineear

Ce stylo de code (pas par moi) illustre une manière très simple de faire cela et les autres côtés en soi: 

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

0
David Daudelin

Il vaut mieux chercher l'ombre: 

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

ce code est actuellement utilisé sur stackoverflow web.

0
Kamlesh

Si votre arrière-plan est solide (ou que vous pouvez le reproduire en utilisant CSS), vous pouvez utiliser le dégradé linéaire de cette façon:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}
<div>
<p>Foobar</p>
<p>test</p>
</div>

Cela générera un dégradé de 5 pixels au bas de l'élément, du noir à 30% d'opacité à complètement transparent. Le reste de l'élément est sur fond blanc. Bien entendu, si vous modifiez les deux dernières couleurs du dégradé linéaire, vous pouvez rendre le fond complètement transparent.

0
Tibo