Comment puis-je ajouter une ombre de boîte d'un côté d'un élément?

J'ai besoin de créer une boîte-ombre sur un élément block, mais seulement (par exemple) sur son côté droit. La façon dont je le fais est d'envelopper l'élément intérieur avec box-shadow dans un élément externe avec padding-right et overflow:hidden; de sorte que les trois autres côtés de l'ombre ne sont pas visibles.

Y a-t-il un meilleur moyen d'y parvenir? Comme box-shadow-right?

EDIT: Mes intentions sont de créer seulement la partie verticale de l'ombre. Exactement la même chose que ce que repeat-y de la règle background:url(shadow.png) 100% 0% repeat-y ferait.

380
demandé sur TylerH 2011-02-25 12:11:45

10 réponses

Oui, vous pouvez utiliser la propriété Shadow spread de la règle box-shadow: 

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  -webkit-box-shadow: 10px 0 5px -2px #888;
          box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>

La quatrième propriété, il y -2px est l'ombre de la propagation, vous pouvez l'utiliser pour modifier la propagation de l'ombre, faisant apparaître que l'ombre est sur un seul côté.

Cela utilise aussi l'ombre de positionnement règles 10px envoie vers la droite (décalage horizontal) et 0px le garde sous l'élément (décalage vertical.)

5px est le rayon de flou :)

Exemple pour vous ici .

496
répondu Kyle 2016-06-02 13:08:31

Ma solution self-made qui est facile à éditer:

HTML: 

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

Css: 

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

Démo:
http://jsfiddle.net/jDyQt/103

24
répondu Puyol 2012-08-08 10:02:00

Pour obtenir l'coupées effet sur deux côtés, vous pouvez utiliser des pseudo-éléments avec des dégradés d'arrière-plan.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

Ajoutera un bel effet d'ombre à gauche et à droite des éléments qui composent normalement un document.

14
répondu Jacek Kuzemczak 2014-06-14 13:03:48

Il suffit d'utiliser ::after ou:: before pseudo élément pour ajouter l'ombre. Faites-le 1px et positionnez-le de n'importe quel côté que vous voulez. Ci-dessous est un exemple de haut.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}
<footer>top only box shadow</footer>
6
répondu shwnrgr 2017-01-14 22:35:43

Voici un petit hack que j'ai fait.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. créez un <div class="one_side_shadow"></div> juste en dessous de l'élément que je veux créer l'ombre de la boîte d'un côté (dans ce cas, je veux une ombre d'encart unilatérale pour id="element" venant du bas)

2. Ensuite, j'ai créé un box-shadow régulier en utilisant un décalage vertical négatif pour pousser l'ombre vers le haut d'un côté. 

`box-shadow: 0 -8px 20px 2px #DEDEE3;`
4
répondu atiquratik 2014-12-22 07:09:34

Cela pourrait être un moyen simple

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

Attribuez ceci à n'importe quel div

2
répondu madhairsilence 2013-02-16 15:26:28

Voici mon exemple:

.box{
        
        width: 400px; 
        height: 130px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }
<div class="box">
</div>
1
répondu Webpixstudio 2017-04-07 20:00:01

Ce site m'a aidé: https://gist.github.com/ocean90/1268328 (notez que sur ce site, la gauche et la droite sont inversées à la date de ce post... mais ils fonctionnent comme prévu). ils sont corrigés dans le code ci-dessous.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>
0
répondu ter24 2013-11-22 01:44:32 
div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
0
répondu Ashisha Nautiyal 2014-01-10 05:45:19

Ce que je fais est de créer un bloc vertical pour l'ombre, et placez-le à côté de l'endroit où mon élément de bloc devrait être. Les deux blocs sont ensuite enveloppés dans un autre bloc:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

Jsfiddle exemple ici .

0
répondu jim_kastrin 2014-10-11 12:50:09