Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
Con CSS y jugando con márgenes, podemos darle sombra a un bloque de texto, para conseguir un efecto 3D.
Simplemente colocamos dos bloques div. Primero el que hará de sombra, de color background gris sombra y le damos las dimensiones, alto y ancho de la caja que queremos sombrerar. La desplazamos un poco a la derecha de su posición con un margin-left:5px; (por ejemplo).
Después colocamos otro div que es la caja que queremos sombrear. Le damos las mismas dimensiones y con el margin-top negativo lo subimos para que quede encima de la sombra y un poco más arriba.
El siguiente código css sería el resultado de esto
<div style="width:100px; height:100px; background:gray;
margin-left:7px;"></div>
<div style="width:100px; height:100px; background:white; border:1px
solid black; margin-top:-107px;">texto en caja con sombra</div>
Y eso nos quedará así