¿Cómo puedo agregar una sombra de cuadro en un lado de un elemento?

445

Necesito crear una caja-sombra en algún blockelemento, pero solo (por ejemplo) en su lado derecho. La forma en que lo hago es envolver el elemento interno box-shadowen uno externo padding-righty, overflow:hidden;por lo tanto, los otros tres lados de la sombra no son visibles.

¿Hay alguna forma mejor de lograr esto? Al igual que box-shadow-right?

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

tillda
fuente
3
considerando las herramientas limitadas de css en términos de sombras de cuadro, creo que su enfoque ya es bastante bueno. No es demasiado abarrotado y tiene un impacto bastante pequeño en términos de semántica: solo un div sin sentido.
Bazzz
Aquí hay una buena sombra lateral css: stackoverflow.com/a/20596554/1491212
Armel Larcier

Respuestas:

567

Sí, puede usar la propiedad de propagación de sombra de la regla de cuadro-sombra:

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

La cuarta propiedad -2pxes la extensión de la sombra, puede usarla para cambiar la extensión de la sombra, haciendo que parezca que la sombra está solo en un lado.

Esto también utiliza las reglas de posicionamiento de sombra, lo 10pxenvía a la derecha (desplazamiento horizontal) y lo 0pxmantiene debajo del elemento (desplazamiento vertical).

5px es el radio de desenfoque :)

Ejemplo para ti aquí .

Kyle
fuente
11
Gracias por señalar algo que no sabía, pero mis intenciones eran crear solo la parte vertical de la sombra. Exactamente lo mismo que haría background: url (shadow.png) 100% 0% repeat-y.
tillda
44
@Tillda debe marcar esto como la respuesta para que aparezca en la parte superior para otros que buscan una solución. Casi descarté este método de estilo al leer los comentarios y acepté la respuesta.
Devin G Rhode
66
Esto funciona muy bien si no tiene la intención de que la sombra se atenúe en las esquinas. A mí también se me ocurrió esta solución, pero en la mayoría de los casos (para una sombra en un lado) es incorrecto que la sombra sea más pequeña que el elemento, rompiendo así la ilusión (si fuera así) de que dicho elemento es " elevado "o" 3D ".
Steven Lu
1
@ Mr.Alien Gracias por eso, acabo de eliminar el prefijo ya que las box-shadowreglas fueron estandarizadas.
Kyle
55
pero esta sombra no tiene desenfoque, e incluye desenfoque hace que salga de otras partes. Y si explica eso reduciendo la propagación, termina prematuramente del lado que realmente desea. UGHHHHH
Muhammad Umer
37

Mi solución hecha a medida 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;
}​

Demostración:
http://jsfiddle.net/jDyQt/103

Puyol
fuente
1
Parece de alguna manera el más directo: solo el contenedor div me está haciendo infeliz de alguna manera;)
BananaAcid
1
Esta es la única solución real. La respuesta aceptada todavía tiene desenfoque en la parte superior e inferior de la sombra, solo en una posición diferente.
Jelle Blaauw
Esto no funcionó para mí en Microsoft Edge o Internet Explorer 11. Todavía había un poco de sombra en los otros lados, dependiendo del nivel de zoom. Sin embargo, otros navegadores estaban bien.
Sam
La respuesta en stackoverflow.com/a/24220224/238753 funcionó de la misma manera pero sin los problemas de compatibilidad del navegador que tiene esta respuesta
Sam
24

Para obtener el efecto recortado en hasta dos lados, puede usar pseudoelementos con gradientes 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));
}

agregará un agradable efecto de sombra a la izquierda y derecha de los elementos que normalmente forman un documento.

Jacek Kuzemczak
fuente
solución perfecta, ya que agrega un efecto de sombra a un lado de un elemento solo sin abarrotar el marcado.
Liquinaut
1
En comparación con el método de propagación negativa, esto tiene la ventaja de no encogerse en las esquinas.
Kevin Christopher Henry
3
@BananaAcid Creé una demostración para cualquiera que lo necesite: jsfiddle.net/jDyQt/1198
zeckdude
Bien, esto funcionó perfectamente en Chrome, Safari, Firefox, IE11 y Edge sin efectos secundarios para mí
Sam
15

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

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>

riegersn
fuente
Este todavía se extiende más allá del límite, pero podría ser lo que algunas personas quieren
Sam
5

Aquí está mi ejemplo:

.box{
        
        width: 400px; 
        height: 80px; 
        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>

Webpixstudio
fuente
4

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. Cree un <div class="one_side_shadow"></div>derecho debajo del elemento para el que quiero crear la sombra del cuadro de un lado (en este caso, quiero una sombra insertada de un lado para que id="element"venga desde la parte inferior)

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

`box-shadow: 0 -8px 20px 2px #DEDEE3;`
atiquratik
fuente
2

Esta 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

Madhairsilence
fuente
1

Aquí hay un codepen para demostrar para cada lado, o un fragmento de trabajo:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.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;
}
<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

RAÍZ
fuente
0

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 esta publicación ... 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>
ter24
fuente
0
div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
Ashisha Nautiyal
fuente
0

Lo que hago es crear un bloque vertical para la sombra y colocarlo al lado de 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>

Ejemplo de jsFiddle aquí .

jim_kastrin
fuente
0

Ok, aquí hay un intento más. Usando pseudo elementos y aplicando la propiedad de la caja de sombra sobre ellos.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

hablar con descaro a:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ

alex
fuente