resplandor - sombra texto css generator

Cómo hacer sombra en el borde inferior?

Question

Necesito aplicar la sombra de borde en el borde inferior por CSS3. Solo quiero aplicar CSS3 sombra en la parte inferior. es posible?

Answer 1

El problema es que la sombra sale del lado del div que contiene. Para evitar esto, el valor de desenfoque debe ser igual al valor absoluto del valor de dispersión.

div {
-webkit-box-shadow: 0 4px 6px -6px #222;
-moz-box-shadow: 0 4px 6px -6px #222;
box-shadow: 0 4px 6px -6px #222;
}

<div>wefwefwef</div>

cubierto en profundidad here

Answer 2

Es curioso, que en la mayoría de las respuestas creas un cuadro con el texto (u objeto), en lugar de crear el texto (u objeto) div y debajo de eso un cuadro con un ancho del 100% (o al menos lo que debería) y con altura lo que es igual a su "borde" px ... Entonces, creo que esta es la respuesta más simple y perfecta:

<h3>Your Text</h3><div class="border-shadow"></div>

y el css:

 .shadow {
width:100%;
height:1px; // = "border height (without the shadow)!"
background:#000; // = "border color!"
-webkit-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
-moz-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"

}

Aquí puedes experimentar con el radio, etc. fácil: https://www.cssmatic.com/box-shadow

Answer 3

Tratar:

div{
-webkit-box-shadow:0px 1px 1px #de1dde;
-moz-box-shadow:0px 1px 1px #de1dde;
box-shadow:0px 1px 1px #de1dde;
}

<div>wefwefwef</div>

En general, agrega una sombra borrosa de 1px 1px desde la parte inferior de la caja

box-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

Answer 4

usa box-shadow sin compensación horizontal.

http://www.css3.info/preview/box-shadow/

p.ej.

div {
-webkit-box-shadow: 0 10px 5px #888888;
-moz-box-shadow: 0 10px 5px #888888;
box-shadow: 0 10px 5px #888888;
}

<div>wefwefwef</div>

Habrá una ligera sombra en los lados con un gran radio de desenfoque (5px en el ejemplo anterior)

Answer 5

Nuevo método para una vieja pregunta

Parece que en las respuestas provistas siempre el problema era cómo el borde de la caja sería visible a la izquierda y a la derecha del objeto o tendrías que insertarlo tan lejos que no se ensanchara la longitud completa del contenedor correctamente .

Este ejemplo utiliza el pseudo elemento :after junto con un degradado lineal con transparencia para poner una sombra paralela en un contenedor que se extiende exactamente a los lados del elemento que desea sombrear.

Digno de señalar con esta solución es que si usa relleno en el elemento que desea sombrear, no se mostrará correctamente. Esto se debe a que el pseudo elemento after agrega su contenido directamente después del contenido interno de los elementos. Entonces, si tiene relleno, la sombra aparecerá dentro del cuadro. Esto se puede superar eliminando el relleno en el contenedor externo (donde se aplica la sombra) y utilizando un contenedor interno donde se aplica el relleno necesario.

Ejemplo con relleno y color de fondo en el div sombreado:

Si desea cambiar la profundidad de la sombra, simplemente aumente el estilo de height en el pseudo elemento after . También puede oscurecer, aclarar o cambiar los colores en los estilos de degradado lineal.

body {
background: #eee;
}
.bottom-shadow {
width: 80%;
margin: 0 auto;
}
.bottom-shadow:after {
content: "";
display: block;
height: 8px;
background: transparent;
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#a6000000'', endColorstr=''#00000000'',GradientType=0 ); /* IE6-9 */
}
.bottom-shadow div {
padding: 18px;
background: #fff;
}

<div class="bottom-shadow">
<div>
Shadows, FTW!
</div>
</div>