css3 - resplandor - sombra para dentro css

css3 caja de sombras en una sola dirección?

Question

Tengo un elemento que tiene sombras de cuadro insertadas, pero quiero que la sombra aparezca solo en la parte superior.

¿No hay forma de establecer solo la sombra superior? ¿Debo recurrir a la creación de elementos adicionales para superponer las sombras laterales?

Answer 1

Aquí está mi ejemplo por favor intente una vez

-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;

Answer 2

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 una <div class="one_side_shadow"></div> justo debajo del elemento que quiero crear la sombra de la caja de un solo lado (en este caso quiero una sombra de inserción unilateral para id="element" proveniente de fondo)

2. Luego creé una sombra de caja regular usando un desplazamiento vertical negativo para empujar la sombra hacia arriba hacia un lado.

   caja-sombra: 0 -8px 20px 2px # DEDEE3;

Answer 3

Ejemplo:

  box-shadow: 0 2px 0px 0px red inset;

El primer parámetro y los segundos parámetros especifican el desplazamiento de la sombra a la dirección xy a la dirección y, respectivamente. El tercer parámetro especifica la distancia de desenfoque. Finalmente, el cuarto parámetro especifica la distancia de dispersión.

Al especificar solo el segundo parámetro con el desplazamiento que desea, se obtiene la sombra superior sin sombras laterales.

Demo se puede encontrar aquí: http://jsfiddle.net/rEdBy/

Un tutorial muy bueno sobre CSS3 Box shadows - http://www.css3.info/preview/box-shadow/

Answer 4

Tal vez intente usar box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

con overflow-x:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

use overflow-x: hidden; y box-shadow: 0px 10px 16px -10px #000;

Answer 5

Una mejor manera sería usar un degradado de fondo, aquí están ambos de lado a lado.

http://jsfiddle.net/wh3L8/

Answer 6

box-shadow compensa la sombra por una cantidad dada en cada dirección. Entonces, necesitas x-offset para ser 0, y y-offset para ser algo negativo.

Además, debe jugar con el radio de desenfoque y el radio de dispersión para que la sombra no sea visible en los lados izquierdo y derecho.

Ejemplo:

box-shadow: #777 0px -10px 5px -2px;

Consulte la descripción en Mozilla Developer Network .

Answer 7

Esta es técnicamente la misma respuesta que @ChrisJ, con algunos detalles más sobre cómo hacer que box-shadow haga su oferta:

para referencia _{los * elementos son opcionales} :

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;

El <spread-radius> debe ser negativo <blur-radius> (para que ninguno de los otros lados borrosos se muestren), y luego debe bajar el <offset-y> en la misma cantidad:

box-shadow: inset 0 20px 20px -20px #000000;

Le dará una sola banda de degradado en la parte superior del elemento.