Ejemplos java y C/linux

Tutoriales

Enlaces

Licencia

Creative Commons License
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace http://www.chuidiang.org

Hacer una sombra con CSS

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í

texto en caja con sombra


Estadísticas y comentarios

Numero de visitas desde el 4 Feb 2007: