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í 😉
Como no, con IE no funciona…
Ja,ja,ja,ja… que esperabas, los milagros no existen 😛
Jjajajja tira el IE, solo sirve para joder al que tiene un blog y comerle el coco. jajajaja
Yo deje de tratar que se viera bien en IE, ya me cansé… además nunca lo logré snif 🙁
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 😉
Tronko este es mi ultimo comentario ….
Menuda rayada esto de quedarse sin internet !!!
Nos vemos pronto champion !!! 😉
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 😉
inkilino 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
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 😛
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.
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,
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 😉
al parecer el de todos los bloggers
Muy interesante, puede quedar muy chulo en las paginas, voy a probarlo a ver que tal queda
Como se hace para que en el IE 5.5 e IE 6.0 lea png?
Lo acabo de hacer en uno de mis sitios y queda genial!!!
Muchas gracias inkilino por el aporte!!!