css3 caja sombras en una sola dirección?
Tengo un elemento que tiene sombras de recuadro, pero quiero la sombra solo en la parte superior.
¿No hay forma de establecer solo la sombra superior? ¿Tengo que recurrir a la creación de elementos adicionales para superponer las sombras laterales?
7 answers
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> tiene que ser negativo <blur-radius> (para que no aparezca ninguno de los otros lados borrosos), 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 gradiente en la parte superior del elemento.
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
2011-07-11 13:13:58
Box-shadow compensa la sombra en una cantidad determinada en cada dirección. Así que necesitas x-offset para ser 0, y y-offset para ser algo negativo.
Además, tienes que jugar con el radio de desenfoque y el radio de propagación para que la sombra no sea visible en los lados izquierdo y derecho.
Ejemplo:
box-shadow: #777 0px -10px 5px -2px;
Ver la descripción en la Red de Desarrolladores de Mozilla.
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
2011-01-21 07:27:17
Una mejor manera sería usar un degradado de fondo, aquí están ambos de lado a lado.
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
2011-01-22 02:16:36
Ejemplo:
box-shadow: 0 2px 0px 0px red inset;
El Primer parámetro y el segundo parámetro especifican el desplazamiento de la sombra a la dirección x y a la dirección y respectivamente. El tercer parámetro especifica la distancia de desenfoque. Finalmente, el cuarto parámetro especifica la distancia de propagació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 bonito sobre las sombras de caja CSS3 - http://www.css3.info/preview/box-shadow /
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-06 12:19:00
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;
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-08-03 17:42:02
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 sombra de caja de un lado (en este caso quiero una sombra de inserción de un lado paraid="element"que viene de la parte inferior) -
Luego creé una sombra de caja normal usando un desplazamiento vertical negativo para empujar la sombra hacia arriba a un lado.
Box-shadow: 0-8px 20px 2px # DEDEE3;
Tal vez intente usar box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset;
Con desbordamiento-x:
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
Use overflow-x: hidden; y box-shadow: 0px 10px 16px -10px #000;
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-01-17 02:26:42