Efectos de sombra en los textos con text-shadow

1 de julio de 2014 56 comentarios ,

Una de las maravillas del CSS es que podemos hacer que los textos se vean tan espectaculares como si los hubiéramos hecho con Photoshop o algo parecido, y sin necesidad de usar imágenes en la mayoría de los casos.
text-shadow es una propiedad que aplica una sombra a un texto, pero además podemos añadir múltiples sombras de diversos colores -y transparencias- a un mismo elemento y con ello podemos conseguir textos más llamativos y que salen de lo ordinario.
Lo que veremos a continuación son 12 ejemplos con text-shadow ya sea para que decores el título de tu blog, los títulos de tus entradas, de tus gadgets, o cualquier texto que se te ocurra.

Primero vamos a ver cómo ponerlo a cualquier texto, ya sea al texto de una entrada, o al de un gadget. En cualquiera de los casos el CSS va antes de ]]></b:skin> y el HTML dentro de tu post o donde lo quieras usar.


Texto con Relieve


Lorem Ipsum

CSS
.sombra1 {
color: #f2f2f2;
text-shadow: 0px -1px 0px #424242;
font-size: 100px;
font-family: 'Unna', serif;
}
HTML
<span class='sombra1'>Lorem ipsum</span>


Texto con sombra tenue


Lorem Ipsum

CSS
.sombra2 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 80px;
font-weight: bold;
font-family: 'Arial Black';
}
HTML
<span class='sombra2'>Lorem ipsum</span>


Texto con sombra marcada


Lorem Ipsum

CSS
.sombra3 {
color: #b82f14;
text-shadow: 6px 6px 0px rgba(83,155,194,0.5);
font-size: 80px;
font-family: 'Sancreek', cursive;
}
HTML
<span class='sombra3'>Lorem ipsum</span>


Texto vintage


Lorem Ipsum

CSS
.sombra4 {
color: #69D2E7;
text-shadow:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
font-size: 100px;
font-family: 'Lobster', cursive;
}
HTML
<span class='sombra4'>Lorem ipsum</span>


Texto en 3D


Lorem Ipsum

CSS
.sombra5 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color: #fff;
font-size: 90px;
font-family: Impact;
}
HTML
<span class='sombra5'>Lorem ipsum</span>


Texto con efecto neón


Lorem Ipsum

CSS
.sombra6 {
color: #DF01A5;
text-shadow: 0px 0px 8px #FE2EF7;
font-size: 80px;
font-family: 'Orbitron', sans-serif;
}
HTML
<span class='sombra6'>Lorem ipsum</span>


Texto tipo retro


Lorem Ipsum

CSS
.sombra7 {
padding-left: 20px;
text-transform: uppercase;
color: #E8E3AE;
text-shadow:
-10px 10px 0px #A9CBA6,
-20px 20px 0px #7EBEA3,
-30px 30px 0px #53A08E;
font-size: 80px;
font-family: 'Luckiest Guy', cursive;
}
HTML
<span class='sombra7'>Lorem ipsum</span>


Texto tipo comic


Lorem Ipsum

CSS
.sombra8 {
color: #fff;
text-shadow:
-2px -2px 0 #000,
1px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
font-size: 100px;
font-family: 'Boogaloo', cursive;
}
HTML
<span class='sombra8'>Lorem ipsum</span>


Texto con efecto anaglifo


Lorem Ipsum

CSS
.sombra9 {
text-shadow:
9px 2px 0 rgba(0, 255, 255, 0.5),
-6px -1px 1px rgba(255, 0, 0, 0.4);
color: #2A0A12;
font-size: 80px;
font-family: 'Special Elite', cursive;
}
HTML
<span class='sombra9'>Lorem ipsum</span>


Texto con fuego




Lorem Ipsum

CSS
.sombra10 {
color: #DF0101;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow:
0 0 4px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
font-size: 90px;
font-family: 'New Rocker', cursive;
}
HTML
<span class='sombra10'>Lorem ipsum</span>



Texto borroso


Lorem Ipsum

CSS
.sombra11 {
color: transparent;
text-shadow: #81DAF5 0 0 12px;
text-transform: uppercase;
font-size: 60px;
font-family: 'Chango', cursive;
}
HTML
<span class='sombra11'>Lorem ipsum</span>


