HTMLpointHTMLpoint HTMLpoint.com


 F.A.Q. SOBRE LAS HOJAS DE ESTILO


38. ¿Puedo crear título sombreados con los CSS sin usar imágenes?


Aprovechando las propiedades del posicionamiento dinámico, podemos ahora exponer un uso práctico de dicha tectonolgía. Crear títulos con efecto de sombreado es posible en HTML clásico exclusivamente recurriendo a imágenes (creadas con programas específicos de Webgráfica o fotoretoque).
Se crea un texto asignándole un estilo, un tamaño y una cierta posición absoluta en la página:

<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px; color:black; z-index:1">
HTMLpoint
</DIV>


Para el texto se ha usado el font impact de tamaño equivalente a 100 píxel y color negro, distanciado del margen izquierdo y superior de 10 pixel. La propiedad z-index está programada sobre el valor positivo 1. Hasta aquí, nada de particular, dado que se trata de un texto negro sin sombreado. Para incluir la sombra se tiene que añadir este código:

<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:15px; left:15px; color:gray; z-index:-1">
HTMLpoint
</DIV>

El texto permanece con los mismos tamaño y estilo, pero cambia de color (del black precedente al grey actual). La distancia del estilo del margen superior e izquierdo aumenta respectivamente en 5 píxel y la propiedad z-index está programada sobre el valor negativo -1. Todo esto crea el primer texto superpuesto al segundo, que estando distanciado en 5 pixel, pero con la misma dimensión, crea un efecto sombreado.
[ Índice ]     [ Siguiente ]
  Vuelve a principio de página