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)
(lo he puesto en imagen para que los que usan IE puedan verlo)
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 {
Ciudad Blogger
El Potro no se aburre de postear. Jajaja.
ResponderEliminarBuen 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.-
Jajaja, ya después dejaré de postear.
ResponderEliminarSí 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.
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?
ResponderEliminarUn saludo.
Hola José GDF,
ResponderEliminarEsta propiedad no, se puede hacer algo parecido con filter:glow pero los resultados no son los mismos.
Saludos.
Hola Hola Potro muy bien todos estos post
ResponderEliminargraciaas 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
Hola Alex,
ResponderEliminarGracias 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!
GRACIAS POTRO OYE UNA PREGUNTA
ResponderEliminarENTRA 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
Nop, revisa que hayas puesto los códigos en el lugar correcto.
ResponderEliminarSaludos.
ya revise una y otra vez y no veo el error
ResponderEliminarmuchas gracias potro
ResponderEliminarmui buen truco =)
tanks
Hola Alex,
ResponderEliminarEntonces 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.
Potro tu si que le sacas el jugo a Blogger, no pense que se podia hacer eso...
ResponderEliminarPosdata: Hay un problema al ver tu blog con IE 8
Hola Jorge,
ResponderEliminar¿Qué problema ves con IE8?
muy bueno, los puse también en mi sidebar modificando el código
ResponderEliminar.post-title { >>>>antes<<<<
.sidebar h2 { >>>después<<<
Uhhh con ese fondo negro se ve muy bien el efecto =)
ResponderEliminarGracias. 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.
ResponderEliminarSalu2
Hola Feroz,
ResponderEliminarBienvenido 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.
Potro una pregunta,que numero seria el color rojo?o de donde se pueden sacar?
ResponderEliminarEl rojo es el #FF0000
ResponderEliminarEn ésta lista puedes consultar la tabla de colores y sus códigos.
Saludos.
Gracias Potro!!
ResponderEliminarbomito efecto gracias
ResponderEliminarMe alegro que te haya gustado.
ResponderEliminarSaludos.
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í.
ResponderEliminarGracias Potro,que Dios te bendiga.
Gracias a ti fer!
ResponderEliminarSaludos.
potro tu web no deja de impresionarme
ResponderEliminarsolo quiero saber como poner las etiquetas como tu me decis porfa?
grax bro
¡ un abrazo!
Hola Ledwin yankee,
ResponderEliminar¿Cómo quieres las etiquetas?
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
ResponderEliminarHola @christopher_on3,
ResponderEliminarPara que el efecto se aplique a todo el texto de las entradas usa este código:
.post {
text-shadow: #6374AB 10px -10px 3px;
}
Saludos.
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.
ResponderEliminarTe dejo el enlace donde se explica:
ResponderEliminarhttp://ciudadblogger.com/2009/04/personalizar-links.html
Saludos.
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?
ResponderEliminarClaro, puedes poner los códigos debajo de:
ResponderEliminar.description {
Saludos.
El Potro, muchas gracias, funciona excelente!
ResponderEliminarExcelente El Potro, gracias!
ResponderEliminarLo aplique a los titulos de los post, entradas y footer!
Qué bueno que te ha servido ;)
ResponderEliminarSaludos.
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 !
ResponderEliminarMucho mejor, el lector agradecerá que un blog no sea un ataque visual de efectos e imágenes ;)
ResponderEliminarHola 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.
ResponderEliminar.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
Te ha quedado muy bien, parece efecto neon :)
ResponderEliminarGracias por compartirlo.
Saludos.
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.
ResponderEliminarun 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.
Hola Sofía,
ResponderEliminarPara 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!
Potro, gracias..pero no lo consigo.
ResponderEliminarte 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
¡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"..:)
ResponderEliminarYa te comento.
¡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 :))
ResponderEliminarEso 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í
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á.
ResponderEliminar¡Saludos!
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
ResponderEliminarsaludosss y se agradece que nos ayudes;)
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.
ResponderEliminarSaludos.
gracias potro:)
ResponderEliminarhttp://todoespoker.blogspot.com
LO UTILICÈ Y ME RE-GUSTA COMO QUEDA EN MI BLOG...GRACIAS!!..
ResponderEliminarhttp://diariolocalcanals.blogspot.com/
hola Potro:
ResponderEliminarperdona 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
Al igual que en todos los post siempre menciono que está entrando en Diseño > Edición de HTML.
ResponderEliminarPuedes ubicarlo usando las teclas CTRL + F o bien, buscarlo antes de </head>
Ami me desbarato la Plantilla.
ResponderEliminarLo bueno que no lo guarde
No tendría que desbaratar nada, a menos que no lo hayas hecho correctamente.
ResponderEliminarHola 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.
ResponderEliminarLa 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
Hola sonnitex,
ResponderEliminarEs 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.
Hola!!!!!!!!
ResponderEliminarMuchas gracias me sirvio tu truco. Te lo agradezco mucho deveras.
:D
Muy chulo el truco, me gusta mucho como queda..
ResponderEliminarLlevo 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
Hola MariajoyAndrea, ¿cuál plantilla usas?
ResponderEliminarLa mínima de bloguer.
ResponderEliminarSólo agrega estos estilos de sombra debajo del #outer-wrapper {
ResponderEliminar-webkit-box-shadow: 0px 0px 50px #000000;
-moz-box-shadow: 0px 0px 50px #000000;
box-shadow: 0px 0px 50px #000000;
Hola Potro he estado buscando estos estilos en mi plantilla y no los encuentro.
ResponderEliminarTe dejo la dirección de mi blog por si me puedes ayudar.
http://nancyesunica.blogspot.com/
Es que esa no es la Mínima, es la Ethereal.
EliminarDebajo 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.
Hola de nuevo, ya lo he pegado en mi plantilla pero no se aprecia ningún cambio???
ResponderEliminarSaludos
Si lo miras desde un navegador moderno verás el cambio. Esos estilos no funcionan en Internet Explorer.
EliminarSaludos.
hola potro
ResponderEliminarmira 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
¿En cuál blog quieres hacerlo?
Eliminarhttp://divasmaximo.blogspot.com/ alli al igual que te hice otra pregunta en otro post gracias potro
ResponderEliminarhttp://divasmaximo.blogspot.com/ en ese potro al igual que en otra pregunta que te hice en otro post
ResponderEliminarPues no veo ningún borde en las imágenes :/
Eliminargracias me sirvio de mucho ^^
ResponderEliminarMuchas gracias
ResponderEliminarme encanta :D gracias por el tuto! ♥
ResponderEliminarGracias a ti por tu visita!
Eliminaracuérdate de opera, jeje, no es perfecto pero tampoco el peor, saludos
ResponderEliminar-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