Efecto de sombras en los títulos de los post

30 de septiembre de 2009 76 comentarios ,
Debo empezar aclarando que este efecto no se ve en Internet Explorer (qué raro ¿no?) así que sólo lo podrán disfrutar usuarios de Mozilla Firefox, Google Chrome y Safari.
Se trata de un efecto de sombras en los textos que bien podemos aplicar dentro de un post o para darle un toque original a los títulos de las entradas. Lo puedes usar donde quieras pero eso sí, con mucha prudencia, pues puede cansar mucho la vista del lector y terminar fastidiado.

El efecto es este:
(lo he puesto en imagen para que los que usan IE puedan verlo)

texto_sombras_shadow

Para crear este efecto en los títulos de tus entradas es muy sencillo, sólo entra en Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
.post-title {
text-shadow: #6374AB 10px -10px 3px;
}

Para usar este mismo efecto dentro de un post o un elemento HTML/Javascript sólo encierra el texto que deseas que tenga sombra con este código:
<span style="text-shadow: #6374AB 10px -10px 3px;">Aquí va tu texto</span>

Puedes modificar el color de la sombra o la distancia:
  • #6374AB es el color de la sombra.
  • 10px es el margen derecho entre la sombra y donde inicia el texto.
  • -10px es la distancia de arriba entre el texto y la sombra.
  • 3px es el difuminado de la sombra, entre más alto sea el número más borroso se verá.

Si puedes ver la sombra de este texto es que tienes un navegador moderno



