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 {HTML
color: #f2f2f2;
text-shadow: 0px -1px 0px #424242;
font-size: 100px;
font-family: 'Unna', serif;
}
<span class='sombra1'>Lorem ipsum</span>
Texto con sombra tenue
Lorem Ipsum
CSS
.sombra2 {HTML
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 80px;
font-weight: bold;
font-family: 'Arial Black';
}
<span class='sombra2'>Lorem ipsum</span>
Texto con sombra marcada
Lorem Ipsum
CSS
.sombra3 {HTML
color: #b82f14;
text-shadow: 6px 6px 0px rgba(83,155,194,0.5);
font-size: 80px;
font-family: 'Sancreek', cursive;
}
<span class='sombra3'>Lorem ipsum</span>
Texto vintage
Lorem Ipsum
CSS
.sombra4 {HTML
color: #69D2E7;
text-shadow:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
font-size: 100px;
font-family: 'Lobster', cursive;
}
<span class='sombra4'>Lorem ipsum</span>
Texto en 3D
Lorem Ipsum
CSS
.sombra5 {HTML
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;
}
<span class='sombra5'>Lorem ipsum</span>
Texto con efecto neón
Lorem Ipsum
CSS
.sombra6 {HTML
color: #DF01A5;
text-shadow: 0px 0px 8px #FE2EF7;
font-size: 80px;
font-family: 'Orbitron', sans-serif;
}
<span class='sombra6'>Lorem ipsum</span>
Texto tipo retro
Lorem Ipsum
CSS
.sombra7 {HTML
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;
}
<span class='sombra7'>Lorem ipsum</span>
Texto tipo comic
Lorem Ipsum
CSS
.sombra8 {HTML
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;
}
<span class='sombra8'>Lorem ipsum</span>
Texto con efecto anaglifo
Lorem Ipsum
CSS
.sombra9 {HTML
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;
}
<span class='sombra9'>Lorem ipsum</span>
Texto con fuego
Lorem Ipsum
CSS
.sombra10 {HTML
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;
}
<span class='sombra10'>Lorem ipsum</span>
Texto borroso
Lorem Ipsum
CSS
.sombra11 {HTML
color: transparent;
text-shadow: #81DAF5 0 0 12px;
text-transform: uppercase;
font-size: 60px;
font-family: 'Chango', cursive;
}
<span class='sombra11'>Lorem ipsum</span>
Texto estilo groovy
Lorem Ipsum
CSS
.sombra12 {HTML
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;
}
<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.
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 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.
Ciudad Blogger
Gracias Potro, esta entrada me servirá para hacer algunos cambios en mi blogg. Saludos
ResponderEliminarmuchas gracias muy bonitos
ResponderEliminarMuchas gracias por el tutorial. Está genial ^_^
ResponderEliminaral blog*
ResponderEliminarlá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
ResponderEliminarHola, lo que sucede es que al poner los estilos de la sombra eliminaste la llave de cierre de los estilos que están arriba.
Eliminar.girar:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
z-index:2; /*Ignorar*/
Si miras ahí verás que le falta el cierre }
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
EliminarHola de nuevo XIC Nou Barris. Sí, es para ti la respuesta :)
EliminarArriba 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
gracias por todo potro, ahora sí... necesitaba tu explicación para los torpes, en este caso yo !!! núria
Eliminargracias 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
EliminarSaludos Potro, qué gusto leer siempre tus entradas, tu fiel seguidor, abrazos.
ResponderEliminarMuchas gracias Edwin, abrazos.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarPues no sé a qué te refieres con que sea seguro, pero no creo publicar algo como eso por ahora.
EliminarPd. 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 ;)
Ok, potro, perdon, :(
EliminarHola Potro me llamó la atención lo de SEO en los comentarios me dices por favor mil gracias !
EliminarHola 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 ;)
EliminarPotro, estos diseños estás poderosos... Ya mirare en un futuro donde utilizarlos... :D Saludos!!
ResponderEliminarSeguro en un futuro encontrarás dónde utilizarlos ;)
EliminarGeniales diseños Potro!! :D me gustan mucho!!
ResponderEliminarMe alegro que así sea porque esa era la intención :)
EliminarGracias a ti, por tu visita y comentario.
ResponderEliminarPuedo verlos todos (así que estoy "modernizada" ;) ), y ¡todos preciosos!.
ResponderEliminarMuchas gracias, Potro.
Y muchos besos. :)
No más preciosos que tú :*
EliminarGRacias potro
ResponderEliminarGracias Potro! Como siempre una ayuda al blog, y algo con que entretenernos un rato...saludos!
ResponderEliminarQue Sea Rock!
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. :)
ResponderEliminarMuchas gracias Dante, ¡un abrazo!
EliminarEl "Vintage" es chulísimo, ni sabia que se podría repetir la sombra, buen aporte!
ResponderEliminarHola El Potro, buen artículo como siempre.
ResponderEliminarTengo 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
Hola Miguel, quítale las comillas a los títulos de esas dos entradas ("Mujer"), quitándoselas se resolverá el problema.
EliminarMuchísimas gracias El Potro, solucionado el problema.
ResponderEliminarNo 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.
Muchas gracias a ti Miguel, por tu donativo :)
EliminarAlgunos 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.
No Luis, pero en Google seguro encuentras algunas opciones. Buen fin de semana!
ResponderEliminarHola 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
ResponderEliminarHola Jesus, una opción es que agregues estos estilos en tu plantilla:
Eliminar.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.
gracias mi hermano gracias por tu ayuda me sirvio de maravilla disculpa la tardanza jejeje saludos suerte con tu blog sigue asi :D.
EliminarHola 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 ;)
ResponderEliminarSi 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.
ResponderEliminarLos 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!
Gracias, otro beso para ti :)
ResponderEliminarHola 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....
ResponderEliminarHola, para reducir el tamaño de la última sombra cambia en esta parte:
Eliminar2px -25px 18px #f20;
Ese -25px ponle otro valor, por ejemplo -15px
Qué bonito! Gracias, tomaré la idea.
ResponderEliminarHola potro! excelente pagina! soy tu seguidora fiel aunque mayormente no hago casi nada con blogger, pero me encante leerte y regularmente practico algo...
ResponderEliminarEjercitando 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
Muchas gracias por tu comentario Inspiración Divina.
EliminarEn 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!
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!
ResponderEliminarHola Cherry, a los títulos de los gadgets? En la entrada se menciona qué hay que cambiar. Saludos.
Eliminaramigo el potro soy jesús de Venezuela tengo una duda grande :
ResponderEliminarhacer 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
Hola Jesus, sólo agrega el código del enlace como lo harías normalmente con cualquier otro enlace. Ejem:
Eliminar<a href='URL del enlace'> Aquí el texto o código de la imagen que tengas </a>
Como puedo hacer para que el efecto "Texto en 3D" se produzca en el titúlo de cada entrada/post del blog?
ResponderEliminarComo puedo hacer para que el efecto "Texto en 3D" se produzca en el titúlo de cada entrada/post del blog?
ResponderEliminar