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í



Adrià
# 1Como no, con IE no funciona…
El Lunes 19 de Marzo de 2007 a las 10:08
InKiLiNo
# 2Ja,ja,ja,ja… que esperabas, los milagros no existen
El Lunes 19 de Marzo de 2007 a las 11:01
paranoias
# 3Jjajajja tira el IE, solo sirve para joder al que tiene un blog y comerle el coco. jajajaja
El Lunes 19 de Marzo de 2007 a las 12:23
Cesarius
# 4Yo deje de tratar que se viera bien en IE, ya me cansé… además nunca lo logré snif
El Lunes 19 de Marzo de 2007 a las 18:09
InKiLiNo
# 5Yo 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
El Lunes 19 de Marzo de 2007 a las 18:56
forat
# 6Tronko este es mi ultimo comentario ….
Menuda rayada esto de quedarse sin internet !!!
Nos vemos pronto champion !!!
El Martes 20 de Marzo de 2007 a las 1:23
InKiLiNo
# 7No 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
El Martes 20 de Marzo de 2007 a las 6:16
Dennis Mike
# 8inkilino que parte de tu blog no es compatible con ie por lo general siempre hay solucion
ademas aun hoy en dia la maytoria de la gente usa ie
El Miércoles 21 de Marzo de 2007 a las 6:26
InKiLiNo
# 9Dennis 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
El Miércoles 21 de Marzo de 2007 a las 8:15
Ulyses
# 10Muy 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.
El Jueves 22 de Marzo de 2007 a las 1:04
Manz
# 11Aunque 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,
El Viernes 23 de Marzo de 2007 a las 8:35
InKiLiNo
# 12Manz 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
El Viernes 23 de Marzo de 2007 a las 9:50
Dennis Mike
# 13al parecer el de todos los bloggers
El Sábado 24 de Marzo de 2007 a las 7:42
César
# 14Muy interesante, puede quedar muy chulo en las paginas, voy a probarlo a ver que tal queda
El Martes 17 de Abril de 2007 a las 16:21