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

Necesito crear una sombra de cuadro en algún elemento de 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; por lo que los otros tres lados de la sombra no son visibles.

¿Hay alguna forma mejor de lograr esto? Como box-shadow-right ?

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

Sí, puede usar la propiedad de sombreado de la regla de sombreado de caja:

 .myDiv { border: 1px solid #333; width: 100px; height: 100px; -webkit-box-shadow: 10px 0 5px -2px #888; box-shadow: 10px 0 5px -2px #888; } 
 

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

HTML:

 

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

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

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

agregará un bonito efecto similar a una sombra a la izquierda y a la derecha de los elementos que normalmente componen un documento.

Simplemente use :: after o :: before pseudo element para agregar la sombra. Hazlo 1px y colócalo en el lado que quieras. 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); } 
 
top only box shadow

Aquí hay un pequeño truco que hice.

 

1. Cree una

justo debajo del elemento que quiero crear la sombra de la caja de un solo lado (en este caso quiero una sombra de recuadro unilateral para id="element" desde el fondo)

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

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

Esto podría ser una manera simple

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

Asignar esto a cualquier div

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

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 código a continuación.

    Box Shadow    
 div { border: 1px solid #666; width: 50px; height: 50px; -webkit-box-shadow: inset 10px 0px 5px -1px #888 ; } 

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:

 
CONTENT

Ejemplo jsFiddle aquí .

Intereting Posts