Texto estilo groovy



Lorem Ipsum

CSS
.sombra12 {
color: #fcc90f;
text-shadow:
-2px -2px 0 #29296e,
1px -2px 0 #29296e,
-2px 2px 0 #29296e,
2px 2px 0 #29296e,
1px 1px #e60602,
2px 2px #e60602,
3px 3px #29296e,
4px 4px #29296e,
5px 5px #29296e,
6px 6px #29296e,
7px 7px #29296e,
8px 8px #29296e,
9px 9px #29296e,
10px 10px #29296e,
11px 11px #29296e,
12px 12px #29296e,
13px 13px #29296e,
14px 14px #29296e,
15px 15px #29296e,
16px 16px #29296e,
17px 17px #29296e,
18px 18px #29296e,
19px 19px #29296e,
20px 20px #29296e;
font-size: 90px;
font-family: 'Henny Penny', cursive;
}
HTML
<span class='sombra12'>Lorem ipsum</span>


En todos los casos yo he puesto un tipo de fuente sólo para ejemplificar, si deseas usar esa fuente tómala de Google Fonts, o cámbiala por otra.
También puedes cambiar los colores, ya sea el del texto, o de la sombra, sólo deberás cambiar los códigos hexadecimales (los que empiezan con signo de número) o los rgba (los que están entre paréntesis), según sea el caso.

