Blog personal de InKiLiNo


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

Tambié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

(obligatorio)





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

  • Hosting para Blogs


  • jesus: jajaja k buena desde luego un madridista conduciendo que vea eso, si es de los fanaticos habra pique
  • AquaNoche: No creo que a los del Madrid les haga mucha gracia… jejeje.
  • Akinooooo: parace una chiqita de 10 años xD
  • Cristian Hoyos: Compañero que pena con ud. pero esta llevando el concepto de WEB 2.0 a un modelo muy básico, sin...
  • Bingo: Que buenos, como se lo curra la gente, me va a costar decidirme entre varios. Gracias Ana
  • kevin oquendo: simplemente es cierto esa xqria no sirve para nada y les invitos para q se cambien al firefox 3.5 ya...
  • Milton!: Ya vengo, me estoy sacando una foto para graficarle como se debe a mis futuros hijos la explicación de...
  • InKiLiNo: @Ces que va tranquilo, el cambio de 6GB a 8GB sólo vale 90€, y creo que vale la pena, no sólo por los 2GB...







Comunidad InKiLiNo


Si tienes cuenta en Facebook:

Ultimas visitas
ver más...