inmensia

Cuando hice el último efecto en JavaScript la semana pasada, comenté la posibilidad de añadir una pequeña sombra al texto para reforzar la sensación de movimiento y darle un poco de profundidad al conjunto. Hoy he estado trasteando un poco hasta conseguirlo, aunque al final ni siquiera he tenido que utilizar JavaScript, con un poco de HTML y CSS básico ha bastado.

underground

underground

Para crear el efecto que se observa en el cuadro he creado tres elementos div en HTML. El primer div sólo sirve realmente para englobar a los otros dos, definir el tamaño del cuadro donde se realiza el efecto, dibujar un borde alrededor, y establecer los atributos comunes de fuentes y colores. El segundo div se utiliza para la sombra, y como se observa en el código que he puesto, en él tan sólo se establece el color que se quiere para la misma, y se escribe la palabra sobre la que se quiere aplicar el efecto. Por último, en el tercer div, se vuelve a escribir la misma palabra que la puesta en el div de sombra, se establece un color de fondo transparente, y se "mueve" mediante los valores del margin completamente hacia arriba (valor negativo) y un poco hacia la derecha. Ese último "movimiento" es el que realmente provoca el efecto, al superponer el texto de color negro sobre el texto de color gris.

Por último, una cosa que me gustaría comentar, es que mientras que para el primer div he utilizado píxeles (px) como unidad de medida para conseguir un mayor control sobre los tamaños y posiciones, en el tercer div he utilizado el tamaño de la fuente (em) como unidad de medida para que independientemente del tamaño de letra que se establezca en el cuadro el efecto siga siendo el mismo.

¿No encontró lo que buscaba?

Utilice el buscador para encontrar más páginas en esta web o en toda Internet.

	Web www.inmensia.com