NOTA: Si no aperece el efecto en los títulos, prueba poner el código debajo de .post h3 {


76 comentarios en:

" Efecto de sombras en los títulos de los post "

  1. El Potro no se aburre de postear. Jajaja.

    Buen truco Potro. Pero como dices, claro, hay que usarlo lo más moderado posible. Siempre y cuando, realmente, sea necesario y/o atractivo.
    Abusar de el truco puede resultar un poco "mareador".
    Saludos y éxito.
    Jpz.-

    ResponderEliminar
  2. Jajaja, ya después dejaré de postear.
    Sí es bastante cansado leer un párrafo con este efecto, como bien dices hay que usarlo sólo cuando sea necesario, aunque en los títulos de los post se ve muy bien y no cansa.

    Saludos.

    ResponderEliminar
  3. Opera 10 y FireFox 3.5 leen Text-Shadow sin problemas. Incluso Google Chrome 4 para Linux lo lee... De Internet Explorer, ni idea, pues no lo uso. ¿Sabéis alguno si IE soporta esta propiedad de la CSS?

    Un saludo.

    ResponderEliminar
  4. Hola José GDF,

    Esta propiedad no, se puede hacer algo parecido con filter:glow pero los resultados no son los mismos.

    Saludos.

    ResponderEliminar
  5. Hola Hola Potro muy bien todos estos post

    graciaas en serio

    puedes visitar mi web www.curiosidadesdelmundomx.tk necesito que me digas que necesito para mejorar mi web solo tomalo como que me das una sugerencia ok


    MUY BUENOS LOS TRUCOS

    ResponderEliminar
  6. Hola Alex,

    Gracias por tus comentarios.
    Tu blog lo veo bastante bien, la verdad es que estás haciendo un trabajo estupendo, sólo le agregaría algún link de contacto.

    Saludos y éxitos con tus blogs!

    ResponderEliminar
  7. GRACIAS POTRO OYE UNA PREGUNTA

    ENTRA DE NUEVO A MI BLOG DIME SI SE VEN LAS ENTRADAS RELACIONADAS ES KE NO LAS VEO Y ME DICES Y SI AHORITA MISMO AGREGO TU BOTON

    ResponderEliminar
  8. Nop, revisa que hayas puesto los códigos en el lugar correcto.
    Saludos.

    ResponderEliminar
  9. ya revise una y otra vez y no veo el error

    ResponderEliminar
  10. muchas gracias potro
    mui buen truco =)
    tanks

    ResponderEliminar
  11. Hola Alex,
    Entonces no sé qué pueda ser, quizá sea tu plantilla.
    Saludos.


    Hola **gore**,
    Ya vi que lo aplicaste en tu blog y se ve genial.
    Saludos.

    ResponderEliminar
  12. Potro tu si que le sacas el jugo a Blogger, no pense que se podia hacer eso...

    Posdata: Hay un problema al ver tu blog con IE 8

    ResponderEliminar
  13. Hola Jorge,

    ¿Qué problema ves con IE8?

    ResponderEliminar
  14. muy bueno, los puse también en mi sidebar modificando el código
    .post-title { >>>>antes<<<<
    .sidebar h2 { >>>después<<<

    ResponderEliminar
  15. Uhhh con ese fondo negro se ve muy bien el efecto =)

    ResponderEliminar
  16. Gracias. Queda chulo. Lo he puesto en los títulos de las entradas, pero un poquillo más "cerca" del texto, a 5 px. Como el fondo del blog es negro, (http://lagrimasen.blogspot.com/) queda muy elegante. Me quedo a dar una vuelta por aqui, si no te importa, que tiene mucho que leer.
    Salu2

    ResponderEliminar
  17. Hola Feroz,

    Bienvenido a Ciudad Blogger, toma de aquí todo lo que necesites.
    Definitivamente con fondos negros se ve mucho mejor este efecto y los 5px de distancia fueron muy acertados ;)

    Saludos.

    ResponderEliminar
  18. Potro una pregunta,que numero seria el color rojo?o de donde se pueden sacar?

    ResponderEliminar
  19. El rojo es el #FF0000
    En ésta lista puedes consultar la tabla de colores y sus códigos.
    Saludos.

    ResponderEliminar
  20. Me alegro que te haya gustado.
    Saludos.

    ResponderEliminar
  21. Potro,tus artículos han sido de mucha utilidad para mi,simplemente espectacular tu blog;he usado algunas de tus aportaciones en mi blog y sin duda marcan una gran diferencia.Solo me queda darte las gracias y seguramente seguire dandome la vuelta de vez en cuando por aquí.
    Gracias Potro,que Dios te bendiga.

    ResponderEliminar
  22. potro tu web no deja de impresionarme
    solo quiero saber como poner las etiquetas como tu me decis porfa?
    grax bro
    ¡ un abrazo!

    ResponderEliminar
  23. Hola Ledwin yankee,

    ¿Cómo quieres las etiquetas?

    ResponderEliminar
  24. HOLA ME GUSTA MUCHO ESTE TIP YA QUE LO VI PLASMADO EN EL BLOG DE TWITTER http://blog.twitter.com/ PERO EN EL BLOG LO TIENE EN TODO EL TEXTO ¿COMO LOGOR HACER ESO EN BLOGGER? thebigzon3@gmail.com

    ResponderEliminar
  25. Hola @christopher_on3,

    Para que el efecto se aplique a todo el texto de las entradas usa este código:

    .post {
    text-shadow: #6374AB 10px -10px 3px;
    }

    Saludos.

    ResponderEliminar
  26. Hola Potro una pregunta: como puedo hacer para que al poner el mouse sobre el titulo del post cambie de color pero solo un color, como el tuyo que cambia a color naranja,ojala me puedas ayudar,Sludos.

    ResponderEliminar
  27. El Potro, que tal? excelente post! como siempre!!! bueno, yo nuevamente por aqui con una duda, es posible colocar estas sombras a la descripcion del blog?

    ResponderEliminar
  28. Claro, puedes poner los códigos debajo de:
    .description {

    Saludos.

    ResponderEliminar
  29. El Potro, muchas gracias, funciona excelente!

    ResponderEliminar
  30. Excelente El Potro, gracias!
    Lo aplique a los titulos de los post, entradas y footer!

    ResponderEliminar
  31. Qué bueno que te ha servido ;)
    Saludos.

    ResponderEliminar
  32. Asi es, de todas formas no abuse del tip, ya que si no abusa realmente de la vista del lector. Por lo tanto aplique una leve sombra. Salud !

    ResponderEliminar
  33. Mucho mejor, el lector agradecerá que un blog no sea un ataque visual de efectos e imágenes ;)

    ResponderEliminar
  34. Hola Potro, me gusto mucho el tip, Muchas Gracias por compartir, le hice una pequeña adaptación y me quedo como resplandor no como sombra. Si te gusta me agradaría que lo subas al post para que mas personas lo vean el código que use fue.

    .post-title {
    text-shadow: #EDDC1F 2px -2px 5px;
    }

    y el ejemplo es el siguiente

    http://i45.tinypic.com/2qupsie.jpg

    espero haber contribuido en algo saludos, te quiero pasar un tip, pero lo haré por mail, Gracias

    ResponderEliminar
  35. Te ha quedado muy bien, parece efecto neon :)

    Gracias por compartirlo.
    Saludos.

    ResponderEliminar
  36. Hola Potro, tengo una consulta que hacerte, llevo días buscando entre tu blog y el de Eulalia. Estoy ahora con una scribe para un poemario con sonetos. Me gustaría que el texto de las entradas apareciera más espaciado con respecto al título, pero no sé ya cómo hacerlo. imagino que necsitaré algún tipo de "orden" para la skin pero como no sé html... Con el quote sólo consigo aumentar la sangría en el lateral y lo que pretendo es más margen arriba y si fuera posible abajo también con respecto a la línea que delimita el principio y fin de entrada, no sé si me he explicado. te dejo mi correo. te agradecería mucho me ayudaras.
    un saludo
    Sofía
    mi email por si te resulta más cómodo, si no vendré a este post: sserragiraldez@yahoo.es
    En todo caso sólo se me ocurre insertarle algún tipo de imagen al principio y al final, pero antes de ponerme a ello, me gustaría poder solucionar este aspecto porque es algo que suele molestarme en todos mis blogs.

    ResponderEliminar
  37. Hola Sofía,

    Para darle más espacio entre el contenido de la entrada y el título busca esta parte en tu plantilla:
    .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    }

    Cámbialo por esta otra:
    .post-body {
    margin:20px 0 20px;
    line-height:1.6em;
    }
    El primer valor en negrita es la distancia entre el título y el inicio de la entrada; el segundo en negrita es el espacio del final de la entrada. Puedes modificar esos valores según sea tu gusto.

    ¡Saludos!

    ResponderEliminar
  38. Potro, gracias..pero no lo consigo.
    te copio lo que me encuentro, he intentado modificar introduciéndole lo de los 20 píxeles en cualquiera de esas líneas, pero no se me modifica nada.
    te copio lo que parece en la plantilla, sin modificar, tal cual

    .post-body p {
    line-height:1.5em;
    margin-top:0;
    margin-$endSide:0;
    margin-bottom:.6em;
    margin-$startSide:0;
    }
    Un saludo

    ResponderEliminar
  39. ¡ya está, Potro!..no sé por qué aquí sí funciona AHORA el simplemente darle al intro y desplazar en la edición de la entrada el texto...me lo respeta cuando la publico.Te juro que no entiendo nada, pero ahora sólo tendría que modificar cada entrada y ya está, con un par de intros..eso sí, lo de abajo..intentaré probar a ver si así, es que parece tan sencillo que no me lo termino de "creer"..:)
    Ya te comento.

    ResponderEliminar
  40. ¡ya está Potro!, funciona lo del intro en todas, bueno en cinco o seis que he probado, pero como son pocas, yo creo que irá bien :))
    Eso sí, en la primera, ques una foto que ocupa toda la entrada, amodo de portada, no tenía forma de que el intro funcionase, ni editando en html, pero entonces he puesto una de las etiquetas que ya em aparecía arriba de la foto porque le había dado al intro para separarla del borde, en la edición en html de la entrada pero tras la fotografía,copiar y pegar
    ésta

    div class="separator" style="clear: both; text-align: center;">
    </div

    y ¡ha funcionado!..:)
    imagino que si la repito una o dos veces se me separará la foto lo que vaya queriendo de abajo, ¿no?
    :)), mil gracias otra vez, si no es por tu atención, no lo consigo.
    Un beso enorme
    bueno veo que no me permite especificarte la etiqueta le voy aquitar los ángulos de entrada y cierre antes y después de los div , a ver asi sí

    ResponderEliminar
  41. Puedes probar con el mismo método en la imagen y ver si te funciona, aunque no es necesario darle los intro a cada entrada, sólo necesitas modificar los valores que te mencioné antes, entre más grande sea el valor más espacio habrá.

    ¡Saludos!

    ResponderEliminar
  42. buen truco potro...por casualidad, como puedes ponerle al titulo de las sidebar el fondo negro y que el contenido quede de fondo blanco como lo tienes tu
    saludosss y se agradece que nos ayudes;)

    ResponderEliminar
  43. Debajo de .sidebar h2{ está en color de fondo y el color del texto, ahí los cambias por los colores que quieres que tengan los títulos de los gadgets.

    Saludos.

    ResponderEliminar
  44. gracias potro:)

    http://todoespoker.blogspot.com

    ResponderEliminar
  45. LO UTILICÈ Y ME RE-GUSTA COMO QUEDA EN MI BLOG...GRACIAS!!..

    http://diariolocalcanals.blogspot.com/

    ResponderEliminar
  46. hola Potro:

    perdona mi ignorancia pero que es ¿]]>? y en que momento aparece o como puedo ubicarlo ya que en otras publicaciones tuyas las mencionas eso un poco que me desacomoda en donde lo ubico o si lo coloco... hasta luego

    ResponderEliminar
  47. Al igual que en todos los post siempre menciono que está entrando en Diseño > Edición de HTML.
    Puedes ubicarlo usando las teclas CTRL + F o bien, buscarlo antes de </head>

    ResponderEliminar
  48. No tendría que desbaratar nada, a menos que no lo hayas hecho correctamente.

    ResponderEliminar
  49. Hola Potro, de entrada decirte que casi todo lo que tiene mi blog a ido saliendo de lo aprendido tus artículos desde hace año y medio aunque el blog figure como de hace 7 meses, que es cuando le puse dominio propio. Ya me vuelto a enrollar,al grano. Quería que me dieras tu opinión.Es un blog de psicologia, y aunque para la palabra clave de la url estoy bien posicionado,para otras muchas categorias no.

    La pregunta es dejo las categorias como están, o es mejor crear un subdominio para cada una de ellas.
    Muchas gracias por todo, y si además me respondes a la duda ,lo bordas.

    El blog es www.terapiacognitiva.info

    Saludos
    Javier Martín

    ResponderEliminar
  50. Hola sonnitex,

    Es un gusto saber que parte de tu blog ha sido construido por los temas que compartimos en este espacio.

    Los subdominios no te los aconsejo, es muy raro que un subdominio logre posicionarse, lo mejor es que a estas categorías les des un poco más de énfasis, por ejemplo citándolas dentro de tus entradas, remarcarlas en negritas, usar sinónimos de estas palabras e incluso frases completas que pueden ser objeto de búsqueda.

    También, de ser posible, que estas, o algunas de las categorías se encuentren dentro de un formato H2, por ejemplo:
    <h2>PSICOLOGÍA INFANTIL</h2>

    Y si el tamaño queda demasiado grande puedes aplicarle estilos para que se reduzca un poco:
    <h2 style="font-size:13px">PSICOLOGÍA INFANTIL</h2>

    Saludos.

    ResponderEliminar
  51. Hola!!!!!!!!
    Muchas gracias me sirvio tu truco. Te lo agradezco mucho deveras.
    :D

    ResponderEliminar
  52. Muy chulo el truco, me gusta mucho como queda..

    Llevo tiempo queriéndo poner un efecto sombreado en los bordes del fondo principal de mi blog, lo he visto en algunos blogs y me gusta bastante el efecto, ¿Me podrías decir com hacerlo?

    No he visto ninguna otra entrada tratando este tema por eso te la pregunto aquí.

    Muchísimas gracias de antemano

    Saludos

    ResponderEliminar
  53. Hola MariajoyAndrea, ¿cuál plantilla usas?

    ResponderEliminar
  54. Sólo agrega estos estilos de sombra debajo del #outer-wrapper {

    -webkit-box-shadow: 0px 0px 50px #000000;
    -moz-box-shadow: 0px 0px 50px #000000;
    box-shadow: 0px 0px 50px #000000;

    ResponderEliminar
  55. Hola Potro he estado buscando estos estilos en mi plantilla y no los encuentro.
    Te dejo la dirección de mi blog por si me puedes ayudar.
    http://nancyesunica.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Es que esa no es la Mínima, es la Ethereal.
      Debajo de .main-inner { agrega esto:

      -webkit-box-shadow: 0px 0px 50px 30px #000000;
      -moz-box-shadow: 0px 0px 50px 30px #000000;
      box-shadow: 0px 0px 50px 30px #000000;

      Aunque en esa plantilla quizá el resultado no sea el mejor.

      Eliminar
  56. Hola de nuevo, ya lo he pegado en mi plantilla pero no se aprecia ningún cambio???

    Saludos

    ResponderEliminar
    Respuestas
    1. Si lo miras desde un navegador moderno verás el cambio. Esos estilos no funcionan en Internet Explorer.
      Saludos.

      Eliminar
  57. hola potro
    mira quiero quitarle el marco que se ve en las entradas cuando las publico es decir cuando publico una foto o algo siempre queda como un marco alli y quiero quitar eso como lo hago

    ResponderEliminar
  58. http://divasmaximo.blogspot.com/ alli al igual que te hice otra pregunta en otro post gracias potro

    ResponderEliminar
  59. http://divasmaximo.blogspot.com/ en ese potro al igual que en otra pregunta que te hice en otro post

    ResponderEliminar
    Respuestas
    1. Pues no veo ningún borde en las imágenes :/

      Eliminar
  60. me encanta :D gracias por el tuto! ♥

    ResponderEliminar
  61. acuérdate de opera, jeje, no es perfecto pero tampoco el peor, saludos

    ResponderEliminar
  62. -Wow este truco es muy bueno, yo lo aplique tanto en el titulo de las Entradas como en el de la Sidebar y quedo muy bien, gracias Potro...-

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger