Efectos de bordes redondeados en las imágenes

6 de febrero de 2012 442 comentarios ,

Una de las ventajas del CSS3 es porder aplicar bordes redondeados sin complicarnos la existencia, siempre y cuando quien vea la página use un navegador moderno, porque ya sabemos que en navegadores antiguos muchos estilos no son reconocidos.

Y una forma de poder usar estos bordes es con las imágenes de las entradas, a las que les podemos aplicar algunos efectos al pasar el cursor tales como sombreado y bordes redondeados acompañados de transiciones.

La declaración del borde redondeado es border-radius, y en ella podemos aplicar el borde redondeado a las cuatro esquinas de la imagen, o sólo a algunas de ellas.

A continuación verás unos ejemplos de estos bordes y cómo se comportan las imágenes al pasar el cursor sobre ellas.
Puedes usar el que más te guste, sólo copia el código, luego entra a la Edición HTML de la plantilla y pega dicho código antes de ]]></b:skin>







.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}








.post-body img {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}








.post-body img {
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}








.post-body img {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}








.post-body img {
border-radius: 45% / 20%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}


Estos efectos se aplicarán a todas las imágenes de las entradas. Si quiseras usarlo sólo para las que tú elijas entonces cambia .post-body img por .redondeado y .post-body img:hover por .redondeado:hover
Luego en el código de tu imagen agrega la clase:
<img class="redondeado" src="URL de la imagen" />

Esos son sólo unos ejemplos, y a partir de ellos cada quien puede modificarlo tanto como quiera agregando o eliminando más estilos, eso como siempre ya depende de cada quien. Pero como has podido ver, podemos conseguir que las imágenes de las entradas se vean más atractivas, que interactúen con el lector, y tan sólo ha sido añadiendo un poco de CSS.


442 comentarios en:

" Efectos de bordes redondeados en las imágenes "

  1. #1


    Bueno antes que nada, muy buen post
    y en segunda, psss felicidaes x los 3 años (ya que no me avia tocado felicitarte y siempre paso por aqui)


    Suerte!!

    ResponderEliminar
    Respuestas
    1. Gracias DJCosplay, aun se aceptan regalos de aniversario ¡eh! :D

      Eliminar
    2. Fijate que conisidencias yo tambien :D

      Eliminar
  2. Muchas Gracias potro. Estan bien las border radius. Estan muy bien. Sabrias donde podemos encontrar mas shapes? Gracias otra vez. Felicidades en los 3 anos y que se cumplan mas.

    ResponderEliminar
    Respuestas
    1. ¿Más formas para las imágenes? En sí sólo es jugar con los bordes, por ejemplo:

      border-radius: 10px 50px 15px 80px;

      Cada valor corresponde a una esquina de la imagen. En ese ejemplo sería que:

      10px es el borde de la esquina superior izquierda.
      50px el borde de la esquina superior derecha.
      15px el borde de la esquina inferior derecha.
      80px el borde de la esquina inferior izquierda.

      Eliminar
  3. Que chulo el truco Potro, muchas gracias por compartirlo

    ResponderEliminar
    Respuestas
    1. Lindo ¿no? :)
      Gracias por pasar a comentar!

      Eliminar
  4. Hola Potro, muy buen truco, pero quisiera saber si se puede aplicar para todas las imágenes del blog, y como, ha y ¡FELICIDADES CiudadBlogger! Ya son 3 años ayudando a nosotros los bloggeros..!Gracias Potro.!

    ResponderEliminar
    Respuestas
    1. Gracias, gracias, el mero día nadie me felicitó :( jajaja
      Sí, se puede aplicar a todas las imágenes del blog, en ese caso cambia .post-body img por img
      Y .post-body img:hover por img:hover

      Saludos :)

      Eliminar
  5. Esto es SUUUUUUUPER!!!!
    Estaba pensando hacer un lindo menú a partir de imágenes con enlaces (lo mio tiene que ser práctico sino el blog se tilda jaja) y esto me viene estupendo porque es super lindo y le da un detalle muy especial! ♥
    De verdad MUUUUUUUCHAS GRACIAS simpre por traer cosas tan buenas!
    Quería hacerte una petición muy importante ^^
    Yo tengo Tumblr y me gustaría poder hacer esto que publicó Vagabundia en su Blog.
    Es que de verdad ese blog me da dolor de cabeza por lo oscuro que es y no le entiendo nada ='(
    No quiero ofender a la persona ni mucho menos, pero no comprendo...
    Será que ya estoy acostumbrada que acá hay explicaciones muy detalladas y a veces hasta con imágenes de paso a paso.
    Ojalá puedas darme una mano con esto, es que el widget está estupendo!
    Bueno ya dejo acá que esto se hace muy largo.
    Besos y que tengas una semana estupenda! ♥

    ResponderEliminar
    Respuestas
    1. Hola Hola! Ya no hará falta lo de Tumblr, me senté con un té de tilo y todo el cerebro despejado de cualquier otra cosa y me salió. Ahora entendí como se hacía y como es que esta personita explica sus post.
      Gracias de todas formas porque sé que siempre de todos modos encuentras el modo de ayudar a todos! ^^

      Eliminar
    2. Pues qué bueno que pudiste saber cómo hacerlo, porque nunca he usado Tumblr así que estoy perdido en ese tema, ya tendrás que enseñarme :P

      Por las imágenes qué bueno que te han gustado, seguro en algún que tenga principalmente imágenes en sus entradas se verá bien :)

      Que tengas también una semana estupenda!

      Eliminar
  6. esta increible este efecto muy util es.. gracias

    ResponderEliminar
  7. Anda!!...Qué chulada!! :)

    Vaya Potro..esto es increíble por el efecto "oculto" que contiene cada imagen..Ves una imagen con bordes determinados, y vale...pero...pero!!..te acercas y .....O L A L A H!!!! ...tienen vida propiaaa jajajajajaja.

    Siento este entusiasmo..pero caramba que es estupendo el truco..claro que sí.

    Muy bueno Potro, y Felicidades por estos 3 años ya..ainss como pasa el tiempo.

    Recibe un fuerte abrazo, y mucha suerte para lo que necesites.

    ResponderEliminar
    Respuestas
    1. Me alegra que te entusiasme Angie, a mí también me encanta la idea de que tenga un plus de sorpresa al pasar el cursor, y creo que a la mayoría de los usuarios les agrada encontrarse con esa clase de efectos en un sitio.

      Otro abrazo para ti, y que tengas buen inicio de semana!

      Eliminar
  8. Mmmm parece interesante GRAIAS POTRO COMO SIEMPRE XD

    ResponderEliminar
  9. Potro, gracias por responderme mira lo que te comentaba en el mensage (ya leei la respuesta) que te envie es que como pongo un menu de listones en ese caso era parte de la cabezera pero por ejemplo en esta web como seria?:(me refiero menu rojo )

    http://www.bloggingtips.com/forums/showthread.php?t=1055

    Osea el liston lo hago con photoshop pero como ago para que sobre salga y sea menu como en la web esa ?

    ResponderEliminar
    Respuestas
    1. Deja después preparo un tutorial sobre ello, porque es algo extenso como para decirlo por comentarios. Sólo dame unos días a que saque otras entradas que traigo pendientes ;)

      Eliminar
    2. Ooo gracias espero inpaciente esa entrada

      Eliminar
    3. Procuraré no hacerte esperar mucho ;)

      Eliminar
  10. Desde ahora hare todo con CC3 estoy arto de intentar codigo para IE u.u

    ResponderEliminar
    Respuestas
    1. Se supone que muchas propiedades del CSS3 las soporta IE9, y también se supone que acepta los bordes redondeados, pero al parecer sólo los de los contenedores DIV porque las imágenes, al menos estas no les hace nada. Por suerte cada vez son menos los que usan IE.

      Eliminar
  11. Quedo muy bueno, se puede poner en la imagen del "Header" y agregarle un borde de color? (La plantilla esta hecha con el Diseñador)

    ResponderEliminar
    Respuestas
    1. Claro que sí 3-M-i-L-i-0, también se puede aplicar a la cabecera, aunque los resultados pueden variar de plantilla en plantilla.
      Supongamos que quieres el 5º ejemplo entonces el código sería así:


      .header-outer {
      border-radius: 45% / 20%; /* Borde redondeado */
      box-shadow: 0px 0px 15px #000; /* Sombra */
      border:6px solid #819FF7; /* Borde de color */
      padding:0;
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      }
      .header-outer:hover {
      border-radius: 0; /* Con esto eliminamos el borde redondeado */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      cursor:pointer;
      }

      Eliminar
    2. No me funciono... no se que sera, acá te dejo la pagina "http://www.arg-wallpapers.com.ar/", de ultima si esto no sale quisiera saber como hacer para darle el mismo estilo de los gadget (bordes, sombras) a la imagen de la cabecera.

      Eliminar
    3. No veo los códigos en esa plantilla 3-M-i-L-i-0.

      Eliminar
    4. Ya esta agregado y sigo sin verlo...

      Eliminar
    5. Arriba del .header-outer { dejaste un text-align:center; suelto que parece no pertenecer a nadie y que hace que invalide los estilos que hay debajo de ello. Corrígelo.

      Eliminar
  12. Potro, Potro, Potro.......que te digo....gracias, gracias, gracias!!!

    ResponderEliminar
    Respuestas
    1. Kary, Kary, Kary.... de nada, de nada, de nada :D

      Eliminar
  13. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Buenísimo Potro, ya lo tenemos en nuestro blog. Cada día nos sorprendes un poco más. Espero que ya te hayas mejorado de la gripa, un saludo.

      Eliminar
    2. Gracias amisetasjgalan, un saludo!

      Eliminar
    3. De nada potro, lo único que el nombre de nuestro blog es camisetasjgalan la c de nuestro logotipo puede confundir un poco jejeje. Desde spain un abrazo, y felicidades por los 3 años... ¡¡que sean muchos más!!.

      Eliminar
    4. Tienes toda la razón, eso me pasa por escribir a las carreras :P
      Gracias por las felicitaciones, ¡un abrazo!

      Eliminar
  14. Me encanta Potro, pero algo me falla que no me da RESULTADO

    http://lascositasdemeri.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Meri, estaba viendo que dentro de tus estilos tienes una condicional:
      <b:if cond='data:comment.author == data:post.author'>

      Esa no debe ir dentro de los estilos:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  15. Qué códigos tan sencillos, y qué resultado tan sorprendente...
    Estoy aprendido mucho de HTML, hasta me he creado una página web sin usar Blogger en HTML solamente, jaja. Está entretenido :P
    Si quieres verla: http://htmlcw.comyr.com/
    un saludoo

    ResponderEliminar
    Respuestas
    1. Pues vaya que sí estás aprendiendo, me da gusto eso!
      Tienes razón, son códigos sencillos que la mayoría podemos aplicar, y el resultado es visualmente muy bueno :)

      Eliminar
  16. Potro no me queda mas que agradecer el excelente aporte! Es una gran forma de darle mejor vista a nuestros blogs.

    Saludos y buena vibra!!

    ResponderEliminar
    Respuestas
    1. Gracias Fando, es grato saber que ha sido del gusto de ustedes. Saludos.

      Eliminar
  17. POTRO quiero poner estos botones mas abajito tantito asi como muestro en la imagen!!

    http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/397132_374398175919021_100000465260022_1431487_1513022478_n.jpg

    y es en este blog: http://www.peliculasyseries.org/

    ResponderEliminar
    Respuestas
    1. Podrías encerrar los tres botones dentro de:
      <div style="float:left; margin-top:25px;"> y </div>

      Pero es posible que al hacerlo los datos del post-footer se hagan más abajo. Así que si eso sucede lo mejor será meter todo dentro de una tabla para que quede alineado.

      Eliminar
  18. Tremendos efectos Potro! Con una aclaración: en la basura de IE no funciona aun el border-radius.

    ResponderEliminar
    Respuestas
    1. En IE9 se supone que se puede, pero sólo se supone :)

      Eliminar
  19. Potro muchas gracias, realmente es de utilidad ya que le da un aspecto elegante y moderno al blog gracias de ante mano... solo que tuve un pequeño problema. te dejo mi blog: http://japanese-music-kei.blogspot.com/ . quise agregar este efecto a las imagenes de los post pero realmente me lo agrego al bloque que contiene las entradas. al entrar en una entrada o simplemente al cambiar a cualquier otra parte que no sea inicio me aparece esto: http://japanese-music-kei.blogspot.com/search/label/Alice%20Nine . lo mismo. y finalmente al entrar a una entrada esto: http://japanese-music-kei.blogspot.com/2012/02/alice-nine-zekkeishoku.html . si te das cuenta solo aplica este efecto al bloque y no al contenido de la entrada. realmente no se ve mal pero no se si habria manera de que me ayudes. el codigo "post img" no existe en mi plantilla entonces al aplicarlo no pasa absolutamente nada, así que modificando el codigo pasa lo anterior... en mi caso que código cres que tenga que poner para dirigirme al contenido de la entrada?... muchas gracias, espero no ser una molestia

    ResponderEliminar
    Respuestas
    1. PD.lo mismo me paso al querer agregar el efecto de opacidad en las imagenes... no pude así que tuve que modificar entrada por entrada y agregar el codigo individualmente :/

      Eliminar
    2. Hola 死 Yuuki Natsuno 生,
      En las plantillas que no son originales de Blogger puede ser normal que este tipo de cosas pasen, ya que no conservan los nombres originales de los contenedores.
      Prueba cambiar el .post img por .contP-ed img
      Y el .post img:hover por .contP-ed img:hover

      Saludos.

      Eliminar
    3. Muy bueno... estoy muy agradecido contigo, de ante mano muchas gracias. mucho de lo que publicas aquí es realmente bueno, espero con ancias la próxima entrada. se te agradece la ayuda potro. Saludos

      Eliminar
  20. Pero si están geniales :O!!
    Ahora mismo los pondré!! sí o sí!!
    Y Potro, necesito tu ayuda T^T
    Es que cuando me dejan comentarios y pasan de 5, en los siguientes coments la imagen de su avatar se sustituye por una imagen en blanco D:!
    Porfa puedes decirme que va mal? es éste:
    literatura-ficticia.blogspot.com
    Gracias de antemano U-U

    ResponderEliminar
    Respuestas
    1. Es extraño, ¿has hecho alguna modificación al área de los comentarios?

      Eliminar
    2. Mmm... sí Potro es rarísimo O_O Se soluciona cuando yo comento D:! Supongo que responderé algunos comentarios para que no pase eso xD
      Gracias por tu ayuda!
      Sin tu página mi blog no sería lo que es *--------*
      Besitos!
      Rizel

      Eliminar
    3. Eso está mejor todavía, responder comentarios no le cae mal a ningún blog ;)

      Eliminar
  21. Que genial, me gusto mucho, haber si lo pongo en mi blog

    Gracias Potro!!!

    ResponderEliminar
    Respuestas
    1. Ojalá que te animes, aunque sea para experimentar :)

      Eliminar
  22. WOW no sabía que se podía hacer eso con puro HTML, todo lo que ví con ese efecto fue con JS incluído. ¡Esto es el cielo!

    ResponderEliminar
    Respuestas
    1. Se puede con JS aunque ya es un tanto innecesario cuando casi todos los navegadores pueden leer el border-radius. Quizá sólo habría que recurrir al JS cuando queremos que los que usan Internet Explorer puedan apreciar estos bordes.

      Eliminar
  23. ¡Destacable! de seguro lo aplicaré en varios de mis artículos. Me pregunto si también habrá la posibilidad de aplicarlo en mi logo (header), o al menos algún efecto similar. Cuanto te sea posible échale un ojo por favor, no es la gran cosa, pero al menos quiero que se vea más bonito ;)

    Un abrazo!

    ResponderEliminar
    Respuestas
    1. Claro que sí Marcelo, aunque en el caso de tu blog sería más conveniente aplicar el efecto de "zoom" al logotipo, quizá ese te interese más para esa área :)
      http://ciudadblogger.com/2011/11/aumentar-el-titulo-del-blog-o-imagen-de.html

      Otro abrazo para ti.

      Eliminar
  24. Gracias Potro mi sitio esta hecho a base de tus consejos y tutoriales y me han mandado mensajes de que esta muy bonito, gracias a ti y les he dicho, gracias muy bueno el post como siempre:

    http://www.itimetux.com/

    Mi blog por si les interesa como es y como quedo con este tutorial.

    ResponderEliminar
    Respuestas
    1. Gracias hackloper. Me alegra que tus lectores estén contentos con el trabajo que estás realizando, y sobre todo que tú encuentres más chulo tu blog por la forma como lo estás personalizando :)

      ¡Saludos!

      Eliminar
  25. Un truco maravilloso Potro. Hace el blog mucho más dinámico y con sorpresas. Se me plantean algunas dudas que seguro serán absurdas para muchos de vosotros pero no tengo idea de html. La verdad es que siempre he conseguido usar tus trucos puesto que lo explicas de maravilla. Eres un maestro estupendo. Ahí va mi pregunta:
    En edición html y antes de ]]> pegaría el siguiente código (junto con el otro que ofreces para la imagen de la entrada elegida)si quisiera que el efecto se aplicase a una determinada imagen y no a todas las de las entradas del blog:
    .redondeado {
    padding:15px; /* Espacio entre la imagen y el borde */
    background:#FFF; /* Color de fondo que se ve entre el espacio */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    .redondeado:hover {
    border-radius: 0% 50%; /* Borde redondeado */
    box-shadow: 0px 0px 15px #000; /* Sombra */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    cursor:pointer;
    }
    Supongo que con esto las imágenes tendrían el efecto que has puesto como primer ejemplo (el que yo he usado en el ejemplo). ¿Sería posible que en unas imágenes se pudiese aplicar un efecto y en otras otro distinto? Me imagino que eso resulta imposible pero ¿habría alguna forma de aplicarlo de otro modo para elegir distintos efectos en distintas imágenes y entradas?. Espero que no te comas el coco mucho y te doy de antemano las gracias. Eres una maravilla para todos nosotros.

    ResponderEliminar
    Respuestas
    1. Hola María José Fano,

      Muchas gracias por tu comentario.
      Lo que planteas no es nada absurdo, por el contrario, es interesante saberlo porque seguro que muchos preguntarán eso más adelante.
      Sí, puedes aplicar varios estilos a distintas imágenes, por ejemplo, supongamos que quieres que unas tengan el efecto del primer ejemplo, en ese caso el código sería así:

      .redondeado {
      padding:15px; /* Espacio entre la imagen y el borde */
      background:#FFF; /* Color de fondo que se ve entre el espacio */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      }
      .redondeado:hover {
      border-radius: 0% 50%; /* Borde redondeado */
      box-shadow: 0px 0px 15px #000; /* Sombra */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      cursor:pointer;
      }


      Y en tu imagen pondrías la clase class="redondeado"

      Ahora bien, si quieres que haya otras imágenes con otros efectos haces algo parecido, supongamos que ahora quieres el efecto del segundo ejemplo, en ese caso también pegarías esto:

      .redondeado2 {
      border-radius: 50% 0; /* Borde redondeado */
      box-shadow: 0px 0px 15px #000; /* Sombra */
      padding:15px; /* Espacio entre la imagen y el borde */
      background:#FFF; /* Color de fondo que se ve entre el espacio */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      }
      .redondeado2:hover {
      border-radius:0; /* Con esto quitamos el borde redondeado */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      cursor:pointer;
      }


      Y en el código de la imagen a la que se lo quieras aplicar le pondrías la clase class="redondeado2"

      ¿Te fijas? Lo que ha cambiado es el nombre de la clase, la primera le pusimos .redondeado y a la segunda le pusimos .redondeado2
      Y así si quieres usar más sólo vas agregando los códigos y cambiando el nombre de la clase. De esa forma puedes tener varios efectos en los bordes y podrás aplicárselos a tus imágenes por separado.

      Saludos :)

      Eliminar
    2. Que buena pregunta María José Fano =)
      Ahora cuando quiera hacer algo así en una entrada por algo especial podré ponerlo!!!
      Estupendo!
      (Es bueno leer siempre los comentarios de otros jijiji)
      Saludos!

      *Adoro esto de los comentarios con lo de respuestas. Vas buscas tu comentario y abajo está tu respuesta! ^^

      Eliminar
    3. Jaja, a mí también me encanta. Lástima que en Internet Explorer no funcionan los comentarios anidados en este blog :(

      Eliminar
    4. Fantástico Potro, eres único. Pensé que sería una pregunta sin solución, pero no se te resiste nada. Ya lo he utilizado y en mi siguiente entrada aplicaré otro efecto, a ver si todo va bien (es decir, si lo he entendido bien, que soy un poco burra para el html).
      Tiene razón Miss Varieté, esto de las respuestas es fantástico. Ayer me pasé más de media hora leyendo preguntas y respuestas por si a alguien se le había planteado la duda.
      Y lo del explorer es una lástima, no haré más comentarios.
      Ya te contaré cómo me ha ido y nuevamente muchíiiiiiiiiiiiisimas gracias.

      Eliminar
    5. Ojalá que todo salga bien María José, ¡saludos!

      Eliminar
  26. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  27. Potro, como siempre genial !!

    Un abrazo.

    ResponderEliminar
  28. Excelente aporte Potro.....Felicidades por su aniversario....Saludos

    ResponderEliminar
  29. Están super cheveres esos efectos Potro :)

    graciela ;D

    ResponderEliminar
  30. Excelente post, ya lo implemente en mi blog. Saludos desde Costa Rica!! :D

    ResponderEliminar
  31. Genial Potro... Lo tendré en cuenta para después; no quiero saturar mi blog de código HTML!

    Siempre lo mejor!

    Mil Saludos!

    ResponderEliminar
  32. Hola, Potro. ¿Serías tan amable de indicarme cómo podría eliminar los bordes de las imágenes que aparecen por defecto con el diseñador de plantillas en las entradas de mi blog?

    ResponderEliminar
    Respuestas
    1. Hola Fran,

      Elimina esta parte de la plantilla, con eso se irán los bordes:

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: $(image.border.small.size);

      background: $(image.background.color);
      border: 1px solid $(image.border.color);

      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      }

      Eliminar
  33. Disculpa Potro se pueden usar las condicionales con este truco? para poner 2 trucos de estos en diferentes partes del blog.
    desdeluego se donde esta el post de las condicionales jeje. Bye....!!!

    ResponderEliminar
    Respuestas
    1. Sí, sólo encierra los estilos entre <style> y </style>, luego enciérralos en una condicional y ponlos antes de </head>

      Eliminar
  34. Gracias Potro por responderme, pero estoy más perdía que el barco del arroz ¿donde pongo esa condicional? no me atrevo por si lo mando todo al traste jeje. Por tu enlace es aquí donde debo poner esa condicional? antes de o después de < head > Si es ese el error ¿antes o despues?.¡Qué trasto soy!
    Saludos y GRACIASSSSSSSSS

    ResponderEliminar
  35. Precioso todo lo que desarrollas sobre imágenes. Lo tendré en cuenta. Saludos.

    ResponderEliminar
  36. Impresionante esta entrada. Estás en todo y a la última que sale, Potro.
    Muchas gracias.
    Un beso

    ResponderEliminar
    Respuestas
    1. Pues ya tiene rato la propiedad border-radius, sólo pensé que talvez podríamos combinarlas con sombras y transiciones; parece que el resultado ha sido bueno :)
      Un beso.

      Eliminar
  37. Hola Potro, gracias por estos tips, excelentes, ya puse el que me gusto y quedo chevere mi blog.

    Queria consultarte, si tu sabes como hago para correr hacia la izquierda los anuncios de adsense, porque al dividirlos, me quedaron hacia la derecha de la pantalla, los quiero mas a la izquierda.

    Gracias de antemano maestro

    Bendiciones abundantes,

    Iglesia Cristiana Evangelica

    ResponderEliminar
    Respuestas
    1. Hola Gilberto,

      Encierra el código de AdSense entre:
      <div style="margin-left:-30px;"> y </div>

      Ese -30px es un margen izquierdo negativo, puedes variarlo hasta conseguir que se coloque en la posición que deseas.

      Saludos.

      Eliminar
  38. G E N I A L :D
    hace mucho que estaba buscando ésto para las imágenes, ¡gracias!

    Ahora, tengo una pregunta para hacer, yo vi que en muchos blogs en vez de color tienen una imagen alrededor de las fotos, me gustaría saber como se hace :)

    Gracias otra vez n.n

    ResponderEliminar
    Respuestas
    1. Mira esta entrada de Oloblogger, ahí explican cómo hacer eso:
      http://www.oloblogger.com/2012/01/formato-imagenes-con-css-padding.html

      Saludos.

      Eliminar
  39. Hola, me gustaria hacerle un par de preguntas potro.

    Tengo un programa que incrementa las visitas a mi web automaticamente, eso no es bueno a la hora del posicionamiento en google verdad?

    Y otra cosas es que quisiera saber como hacer una mini tienda en html, es decir, vender algo en html.

    Gracias

    ResponderEliminar
    Respuestas
    1. Google no acepta ninguna práctica de ese tipo, así que no sólo afecta el posicionamiento, sino que puedes ser eliminado de los resultados de búsqueda.

      Para lo otro, hay una plantilla que tiene incorporado un sistema para comprar:
      http://javatemplates.com/2011/blogger-store-v2/

      Saludos.

      Eliminar
    2. Que significa eso de que Incrementa las visitas a tu web?

      Eliminar
    3. No sé, habrá que preguntarle qué se supone que hace ese software.

      Eliminar
  40. GENIAL EL TRUQUILLO POTRO!!!

    FUNCIONANDO PERFECTAMENTE

    GRACIAS!!!

    ResponderEliminar
  41. Q zarpado q está!! He puesto uno en mi blog y me encanta como queda, te lo dejo x si quieres ver cómo quedó ^^
    http://llavedetinta.blogspot.com/

    Gracias por el truquito!! :D

    ResponderEliminar
    Respuestas
    1. Me ha encantado el resultado en tu blog Annie :)

      Eliminar
  42. me da un error al cambiarlo de sitio: El tipo de elemento "b: if" debe terminar con la correspondiente etiqueta final "< / b: if >"

    ¿hago esto? < b:if cond='data:comment.author == data:post.author'< / b: if >

    ResponderEliminar
  43. pues tampoco porque ya he probado

    ResponderEliminar
    Respuestas
    1. Debes buscar desde <b:if cond='data:comment.author == data:post.author'> hasta el siguiente </b:if>
      Nada de esos códigos deben estar antes de ]]></b:skin> de lo contrario suceden esos problemas que los estilos no surgen efecto.

      Eliminar
    2. Pues creo que se queda asi porque el < / b:if> esta donde el señor perdió la zapatilla y todavía no la ha encontrado jeje. No me atrevo, que soy capaz de liarla jej


      Saludos y como siempre GRACIASSSSSSSSS

      Eliminar
    3. Bueno, sino quieres liarte más con eso pon los estilos arriba de esa línea, la del error, como los estilos estarán antes de ella deberá tomarlos como válidos ;)

      Saludos.

      Eliminar
  44. Muy buen efecto!!! Tus tutoriales son un vicio para mi! jajaja!
    Lo aplique a uno de mis blogs y me encanto :)
    Potro te quiero hacer una consulta, perdón porque no tiene nada que ver con este tema. Cree un nuevo blog con una plantilla que descargue. La direccion es http://www.cerquitamioweb.com.ar/ , la pregunta es: Se pueden cambiar el color de fondo de las pestañas? y de los enlaces de los titulos? Si te fijas vas a ver que todo es en color rojo, me gustaria otro color pero del diseñador no puedo cambiar nada y como es la primera vez que no uso una plantilla del diseñador desconozco si se pueden realizar modificaciones. Gracias desde ya si me podes dar una mano. Ya me diste tantasss!!! Un abrazo!

    ResponderEliminar
    Respuestas
    1. No te creas que para mí también se ha vuelto un vicio esto de los blogs, jaja.
      El color de fondo de ese menú (al pasar el cursor) es una imagen, aunque desconozco por qué lo hicieron así. En fin, sólo busca esta URL, la verás dos veces:
      http://4.bp.blogspot.com/-2XXQwhBH8QM/TxSCk2OJy9I/AAAAAAAAAKk/3CivMDyAjWg/s000/menu-secondary-bg.png

      Cámbiala por la de la imagen del color que quieras.
      El color de los enlaces se cambia en esta parte:

      .menu-secondary li a{color:#555; padding:12px 15px 11px 15px;text-decoration:none;font:12px 'Oswald',sans-serif;text-transform:uppercase}

      Eliminar
    2. Excelente!!! Sos mi idolo ! ya lo pruebo! La imagen tiene que tener un tamaño especial? Y la letra de las pestañas de donde la cambio? Chan! Como te quierooo Potrooo!

      Eliminar
    3. Yo lo que quiero es cambiar Todos los enlaces que hay en rojo: Las etiquetas, las pestañas de arriba, la palabra "Comments", es mucho lio? Es un codigo distinto para cada cosa no?

      Eliminar
    4. Pues no parece haber un tamaño específico para la imagen, de todas forma prueba primero con algo muy pequeño, o si quieres intenta poner sólo el código de un color para no liarte mucho.

      Para cambiar el color de todos los enlaces se hace en esta parte:

      a:link,a:visited{color:#F70413;text-decoration:none;outline:none;}
      a:hover{color:#C93204;text-decoration:underline;outline:none;}


      Aquí hay una entrada que habla sobre ese tema:
      http://ciudadblogger.com/2009/04/personalizar-links.html

      Gracias por tanto cariño :)

      Eliminar
    5. Potro de verdad q no se que haria sin vos! pude cambiar los colores como queria, me quedaron 2 cositas en rojo que no encontre de donde cambiar. Los puntitos (cuadraditos) de los titulos de los gadgets, y el bordecito de "leer mas" cuando pasas por arriba con el mousse ; me ayudarias a encontrarlos? ;)

      Eliminar
    6. El cuadrito de los títulos de los gadgets puedes quitarlo eliminando esta parte en negrita:

      .sidebar h2{background:#F2F2F2 url(http://1.bp.blogspot.com/-faUgKbavGNk/TxSClu0xu5I/AAAAAAAAALU/UEdXOVKvUOY/s000/widgettitle-list.png) 4px center no-repeat ;margin:0 0 10px 0;padding:9px 0 9px 20px;border:1px solid #E0E0E0;color:#666;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;text-decoration:none;text-transform:uppercase;}

      Y lo del Leer más eliminando esta parte:

      .readmore a:hover{color:#FFF;text-shadow:0px 1px 0px #000;background:#E0A3A3;border:1px solid #BE010E;text-decoration:none}

      Eliminar
    7. Mil gracias Potro! Ya hice las modificaciones que queria ;) yo no queria eliminarlos, solo queria cambiar el color :P
      Una ultima cosita y no te hincho mas (por hoy :P)
      Me quedan los gadgets del pie o footer creo que se llama no? quiero ponerle el mismo color que los de la sidebar. Me ayudasss?? :D Un beso grande

      Eliminar
    8. ¿El color del título de los gadgets? Ese se modifica aquí:

      #footer-widgets h2{ color:#333333; font-family:'Oswald',sans-serif;font-size:16px;line-height:16px;text-decoration:none;text-transform:uppercase;background:url("http://1.bp.blogspot.com/-faUgKbavGNk/TxSClu0xu5I/AAAAAAAAALU/UEdXOVKvUOY/s000/widgettitle-list.png") no-repeat scroll 4px center #F2F2F2;border:1px solid #E0E0E0;margin:0 0 10px;padding:9px 0 9px 20px;font-weight:normal;margin-bottom:16px;}

      Gracias por el beso :)

      Eliminar
    9. Geniallll!!!! Gracias a vos!!! (Igual te sigo molestando). Cambie el color de las pestañas pero cuando pasas el cursor se sigue viendo el color rojo que no quiero, esto de donde lo cambio? Y otra cosita: Si quiero sacar esas pestañitas que dicen "tags" "Popular" y "Blog archives" se puede?
      Y para poner una imagen de fondo en todo el blog? Espero no volverte loco con tantas preguntas (para vos debe ser pan comido) jeje! espero tu respuesta y mil mil gracias como siempre :D

      Eliminar
    10. Pues tanto como pan comido, no.
      Busca este color #D50512 ese es el color rojo que aparece.
      Lo otro no sé, es un tabview pero ignoro qué método usaron, supongo que tendrás que preguntar en la página del autor de la plantilla.
      La imagen de fondo que aparece (los cuadritos) es esta:
      http://2.bp.blogspot.com/-borwMQ9B0zM/TxSCken8mYI/AAAAAAAAAKM/_DaJTiTG-Ps/s000/background.png

      Saludos.

      Eliminar
    11. ok, Potro te agradezco muchisimo tu buena onda y tu ayuda de siempre♥
      Ahora como hago para que la imagen que ponga de fondo no se desplaze con la pagina? Que quede fija...ya que queda muy fea asi! help!

      Eliminar
    12. El fondo tendría que quedar así:

      background: url(URL de la imagen);
      background-attachment : fixed;

      Eliminar
    13. Mil gracias Potro...Y mi mas profunda admiración. Un Beso gigante y agradecido

      Eliminar
  45. Chulisimo, me ha costado que funcione, como de costumbre por la cosa más insignificante y a la vez más importante, no puse los dos puntos antes de hover ;) ... este efecto quedará perfecto en alguna que otra entrada, hasta lo apliqué en un gadget :)
    ¿me permites una pregunta? ... ¿ya no es necesario poner
    -webkit-border-radius:
    -moz-border-radius: ?
    muchisimas gracias :)))

    ResponderEliminar
    Respuestas
    1. Se supone que no. Esas propiedades se ponían porque no todos los navegadores aceptaban el border-radius, pero ahora, al menos en las últimas versiones de cada navegador ya las aceptan.

      Saludos :)

      Eliminar
  46. está genial Potro. Muchas Gracias, ya lo apliqué a mi blog :)
    Una pregunta. Tengo un botón "Ver Mas" que es una imagen. Si quiero que aplique para todas las imágenes de las entradas menos para ese botón ver mas. Probé metiendoló en otra clase, pero algo debo haber hecho mal que no me funcionó. Es para evitar tener que meterle a todas las imagenes de las entradas una por una el class="xxxx" ya que solo la imagen de ver mas es la que no quiero que aplique ese estilo.
    Te dejo por las dudas la url de mi blog: www.tomandofotos.com
    Gracias, Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Marcos,

      Para excluir esas imágenes del Leer más, agrega en los estilos los siguiente:

      .rmlink img, .rmlink img:hover {
      border-radius: 0 !important;
      box-shadow: 0 !important;
      }


      Saludos.

      Eliminar
    2. Muchas Gracias Potro!
      Ya no me mostraba el redondeo pero si la sombra. Lo soluciné modificando el codigo de la siguiente manera:

      .rmlink img, .rmlink img:hover {
      border-radius: 0% 0% !important;
      box-shadow: 0px 0px 0px !important;
      }

      Saludos!

      Eliminar
  47. Hola Potro!

    Pues con la novedad que no me funciono :( sospecho que me pasa algo similar a lo que le has comentado a Meri (comentario 48), porque ademas, mirando algunos pequeños detalles en mi plantilla, hay partes que no cambiaron aun aplicandoles un estilo, pues creo que es eso, la cuestion es que no lo se por seguro y no sabria donde meter mano, si me puedes orientar un poco te lo agradecere realmente :)

    http://ssydd.blogspot.com


    Saludos!

    ResponderEliminar
    Respuestas
    1. Tus sospechas son ciertas Syd. Mira el enlace que le di a Meri, verás los errores que se comenten al poner los códigos CSS, y que en tu caso es la forma como has puesto los comentarios (anotaciones) de los códigos.

      Saludos.

      Eliminar
    2. Eso me pasa por no llevar un orden decente en la plantilla jaja, ya me lo decia mi madre "Syd, se mas ordenado en tus cosas", debi hacerle caso antes!

      Te agradezco y te felicito por el bien merecido premio que te otorgaron, aunque si hubiera que premiar tu paciencia, entonces te deberian pagar el viaje a Madrid.


      Un abrazo Potro!

      Eliminar
    3. Ahhh las madres siempre tienen la razón, sí señor.
      Gracias por la felicitación :)
      Un abrazo.

      Eliminar
  48. Potro, mi dominio caduco ayer, Hoy intente renovar y me rechaza el pago, despues de caducar el dominio puedo volverlo a registrar?

    Nota: el dominio lo compre en blogger me costo 10 $USD

    ResponderEliminar
    Respuestas
    1. Sí puedes renovarlo, pero si lo dejaste caducar tienes que esperar un poco, los dominios se bloquean cuando caducan, pero después de ciertos días (no recuerdo cuántos) se puede volver a registrar.

      Eliminar
  49. Hola Potro, se que esto no va aquí pero estoy desesperada. Mi blog no se actualiza en el blog de mis seguidores, lo he intentado casi todo. Y no hay manera, solo se actualiza en un blog de un seguidor y es desesperante.
    Te dejo la direccion por si quieres echar un vistazo.
    http://www.triatlonenfamilia.com/
    Hace poco cambié a .com antes era blogspot.com no se si tendra algo que ver.
    Te doy las gracias de antemano.
    Ana
    mail contacto anabailon2@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola ANA,

      El feed de tu blog está trabajando bien:
      http://www.triatlonenfamilia.com/atom.xml

      Si acabas de cambiar de dominio es normal que algunas cosas no funcionen por el momento, pero con el paso de los días todo se irá normalizando, sólo es cuestión de que los robots actualicen toda la información para que todo esté como antes, sólo eso, un poco de tiempo ;)

      Saludos.

      Eliminar
  50. ¡¡Ganadores Potroo!! Jaja, aunque mi blgo no haya ganado en 20blogs, tu blog es ¡el numero 1! me siento hasta afortunado de que hayas ganado, aun no siendo este mi blog, jaja. ¡Sabia que ganariais!
    Yo no podre ir a Madrid a la entrega de premios, ya me diras si el jurado me ha elegido o no :3

    Un saludo muy enormee!!!

    ResponderEliminar
    Respuestas
    1. Debes sentirte así, porque este blog no es sólo mío, es tuyo y de todos, así que el premio lo ganamos todos :)

      Me parece que alguien más tendrá que decirnos quién ganará los otros premios, porque desde casa hasta Madrid hay 9.428,03 km de distancia :P

      Eliminar
  51. Enhorabuena Potro.
    Eres el "puto amo" ;)
    Felicidades.

    ResponderEliminar
    Respuestas
    1. Gracias por esa efusividad Tapestryworkerman :)

      Eliminar
  52. ¡¡¡¡eres ganador, potrooo!!!...¡¡¡¡por fin hay algo de justicia!!!!

    ¡¡¡¡¡FELICIDADES!!!

    ResponderEliminar
  53. Muy buenos los efectos, y todos los contenidos por lo interesante. Y mi enhorabuena por el premio, bien lo mereces.

    ResponderEliminar
    Respuestas
    1. Te agradezco mucho el comentario Josep. Saludos.

      Eliminar
  54. Potro, ¡Felicitaciones por el premio!, ¡más que merecido!
    Te quería mostrar como jugando un poco con CSS3 (gracias a que publicaste esta entrada) hice modificaciones sobre las imágenes de la galería que está debajo del título, las entradas relacionadas de linkwithin y sobre las imágenes del gadget Entradas Populares. Me gusta mucho como quedó. Saludos! www.tomandofotos.com

    ResponderEliminar
    Respuestas
    1. Un trabajo impecable Marcos, me encantó cómo dejaste el de LinkWithin. Dentro de poco tendré que contratarte como diseñador :)

      Eliminar
  55. Muy bueno, de una lo puse en mi blog, gracias Potro!

    ResponderEliminar
  56. Potro una pregunta... Por qué sólo me funciona con el primer ejemplo? con los demás bordes no me funciona nada :s

    ResponderEliminar
    Respuestas
    1. No lo sé, habría que ver en cuál blog lo has puesto para ver qué sucede.
      Saludos.

      Eliminar
    2. El blog es http://cdalianzapetrolera.blogspot.com

      Eliminar
    3. Yo lo veo funcionando bien, mira:
      http://i39.tinypic.com/2zggphd.png

      Eliminar
  57. hola potro un pregunta hay alguna forma de que los bordes se vean igual tanto en firefox como en google chrome como puedes ver en el chrome los bordes de las imagenes no se ven los radios con el borde de ese color q seleccionamos checa bn tus ejemplos y sabras de q hablo por si no me hice entender saludos

    ResponderEliminar
    Respuestas
    1. No. Esas son cosas de los navegadores y cómo cada uno interpreta los códigos. Saludos.

      Eliminar
  58. un gustazo hablar contigo Potro... sabes? tengo un problema con el que estoy lideando varios dias ya... el asunto es el siguiente: tengo una academia preuniversitaria y con los alumnos estamos en comunicacion constante através del facebook, y hay alumnos que nos envian sus ejercicios para solucionarlos, pero tienen problemas a la hora de enviarmelos... en una pagina vi que uno se puede crear una cuenta en 4shared y ponerlo en el blog para que desde ahi nomas envien facilmente sus archivos... ahi te paso la direccion de la pagina http://denoizer.com/envie_sus_remix.html
    porfavor ayudeme con esto y le quedare eternamente agradecido...

    ResponderEliminar
    Respuestas
    1. Hola Espinoza Melgarejo, Erick, en realidad no es nada complicado insertar la pantalla de 4shared, si ya tienes cuenta ahí sólo ingresa, y en el menú de arriba haz click en "Compartir", ahí selecciona "Incrustar carpeta actual", copia el primer código y pégalo donde quieras que aparezca, si quieres puede ser en una entrada, o bien, en un elemento HTML/Javascript.

      Saludos.

      Eliminar
  59. Muy bueno, estupendos efectos. Ya los estoy poniendo en el blog.
    Grandes aportes los tuyos.
    ¡¡Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Me alegra que te hayan gustado Frannoe, saludos!

      Eliminar
  60. amigo Potro, gracias por la ayuda, pero aun sigo con un problema, cuando yo cierro sesion de 4shared, desaparece el cuadro de subidas.. me puede decir donde esta el problema??? gracias por anticipado

    ResponderEliminar
    Respuestas
    1. Verifica en las opciones de la Configuración, ahí debe haber algo que debas activar o desactivar. A decir verdad nunca he usado ese hosting, ahora abrí una cuenta sólo para poder saber cómo ayudarte, pero desconozco todas las opciones que pueda tener.

      Eliminar
  61. Respuestas
    1. Ni idea, es un wallpaper público algo conocido.

      Eliminar
  62. Qué tal, consulta: se pueden tener más de un efecto a la vez? Si por ejemplo, a una imagen en una entrada quiero aplicarle un efecto pero a otras otro, entonces, cómo las puedo combinar? o sólo puedo tener una cargada en el blog y aplicarla a las imágenes que quiero? Se entiende mi consulta? Yo ya agregué uno de los efectos en mi plantilla pero sin aclarar a qué imágenes lo aplico para cuando lo quiera usar, agrego a la imagen lo de class='redondeado' y listo, pero si agrego otro tipo de efecto, entonces cómo lo tengo que colocar en la plantilla para usar una vez uno y otra vez otro? gracias.

    ResponderEliminar
    Respuestas
    1. Hola Ernie,

      Sí puedes tener más de un efecto a la vez. Mira el comentario #29.1, ahí encontrarás las indicaciones para hacerlo.
      Saludos.

      Eliminar
  63. gracias amigo potro... a tanta insistencia pude dar con la solucion de mi problema, quedo eternamente agradecido por sus consejos que me ayudaron mucho, seguiremos en contacto, cuidese un abrazo a la distancia.

    ResponderEliminar
    Respuestas
    1. Me alegra que lo hayas resuelto. Otro abrazo para ti.

      Eliminar
  64. Hola Potro, saludos!
    Tengo una duda, quería poner los bordes del ejemplo 2 pero no me sale en el blog, el único que me funciona bien es el borde del ejemplo 1 y ese fue el que dejé pero insisto en colocar el ejemplo 2. Que tengo que hacer?
    Mi blog es http://latinosxatytv.blogspot.com
    Cualquier respuesta le estaré agradecido.

    ResponderEliminar
    Respuestas
    1. Hola Latinos, Chat y TV. Pon el código que quieres, aunque no funcione déjalo puesto para que pueda entrar a ver por qué no te ha funcionado.
      Saludos.

      Eliminar
    2. Listo Potro, puse el código del ejemplo 2, para que le eches un vistazo y me diga qué sucede en mi caso, gracias.

      Eliminar
    3. Es porque arriba, en el código de la paginación, has puesto comentarios que no deben ir dentro del CSS. Mira esta entrada para que veas de qué hablo:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    4. Muchas gracias Potro, al fin lo logré y todo gracias a usted.

      Eliminar
    5. Potro otra consulta... Usted tiene algun truco para que las entradas sólo se vean un poco del contenido y el resto se vea cuando se le de clic al título de la entrada? Perdone la molestia.

      Eliminar
    6. Este es un ejemplo de lo que me refiero:
      http://www.vanguardia.com/santander/barrancabermeja

      Eliminar
    7. Sí, mira esta entrada:
      http://ciudadblogger.com/2010/03/leer-mas-automatico-con-imagenes-en.html

      Eliminar
  65. hola una consulta por que cuando yo ingreso el codio ya bacan se ve bonito en mi google chrome pero cuando quiero entrar desde otro internet no puedo ver el efecto por fis ojala puedan ayudarme

    ResponderEliminar
    Respuestas
    1. Hola Fabilumacakes. Quizá el navegador con el que lo estás viendo no reconoce esas propiedades que sólo leen los navegadores modernos.

      Eliminar
  66. Ejelí para poner en mi blog el segundo truco que mostras, y nosé que pasa, copie todo y no me sale, queda la imagen cuadrada sin ningun efecto. Que hice mal? o que tengo que hacer?
    En mi blog ahora tengo un marco como ese para las fotos, pero lo hice con otra pagina y todo bien, pero no tiene ningun efecto. Quiero ese efecto, el segundo, pero tengo que hacerlo bien, y nosé que hice mal.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola daiana. Cuando has puesto el código de los estilos has eliminado una llave de cierre del código que está justo arriba de ese. Mira esta entrada para que veas a qué me refiero:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  67. Yee! esa es la que yo queria ! hace mucho.. gracias :)

    ResponderEliminar
    Respuestas
    1. Qué bueno que te ha gustado Stephany ت :)

      Eliminar
  68. Hola Potro! Es un gusto saludarte.
    Este truco se ve genial y sobre todo, parece simple. Muchas gracias por compartirlo.
    Quisiera preguntar lo siguiente: es que ya tengo el efecto push-botom como hover en todos los enlaces de mi blog (sean texto o sean imágenes). Y como casi todas mis imágenes en las entradas las tengo que se abran en ventana aparte, entonces todas ellas son enlaces con efecto push-botom.
    Por eso quisiera saber si puedo agregar este efecto border-radius sin perder el efecto push-botom que ya tengo, porque también me gusta así.
    Y de paso, vi en comentarios más arriba que algunos han puesto este efecto redondeado en imágenes de los gadgets. ¿Cómo sería en ese caso? porque no he conseguido hacerlo.
    Por ejemplo, en mi página home tengo un gadget (en el main sobre los posts) que tiene varias imágenes con links y quisiera aplicarles ese efecto.
    ¿Me podrías orientar al respecto porfa, si no es mucha molestia?
    Muchas gracias de antemano por toda tu ayuda.
    Ah, mi blog es www.alabadora.com
    Saludos mil.

    ResponderEliminar
    Respuestas
    1. Hola Vicky, el gusto en saludarte es mío :)
      Puedes usar ambos efectos en las imágenes, sólo aplica los estilos de los dos efectos dentro de la clase de las imágenes, por ejemplo:
      .post-body img:hover {
      /* Estos son los efectos de los bordes */
      border-radius: 0% 50%; /* Borde redondeado */
      box-shadow: 0px 0px 15px #000; /* Sombra */
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      -o-transition: all 1s;
      cursor:pointer;

      /* Estos son los efectos del pushbutton */
      position: relative;
      top: 1px;
      left: 1px;
      }


      Para los demás gadgets es más o menos igual, sólo que los estilos los aplicarías para el ID del gadget que quieres, en este caso:

      #HTML27 img:hover {
      ...Aquí los estilos que quieras...
      }


      En ambos ejemplos es para que se tome el efecto al pasar el cursor, por supuesto que también lo puedes aplicar a la imagen en su estado natural, sólo hay que quitar el :hover

      Saludos.

      Eliminar
    2. Graciassssss...
      Le apliqué el estilo solo a las imágenes del gadget principal sobre las entradas y me salió bien. Creo que lo aplicaré para las imágenes de los post, pero más adelante.
      Lo revisé en el Crhome y Mozilla y se ven bien. En el IE solo se ve el efecto push-botom, pero no así los bordes redondeados. Bueno, al menos en el IE 8, que es el que tengo. Supongo que en las versiones posteriores sí se verá bien.
      Muchas gracias por toda tu ayuda.
      Bendiciones para ti!

      Eliminar
    3. El CSS3 sólo lo admite IE9 y aun así lo lee con ciertas trabas, por ejemplo, los bordes redondeados los interpreta cuando son aplicados a DIVs pero no a imágenes, al menos con las pruebas que yo he hecho no parece que los tome.

      Buen fin de semana!

      Eliminar
  69. Estuve intentando colocar este codigo en mi blog, de la manera en que lo especificas, y no puedo hacer que funcione.
    Ya revise los errores comunes y no puedo notar ninguno.
    A que otro factor puede deberse?

    ResponderEliminar
    Respuestas
    1. Hola Nicolás, cambia las dos partes que dice .post-body por .post

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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