Tengo un elemento que tiene sombras de caja insertadas, pero quiero la sombra solo en la parte superior.css3 sombras de caja en una sola dirección?
¿No hay forma de establecer solo la sombra superior? ¿Debo recurrir a la creación de elementos adicionales para superponer las sombras laterales?
Esto es técnicamente la misma respuesta que @ChrisJ, con algunos detalles más sobre cómo hacer box-shadow hacer tu voluntad:
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 aumentar el <offset-y> por la misma cantidad:
box-shadow: inset 0 20px 20px -20px #000000;
que le dará una sola banda de gradiente a través de la parte superior del elemento.
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;
Véase la descripción en la Mozilla Developer Network.
No, eso no funciona. las compensaciones son xey no a la izquierda ni a la derecha. – Mark
No dije eso: x-offset es el desplazamiento horizontal; y-offset es el desplazamiento vertical. Entonces, para tener la sombra paralela en la parte superior, necesita tener un desplazamiento en y <0. – ChrisJ
@Mark funciona si entiende cómo usar
Una mejor manera sería usar un degradado de fondo, aquí están ambos de lado a lado.
La 'box-shadow' en realidad se ve mejor para mí. – alexvance
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>
crear un <div class="one_side_shadow"></div> justo debajo del elemento que quiero crear la caja de un solo lado de la sombra (en este caso quiero una sombra inserción de un solo lado para id="element" procedente de la parte inferior)
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;
Ejemplo:
box-shadow: 0 2px 0px 0px red inset;
el primer parámetro y el segundo parámetros especifica el desplazamiento de la sombra a la dirección X y 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.
de demostración se puede encontrar aquí: http://jsfiddle.net/rEdBy/
Un muy buen tutorial sobre CSS3 sombras Box - http://www.css3.info/preview/box-shadow/
Tal vez trate de usar box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset;
con rebosadero-x:
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
uso overflow-x: hidden; y box-shadow: 0px 10px 16px -10px #000;
Aquí está mi ejemplo 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;
Gracias por su fragmento, me ayudó mucho. Solo para los perezosos aquí hay una línea de código completa para cada lado: 'box-shadow: recuadro 15px 0 15px -15px negro; // left box-shadow: inset -15px 0 15px -15px negro; // derecho box-shadow : recuadro 0 15px 15px -15px negro; // arriba box-shadow: recuadro 0 -15px 15px -15px negro; // parte inferior 'editar: Disculpa, no se pudo formatear correctamente, no sé por qué, se agregaron dos espacios. Sería bueno si un administrador pudiera formatearlo de la manera correcta. – Dominik
gracias por dejarme ser flojo :) – Zhanger
Para crear una sombra en la parte inferior, simplemente haga el desplazamiento en y -20px –