ombre portée uniquement bas css3

Question

ombre portée uniquement bas css3

y a-t-il un moyen de ne laisser tomber l'ombre que sur le fond?. J'ai un menu avec 2 images à côté de l'autre. Je ne veux pas d'une ombre droite parce qu'elle chevauche la bonne image. Je n'aime pas utiliser des images pour cela, il y a donc un moyen de le laisser tomber seulement 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');

201

css css3

demandé sur Hristo 2011-03-28 18:03:28

11 réponses

score 215 · Answer 1

mise à jour 4

identique à la mise à jour 3 mais avec CSS moderne (=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 ont été l'utilisation de markup supplémentaire pour obtenir créer cet effet, qui n'est pas nécessairement nécessaire. Je pense que c'est une beaucoup solution plus propre... le seul truc, c'est 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, en 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 faire cela avec juste un paramètre supplémentaire à la boîte-ombre CSS 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 qui est ajouté est décrit comme:

le quatrième la longueur est un écart distance. Les valeurs positives de provoquer l' forme de l'ombre pour s'étendre dans tous les directions par le rayon spécifié. Les valeurs négatives causent la forme de l'ombre contracter.

UPDATE

Découvrez la démo de 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 un 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

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. Il suffit donc de définir la première valeur à 0px et la seconde à n'importe quel offset que vous voulez 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 boîte, vérifier ces:

j'espère que cela aidera.

score 61 · Answer 2

il suffit d'utiliser le paramètre spread pour rendre l'ombre plus petite:

.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>

Live demo: http://dabblet.com/gist/a8f8ba527f5cff607327

pour ne pas voir d'ombre sur les côtés, Le (valeur absolue du) rayon de propagation (4ème paramètre) doit être le même que le rayon de flou (3ème paramètre).

score 20 · Answer 3

si vous avez une couleur fixe sur l'arrière-plan, vous pouvez cacher l'effet d'ombre latérale avec deux ombres masquantes ayant la même couleur de l'arrière-plan et flou = 0, exemple:

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

noter que l'ombre noire doit être la dernière, et a une propagation négative (-3px) afin de l'empêcher de extendig au-delà des coins.

ici le violon (changer le couleur des ombres de masquage pour voir comment il vraiment fonctionne).

enter image description here

score 5 · Answer 4

il est toujours préférable de lire the specs . Il n'y a pas de propriété box-shadow-bottom , et comme le fait remarquer Lea, vous devez toujours placer la propriété non-préfixée en bas, après les préfixées.

Donc, 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>

score 5 · Answer 5

je pense que c'est ce que vous cherchez?

.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>

score 2 · Answer 6

pourquoi ne pas simplement utiliser un div contenant qui a débordement réglé sur caché et un peu de rembourrage au fond? Cela semble être la solution la plus simple.

désolé de dire que je n'y avais pas pensé moi-même mais je l'ai vu ailleurs .

utiliser un élément pour envelopper l'élément obtenir la boîte-ombre et un débordement: caché sur l'emballage, vous pourriez faire la boîte supplémentaire-ombre disparaître et encore avoir un Utilisable frontière. Cela corrige aussi le problème où l'élément est plus petit qu'il n'y paraît, à cause de la dispersion.

comme ceci:
#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }
Content goes here

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

comme dit par Jorgen Evens .

score 1 · Answer 7

j'avais aussi besoin d'une ombre mais seulement sous une image et placée 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 s'applique est une image couvrant toute la page (980px x 300px).

si cela aide en jouant avec les réglages, ils s'exécutent comme suit:

ombre horizontale, ombre verticale, distance de flou, étendue (i.e. taille de l'ombre), et couleur.

score 0 · Answer 8

si votre arrière-plan est solide (ou vous pouvez le reproduire en utilisant CSS), vous pouvez utiliser le gradient 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 gradient 5px au fond de l'élément, du noir à 30% d'opacité à complètement transparent. Le reste de l'élément a fond blanc. Bien sûr, en changeant les 2 derniers arrêts de couleur du gradient linéaire, vous pourriez rendre le fond complètement transparent.

score 0 · Answer 9

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.

score -1 · Answer 10

mise à jour sur quelqu'un d'autre sa réponse transparant côtés au lieu de blanc de sorte qu'il fonctionne sur d'autres milieux de couleur trop.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

score -3 · Answer 11

ombre intérieure

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>

Las etiquetas más populares

ombre portée uniquement bas css3

11 réponses

mise à jour 4

mise à jour 3

mise à jour 2

UPDATE

Réponse Originale