Si quisieras usar estos textos con sombras en el título de tu blog, únicamente cambia la clase del texto, por ejemplo, en lugar de .sombra1 { pondrías .header h1 {

Si quisieras usarlo en los títulos de tus entradas, cambia .sombra1 { por .post h3 {

Si quisieras usarlo en los títulos de tus gadgets, cambia .sombra1 { por .sidebar h2 {

Toma en cuenta que en algunas plantillas los nombres de las clases de estas áreas pueden variar, los que he mencionado son para las plantillas originales de Blogger.
También considera que si lo usas para los títulos de tu plantilla, ya sea para el título del blog, de entradas, o gadgets, quizá tengas que eliminar otros estilos que ya estén especificados en tu plantilla, así que en esos casos deberás localizar los estilos de esas áreas y eliminar los que creas que "afectan" la forma como se mira el resultado final.

Si no has podido ver ningún efecto de sombras en los textos que hemos puesto de ejemplo, entonces usas un navegador muy antiguo. En lo que cambias a un navegador más moderno te dejo la imagen de cómo se deben ver los textos con sombras de esta entrada.




56 comentarios en:

" Efectos de sombra en los textos con text-shadow "

  1. Como siempre pequeños aportes que le dan un estilo diferente a el blog y lo diferencian de cualquier otro. Gracias Potro por estos aportes que siempre nos da :)

    Saludos !

    ResponderEliminar
  2. Gracias Potro, esta entrada me servirá para hacer algunos cambios en mi blogg. Saludos

    ResponderEliminar
  3. Muchas gracias por el tutorial. Está genial ^_^

    ResponderEliminar
  4. lástima que no me vaya en mi blog,,, lo he probado de mil maneras, de todas formas me guardo la entrada para probarlo mas adelante. gracias/núria

    ResponderEliminar
    Respuestas
    1. Hola, lo que sucede es que al poner los estilos de la sombra eliminaste la llave de cierre de los estilos que están arriba.

      .girar:hover {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      z-index:2; /*Ignorar*/

      Si miras ahí verás que le falta el cierre }

      Eliminar
    2. disculpa potro,,, esta respuesta es para mi???? lo digo porque no se parece en nada a lo que publicas sobre la sombra en textos. gracias

      Eliminar
    3. Hola de nuevo XIC Nou Barris. Sí, es para ti la respuesta :)
      Arriba de donde pusiste el código de las sombras tienes ese otro código, el que te puse en el comentario. El hecho de que ese código no tenga su llave de cierre afecta todo lo que tengas de bajo, en este caso afecta al de las sombras.

      Te dejo un enlace con más información sobre el tema:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    4. gracias por todo potro, ahora sí... necesitaba tu explicación para los torpes, en este caso yo !!! núria

      Eliminar
    5. gracias potro,,, necesitaba una respuesta así para torpes, o sea yo... ya lo tengo puesto, ahora me toca pelearme con el tipo de letra porque no me la reconoce, pero iré investigando. muchas gracias y buen finde !!! núria

      Eliminar
  5. Saludos Potro, qué gusto leer siempre tus entradas, tu fiel seguidor, abrazos.

    ResponderEliminar
  6. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Pues no sé a qué te refieres con que sea seguro, pero no creo publicar algo como eso por ahora.

      Pd. En los comentarios sólo se permiten las etiquetas <a> si son enlaces internos, no externos, alguien tiene que cuidar el SEO de este blog ;)

      Eliminar
    2. Hola Potro me llamó la atención lo de SEO en los comentarios me dices por favor mil gracias !

      Eliminar
    3. Hola Andrés, los comentarios también se indexan con los distintos buscadores así que comprenden todo el contenido que pongamos en ellos, incluyendo los enlaces; si en un comentario hay un enlace HTML este enlace se toma en cuenta, y como sabrás, la cantidad de enlaces externos por cada página deben ser moderados pues son "votos" que regalamos a otros sitios, por ello debemos ser muy mesurados con esos enlaces ;)

      Eliminar
  7. Potro, estos diseños estás poderosos... Ya mirare en un futuro donde utilizarlos... :D Saludos!!

    ResponderEliminar
    Respuestas
    1. Seguro en un futuro encontrarás dónde utilizarlos ;)

      Eliminar
  8. Geniales diseños Potro!! :D me gustan mucho!!

    ResponderEliminar
    Respuestas
    1. Me alegro que así sea porque esa era la intención :)

      Eliminar
  9. Puedo verlos todos (así que estoy "modernizada" ;) ), y ¡todos preciosos!.
    Muchas gracias, Potro.
    Y muchos besos. :)

    ResponderEliminar
  10. Gracias Potro! Como siempre una ayuda al blog, y algo con que entretenernos un rato...saludos!

    Que Sea Rock!

    ResponderEliminar
  11. Hola Potro, muy buenos días... En verdad, qué buena entrada, estaba buscando este tipo de efecto. nadie mejor que tú para explicarla. Gracias por compartir con nosotros estos excelentes trucos. Que tengas un magnífico día. :)

    ResponderEliminar
  12. El "Vintage" es chulísimo, ni sabia que se podría repetir la sombra, buen aporte!

    ResponderEliminar
  13. Hola El Potro, buen artículo como siempre.
    Tengo una consulta que no tiene que ver con lo que se habla en este espacio, en la que agradecería mucho que puedas ayudarme.
    El problema es fácil de explicar: de un momento a otro dejó de funcionarme una función javascript que hace que las imágenes aparezcan en forma de catálogo y con un efecto deslizante mause over. Lo curioso es que solo aparecen sin efecto las dos últimas entradas y las que publico ahora tampoco funcionan con el efecto.
    El blog es http://megaofertas.rdn24.com

    Esto empezó a ocurrir luego de hacer unas modificaciones al menú al separar una de las listas “POR ZONAS” en tres bloques.

    He hechos las pruebas con un respaldo de la plantilla y tampoco funcionaba.
    Muchas gracias. Saludos

    ResponderEliminar
    Respuestas
    1. Hola Miguel, quítale las comillas a los títulos de esas dos entradas ("Mujer"), quitándoselas se resolverá el problema.

      Eliminar
  14. Muchísimas gracias El Potro, solucionado el problema.
    No se me hubiera ocurrido que el problema eran las comillas, sobre todo porque en otras entradas también hay comillas y se muestra con los efectos perfectamente como en la de la esquina superior derecha de este enlace http://megaofertas.rdn24.com/search?updated-max=2014-06-27T17:36:00%2B02:00&max-results=25&start=50&by-date=false

    He hecho una pequeña donación por tu gran ayuda y rapidez de respuesta, además de tu excelente labor con ciudad blogger.

    Por qué las comillas afectan a la función del código?; es que me ha quedado la curiosidad.

    ResponderEliminar
    Respuestas
    1. Muchas gracias a ti Miguel, por tu donativo :)
      Algunos scripts no reconocen caracteres especiales, o comillas, al no reconocerlos dejan de hacer su función. Ignoro porqué las otras entradas sí lo acepta, tal vez sólo pase con las entradas de la portada.

      Saludos, y gracias de nuevo.

      Eliminar
  15. Gracias potro, muy bueno. me encanto el neon y el anaglifo :P.
    Una pregunta que no tiene que ver con esto,¿sabes de algun slider responsive con caption?

    Gracias por todo, sos lo mas!

    ResponderEliminar
    Respuestas
    1. No Luis, pero en Google seguro encuentras algunas opciones. Buen fin de semana!

      Eliminar
  16. Hola potro como estas? nesesito mucho tu ayuda y espero que me ayudes, ante mi blog era negro todo oscuro y las letra de las entradas las puse blanca fueron banstante cientos de ellas pero ahora le puse otra plantila una blanca y ahora el texto de mis entradas se ven blanca osea no se ve por que el fondo es blanco y las entradas las letras son blanca tambien, como puedo hacer para ponerlas negras el texto de todas las entradas? la unica forma que conosco es entrando a cada entrada y cambiarle el color pero son muchos post, se pede cambiar por html? o css, espero me ayude de antemano gracias

    ResponderEliminar
    Respuestas
    1. Hola Jesus, una opción es que agregues estos estilos en tu plantilla:

      .post-body span {
      color: #555 !important;
      }

      Pero, ya ninguna entrada podrá tener texto de algún otro color, todas tendrán el mismo color siempre.

      Eliminar
    2. gracias mi hermano gracias por tu ayuda me sirvio de maravilla disculpa la tardanza jejeje saludos suerte con tu blog sigue asi :D.

      Eliminar
  17. te cuento Potro, ayer puse tus letras bueno puse la 3D, perfectas y maravillosas, pero te lo digo solo para que lo sepas, el "pero", es que cual no ha sido mi sorpresa que en mi trabajo voy a mirar como se ve, y usamos windows7, pues la 3D, al llevar el fondo blanco no se ve, es decir que quien elija este tipo de letra que se acuerde que puede ser que segun en que tipo de sistema se puede no ver e incluso no admite el 3D, voy a intentar otro color, a pesar de que no se ve en 3D tampoco en w7. O a lo mejor cambio el tipo de letra son todas tan bonitas bueno solo es una anecdota, todo lo que haces como siempre el numero 1. Besicos

    ResponderEliminar
    Respuestas
    1. Hola en-rHed- ando, no es tanto el sistema operativo sino el navegador, por eso muestro al final la imagen para quienes usen navegadores desactualizados puedan ver cómo se mira en un buen navegador ;)

      Eliminar
  18. sí, es cierto, el sistema operativo es windows7, pero el navegador es IE no habia caido en el detalle que IE es una kk, nunca me acuerdo, para mi casi no existe IE, en mi casa tengo linux y w8, y en cada uno se ve todo de forma diferente, aunque en mi casa todo se ve perfecto, y me da mucha rabia, ver como IE deforma las paginas parece del siglo pasado, en fin cambie el tipo de letra porque el 3D no queda bien en colores, puse el sombra tenue con la fuente de Open Sans Condensed, me gusta mucho esta letra es muy elegante, y se ve bien a ver mañana en el trabajo que sorpresita me llevo, pero vamos aqui en casa se ve bien y asi se queda que me gusta mucho. Agradecimientos como siempre.

    Ah! otra cosa mire por todo tu blog que casi me sé de memoria, pero no encuentro si tienes algo de como poner adsense del blog para moviles, y no sé si con el ?m=1, yo lo estoy haciendo correctamente, me puedes asesorar al respecto muchas gracias de nuevo...y ya abusando un poco de este comentario ¿qué te parecen los nuevos anuncios de adsense el super gigante?. un gran abrazo por tu ayuda siempre.

    ResponderEliminar
    Respuestas
    1. Si puedes actualiza la versión del navegador de tu trabajo, a partir de IE9 debe verse bien, lo que sucede es que IE8 para abajo no soporta los colores RGBA con transparencia, y justamente el ejemplo del 3D usa ese tipo de colores con transparencia. Yo los probé todos con IE11 y se ven bien, o al menos un tanto decentes.

      Los anuncios de AdSense deberían de salir también en la versión móvil sin que hagas nada más, aunque en las plantillas móviles de Blogger no recuerdo si aparecen los anuncios.
      Los nuevos formatos me parecen excesivamente grandes, no sé qué tanta aceptación estén teniendo, con el tiempo sabremos si son buen generador de ingresos, en caso contrario seguro AdSense los quitará del catálogo.

      Otro abrazo para ti!

      Eliminar
    2. Muchas gracias Potro, todo perfecto, sobre los anuncios no salen solos en las plantillas de blogger solo salen en esas predeterminadas de blogger, en el resto tienes que poner el código ese que se añade para que se vean los widgets o no, que pusiste en una de tus ediciones asi los puse yo. Bueno no te molesto mas voy otro rato a disfrutar de tu blog, buen finde un besazo fuerte para ti siempre.

      Eliminar
    3. Gracias, otro beso para ti :)

      Eliminar
  19. Hola potro.. En las letras Texto con fuego, ¿Como se haría para reducir el efecto del color rojo del fuego?.. Si sacaras una segunda parte de Letras (script , etc.), seria estupendo.. Muchas Gracias....

    ResponderEliminar
    Respuestas
    1. Hola, para reducir el tamaño de la última sombra cambia en esta parte:
      2px -25px 18px #f20;

      Ese -25px ponle otro valor, por ejemplo -15px

      Eliminar
  20. Qué bonito! Gracias, tomaré la idea.

    ResponderEliminar
  21. Hola potro! excelente pagina! soy tu seguidora fiel aunque mayormente no hago casi nada con blogger, pero me encante leerte y regularmente practico algo...

    Ejercitando esto, he utilizado la sombra 4, el CSS lo coloque tal como lo mencionas...pero como lo quiero para el titulo de mis entradas, obviamente utilizo .post h3 {

    El problema es que no se donde voy a colocar el codigo HTML? disculpa lo neófita! :(

    Estoy utilizando la plantilla mas básica, sin color sin nada no se que estilo especificados de la plantilla debo eliminar para que haga efecto los títulos de mi entrada... agradeceria cualquier respuesta! saludos

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario Inspiración Divina.
      En tu caso no tienes que añadir nada de HTML porque esa estructura (la de los títulos) ya está establecida en la plantilla. Sólo debes añadir antes de ]]></b:skin> los estilos correspondientes:

      h3.post-title {
      color: #69D2E7;
      text-shadow:
      4px 4px 0px #E0E4CC,
      9px 8px 0px #F38630;
      font-size: 100px;
      font-family: 'Lobster', cursive;
      }

      ¡Saludos!

      Eliminar
  22. Hola! una consulta, quisiera saber como podría hacer para agregarle sombras o efecto neón a las letras en mi blog, pero a las de los gadget, que me gustan mucho las letras que uso, pero se confunden con el fondo. Me encanta la pagina ^^ Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Cherry, a los títulos de los gadgets? En la entrada se menciona qué hay que cambiar. Saludos.

      Eliminar
  23. amigo el potro soy jesús de Venezuela tengo una duda grande :
    hacer ca del borde-radius.. yo ise el border-radius pero lo quiero hacer con enlace
    tipo baner
    saber. osea que yo ise el border-radius en dreanweaver 8 con css pero lo quiero hacer que cuando yo le de clip me mande a la pagina deseada sabes aka mi numero +5804263746515
    correo: masterkingramirez@hotmail.com

    ResponderEliminar
    Respuestas
    1. Hola Jesus, sólo agrega el código del enlace como lo harías normalmente con cualquier otro enlace. Ejem:

      <a href='URL del enlace'> Aquí el texto o código de la imagen que tengas </a>

      Eliminar
  24. Como puedo hacer para que el efecto "Texto en 3D" se produzca en el titúlo de cada entrada/post del blog?

    ResponderEliminar
  25. Como puedo hacer para que el efecto "Texto en 3D" se produzca en el titúlo de cada entrada/post del blog?

    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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger