Sombra en tus títulos con CSS

El presente artículo explica como crear un bonito efecto de sombra en nuestros títulos, utilizando solamente CSS.

Este será el resultado final que esperamos obtener.

www.InKiLiNo.com

Primero marcamos el titulo con las etiquetas de span y le ponemos el nombre del identificador(id) que vayamos a poner en el CSS, en este caso es tituloconsombra, muy original ¿verdad? 😛

<span id="tituloconsombra">www.InKiLiNo.com</span>

A continuación sólo nos queda añadir el siguiente código CSS en nuestra hoja de estilos o en el mismo archivo, eso va a gusto del consumidor.

Sobretodo fijaros que el texto del campo content, sea el mismo que el texto que queremos sombrear.


#tituloconsombra{
   font-size: 3em; /* Tamaño del texto */
   display: block;
   line-height: 1em;
   color: #666;
   background-color: transparent;
   white-space: nowrap
}

#tituloconsombra:before,
#tituloconsombra:after{
   content: "www.InKiLiNo.com"; /* Texto a sombrear */
   display: block;
}

#tituloconsombra:before{
   margin-bottom: -1.05em;
   margin-left: 0.1ex;
   color: #ccc; /* Color de la sombra*/
   background-color: transparent;
}

#tituloconsombra:after{
   margin-top: -1.05em;
   margin-left: -0.1ex;
   color: #fff; /* Color del texto*/
   background-color: transparent;
}

Fácil, a que sí 😉

16 pensamientos en “Sombra en tus títulos con CSS

  1. Yo en ocasiones lo he logrado, pero después siempre por h o por b se jode, ahora mismo la verdad es que no tengo ni idea.

    Para estos casos lo que va bien es poner un mensaje para la gente que entra con ie, como tengo hecho yo 😉

  2. No seas drástico, ya verás como antes de que te des cuenta estás otra vez dando guerra 😛

    PD: Si necesitas ayuda de algún tipo en tu traslado, ya sabes donde encontrarme 😉

  3. Dennis ahora mismo creo que es totalmente compatible con ie, por lo menos lo intento a base de hacks y corregir código, pero siempre sale algo con ie, y la verdad es que ya hace tiempo que no miro si se ve bien o no con ie 😛

  4. Muy instructivo. Me lo voy a copiar en mis archivos de cosas de html por si alguna vez lo necesito. Lo malo entonces es lo de IE, pero mientras no sea un fallo, y sea simplemente que no aparece, creo que es un truco válido y un buen efecto.

  5. Aunque el IE sea lo peor respecto a lo que a navegadores se refiere, es bueno no olvidarlo, puesto que tiene una cuota de mercado bastante alta. Probablemente, de las estadísticas de tu sitio, más de un 60% utilice ese navegador.

    Aunque nos fastidie, hay que diseñar bien para ese navegador y no olvidarlo.

    Saludos,

  6. Manz tienes razón, pero hay que reconocer que a veces es un coñazo diseñar con CSS para ie. Yo intento tener el blog bien con ie, puedes comprobarlo 😛

    Por cierto como sabías que más del 60% de mis visitas son de ie 😉

Deja un comentario