css - tabla - ¿Cómo puedo agregar una sombra de cuadro en un lado de un elemento?
poner sombra a un texto en html (10)
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;
}
<div class="box">
</div>
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 manera mejor de lograr esto? Como la box-shadow-right ?
EDITAR : Mis intenciones son crear solo la parte vertical de la sombra. Exactamente lo mismo que lo 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.
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> justo debajo del elemento en el que quiero crear la sombra del cuadro de un solo lado (en este caso, quiero una sombra de inserción de un lado para id="element" desde el fondo)
2. Luego creé una box-shadow normal usando un desplazamiento vertical negativo para empujar la sombra hacia arriba a un lado.
`box-shadow: 0 -8px 20px 2px #DEDEE3;`
Esta podría ser una forma sencilla.
border-right : 1px solid #ddd;
height:85px;
box-shadow : 10px 0px 5px 1px #eaeaea;
Asigna esto a cualquier div
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>
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 here .
Mi solución de fabricación propia 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;
}
Manifestación:
http://jsfiddle.net/jDyQt/103
Para obtener el efecto recortado en hasta dos lados, puede utilizar pseudo elementos 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 bonito efecto de sombra a la izquierda y derecha de los elementos que normalmente conforman un documento.
Sí, puedes usar la propiedad de propagación de la sombra de la regla de la caja-sombra:
.myDiv
{
border: 1px solid #333;
width: 100px;
height: 100px;
-webkit-box-shadow: 10px 0 5px -2px #888;
box-shadow: 10px 0 5px -2px #888;
}
<div class="myDiv"></div>
La cuarta propiedad allí -2px es la propagación de la sombra, puede usarla para cambiar la propagación de la sombra, haciendo que parezca que la sombra está solo en un lado.
Esto también usa las reglas de posicionamiento de la sombra 10px envía a la derecha (desplazamiento horizontal) y 0px mantiene debajo del elemento (desplazamiento vertical).
5px es el radio de desenfoque :)
Solo usa :: after o :: before pseudo element para agregar la sombra. Haz que sea 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);
}
<footer>top only box shadow</footer>
div {
border: 1px solid #666;
width: 50px;
height: 50px;
-webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}