¿Cómo puedo añadir una sombra de caja en un lado de un elemento?

Necesito crear una sombra de caja en algún elemento block, pero solo (por ejemplo) en su lado derecho. La forma en que lo hago es envolver el elemento interno con box-shadow en uno externo con padding-right y overflow:hidden; para que los otros tres lados de la sombra no sean visibles.

¿hay alguna mejor manera de lograr esto? Como box-shadow-right?

EDITAR : Mis intenciones son crear solo la parte vertical de la sombra. Exactamente lo mismo que haría repeat-y de la regla background:url(shadow.png) 100% 0% repeat-y.

Author: TylerH, 2011-02-25
Source

10 answers

Sí, puede usar la propiedad sombreado de la regla 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 cuarta propiedad allí -2px es la propagación de la sombra, puede usarla para cambiar la propagación de la sombra, haciendo que parezca que la sombra está en un solo lado.

Esto también usa las reglas de posicionamiento de sombra 10px lo envía a la derecha (desplazamiento horizontal) y 0px lo mantiene debajo del elemento (desplazamiento vertical.)

5px es el radio de desenfoque :)

Ejemplo para usted aquí.

 496
Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-02 13:08:31

Mi solución hecha a sí misma que es fácil de editar:

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;
}​

Demo:
http://jsfiddle.net/jDyQt/103

 24
Author: Puyol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-08 10:02:00

Para obtener el efecto recortado en hasta dos lados puede usar pseudo elementos con degradados de fondo.

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));
}

Añadirá un bonito efecto de sombra a la izquierda y a la derecha de los elementos que normalmente componen un documento.

 14
Author: Jacek Kuzemczak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-14 13:03:48

Simplemente use el pseudo elemento ::after o ::before para agregar la sombra. Hágalo 1px y colóquelo en el lado que desee. A continuación se muestra un ejemplo de la parte superior.

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
Author: shwnrgr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-14 22:35:43

Aquí hay un pequeño truco que hice.

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

1. Crear un <div class="one_side_shadow"></div> justo debajo del elemento que quiero crear la sombra de caja de un lado (en este caso quiero una sombra de inserción de un lado para id="element" que viene de la parte inferior)

2. Luego creé un box-shadow regular usando un desplazamiento vertical negativo para empujar la sombra hacia arriba a un lado. 

`box-shadow: 0 -8px 20px 2px #DEDEE3;`
 4
Author: atiquratik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-22 07:09:34

Esto podría ser una manera simple

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

Asigne esto a cualquier div

 2
Author: madhairsilence,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-16 15:26:28

Aquí está mi ejemplo:

.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
Author: Webpixstudio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-07 20:00:01

Este sitio me ayudó: https://gist.github.com/ocean90/1268328 (Tenga en cuenta que en ese sitio la izquierda y la derecha se invierten a partir de la fecha de este post... pero funcionan como se esperaba). Se corrigen en el siguiente código.

<!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
Author: ter24,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
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
Author: Ashisha Nautiyal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-10 05:45:19

Lo que hago es crear un bloque vertical para la sombra, y colocarlo junto a donde debería estar mi elemento de bloque. Los dos bloques se envuelven en otro bloque:

<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 ejemplo aquí .

 0
Author: jim_kastrin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-11 12:50:09