2007 Mar 19

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? :P

<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í ;)

Related Posts with ThumbnailsTambién te puede interesar:
Suscribete gratis
  1. Gravatar

    Adrià

    # 1

    Como no, con IE no funciona…

    Con Mozilla Firefox Mozilla Firefox 2.0.0.2 y Windows Windows XP
    El Lunes 19 de Marzo de 2007 a las 10:08
  2. Gravatar

    InKiLiNo

    # 2

    Ja,ja,ja,ja… que esperabas, los milagros no existen :P

    Con Mozilla Firefox Mozilla Firefox 1.5.0.10 y Windows Windows XP
    El Lunes 19 de Marzo de 2007 a las 11:01
  3. Gravatar

    paranoias

    # 3

    Jjajajja tira el IE, solo sirve para joder al que tiene un blog y comerle el coco. jajajaja

    Con Mozilla Firefox Mozilla Firefox 2.0.0.2 y Windows Windows XP
    El Lunes 19 de Marzo de 2007 a las 12:23
  4. Gravatar

    Cesarius

    # 4

    Yo deje de tratar que se viera bien en IE, ya me cansé… además nunca lo logré snif :(

    Con Mozilla Firefox Mozilla Firefox 2.0.0.2 y Linux Linux
    El Lunes 19 de Marzo de 2007 a las 18:09
  5. Gravatar

    InKiLiNo

    # 5

    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 ;)

    Con Mozilla Firefox Mozilla Firefox 2.0.0.2 y Mac OS Mac OS X
    El Lunes 19 de Marzo de 2007 a las 18:56
  6. Gravatar

    forat

    # 6

    Tronko este es mi ultimo comentario ….

    Menuda rayada esto de quedarse sin internet !!!

    Nos vemos pronto champion !!! ;)

    Con Mozilla Firefox Mozilla Firefox 2.0 y Linux Linux
    El Martes 20 de Marzo de 2007 a las 1:23
  7. Gravatar

    InKiLiNo

    # 7

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

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

    Con Mozilla Firefox Mozilla Firefox 2.0.0.2 y Windows Windows XP
    El Martes 20 de Marzo de 2007 a las 6:16
  8. Gravatar

    Dennis Mike

    # 8

    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

    Con Mozilla Firefox Mozilla Firefox 2.0.0.2 y Windows Windows XP
    El Miércoles 21 de Marzo de 2007 a las 6:26
  9. Gravatar

    InKiLiNo

    # 9

    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 :P

    Con Mozilla Firefox Mozilla Firefox 2.0.0.2 y Windows Windows XP
    El Miércoles 21 de Marzo de 2007 a las 8:15
  10. Gravatar

    Ulyses

    # 10

    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.

    Con Mozilla Firefox Mozilla Firefox 2.0.0.2 y Windows Windows XP
    El Jueves 22 de Marzo de 2007 a las 1:04
  11. Gravatar

    Manz

    # 11

    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,

    Con Mozilla Firefox Mozilla Firefox 2.0.0.3 y Windows Windows XP
    El Viernes 23 de Marzo de 2007 a las 8:35
  12. Gravatar

    InKiLiNo

    # 12

    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 :P

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

    Con Mozilla Firefox Mozilla Firefox 2.0.0.3 y Windows Windows XP
    El Viernes 23 de Marzo de 2007 a las 9:50
  13. Gravatar

    Dennis Mike

    # 13

    al parecer el de todos los bloggers

    Con Mozilla Firefox Mozilla Firefox 2.0.0.3 y Windows Windows XP
    El Sábado 24 de Marzo de 2007 a las 7:42
  14. Gravatar

    César

    # 14

    Muy interesante, puede quedar muy chulo en las paginas, voy a probarlo a ver que tal queda

    Con Mozilla Mozilla 1.9a4pre y Windows Windows 2000
    El Martes 17 de Abril de 2007 a las 16:21
  15. Gravatar

    Diseño Web

    # 15

    Como se hace para que en el IE 5.5 e IE 6.0 lea png?

    Con Internet Explorer Internet Explorer 7.0 y Windows Windows Vista
    El Jueves 3 de Diciembre de 2009 a las 3:23
  16. Gravatar

    Diseño Web

    # 16

    Lo acabo de hacer en uno de mis sitios y queda genial!!!

    Muchas gracias inkilino por el aporte!!!

    Con Internet Explorer Internet Explorer 7.0 y Windows Windows Vista
    El Martes 15 de Diciembre de 2009 a las 0:39

(obligatorio)





InKiLiNo.com feed feed Del.icio.us Technorati Facebook Twitter FlickR Youtube

  • Hosting para Blogs

  • Elvis: Tengo un adaptador d-link tl-wn422g(usb) como puedo hacer una antena casera para ampliar su señal?
  • amis: soy muy nuevo en esto,me gustaria subir el pagerank de mi web www.zapateria-amis.es por si alguien me puede...
  • teorico: muchas gracias.
  • InKiLiNo: Kimelet, si sigues los pasos tendría que salirte, es muuy fácil, no hay complicación alguna, ¿has...
  • Kimelet: No he conseguido lograr ver el tema del reader. Creo que està todo correcto però no logro que aparezca....
  • Marcos: Y la pagina es como el orto de mala, dice que tengo safari y tengo google chrome y dice que tengo MAC OS X y...
  • Marcos: Las explicaciones no detallan bien los nombres de los utiles necesarios para la construccion
  • juampi: jaja