9/5/16

Cómo redondear las esquinas de tus imágenes en el blog

Hoy vengo con un tutorial muy rápido y muy guay. O bueno, muy guay para todas aquellas que no han hecho ni están haciendo mi curso de html y css. Para ellas será una tontería, porque realmente es algo súper fácil si sabéis un pelín de css.

Y es que el otro día vendí el diseño de blog prediseñado número nueve (podéis verlo pinchando aquí, es ideal) y la chica a la que se lo vendí, me preguntó cómo tenía que preparar las imágenes para que quedaran así como en la propuesta: es decir, con las esquinitas redondeadas.

La respuesta fue que ¡ella no tiene que hacer nada!

Según suba una foto normal, se le redondearán las esquinitas solas:


Por supuesto, ella o vosotros, podéis preparar la imagen en Photoshop, PicMonkey o donde queráis. De hecho PicMonkey tiene una opción directamente para hacer eso, pero yo recomiendo no hacerlo en la imagen.

No lo recomiendo porque si bien a este blog justo le queda muy mono, ya que es un blog sencillito y así le da un poco de gracia, eso realmente "estropea" la foto.

No sólo deberéis guardar la original y la nueva, porque no es plan de perder la normal, sino que si en el futuro cambiáis el diseño del blog y ya no queréis que tenga las esquinitas redondeadas... deberéis borrar esas imágenes y volver a subir las normales una a una.

¡Un jaleo!

Si, por el contrario, subís la foto normal al blog, pero redondeais las esquinitas con css, en el blog aparecerán así cuando realmente no son así.

Mirad esta foto:


Ahora, pinchad en ella para que veáis como, realmente la foto, es normal, con sus esquinitas :)

Esto podéis hacerlo, automáticamente, en todas las fotos, no solo en una como estoy haciendo yo aquí.

¿Cómo? Simplemente debéis añadir en la cajita de añadir CSS:

.post-body img {
border-radius: 25px;
}

¡Y ya está!

Si algún día dejáis de querer las imágenes con las esquinitas redondeadas, le quitáis eso y ya.

¡Espero que os sea útil a algunas!

Recordad que en el curso de html y css aprenderéis a hacer cualquier cambio que queráis en el blog. Ya no más seguir tutoriales ni buscar cosas en google, simplemente poder hacer aquello que se os ocurra.

Mil besos,
Blogger | Email  | RSS Bloglovin' | Feedly 

Posts relacionados: 

1. Cómo ajustar las imágenes automáticamente al tamaño de nuestro blog
2. Cómo quitar la sombrita de algunas fotos solamente de la plantilla blogger
3. Cómo hacer que tus fotos se vuelvan más claritas al pasar el ratón por encima
Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

21 comentarios

  1. Muchas gracias por el tutorial!

    Me alegro de vertebpor aquí de nuevo :)

    ResponderEliminar
  2. Hola Blanca,

    He pegado el código en el CSS de mi blog, pero no funciona...

    ¿Deberían aparecer todas las imágenes ya publicadas redondeadas o sólo lo serán las que publicaré a partir de ahora?

    Muchas gracias por tu respuesta.

    ResponderEliminar
    Respuestas
    1. Qué raro

      Debería hacerlo en todas las imágenes ya publicadas :/

      Eliminar
    2. probablemente sea yo la que este haciendo algo mal, pero no se que es y me sucede lo mismo, he puesto el codigo y no me redondea las imagenes del blog
      Muchas gracias por todas las cosas que has compartido, amo tu blog.

      Eliminar
  3. Mil gracias Blanca! Me ha encantado el tutorial. Me alegra leerte de nuevo!
    Besos

    ResponderEliminar
  4. Qué subidón me ha dado ver en mi correo el aviso de tu post. Pensé: Blanca se lo ha pensado mejor y aquí está de nuevo jaja. No quiere eso decir que no te desee suerte en tu nuevo proyecto, es simplemente que echo de menos tus post. Gracias por el de hoy. Besos.

    ResponderEliminar
  5. Me he pensado que era un error de bloglovin, ja, ja, qué bien leerte. Te mando mucha energía para que acabes todas tus tareas pendientes.

    Un Beso

    ResponderEliminar
  6. ay que chulo queda, solo con esa cosita, gracias Blanca

    ResponderEliminar
  7. ay que chulo queda, solo con esa cosita, gracias Blanca

    ResponderEliminar
  8. Hecho, muchas gracias. Como he comentado en otro post me gusta leerte de nuevo, y al ver el tutorial me di cuenta que hecho de menos tus enttradas.
    He puesto 20px para redondear solo un poco las esquinas, queda genial.
    Un saludo.

    ResponderEliminar
  9. De verdad que me salvas la vida con cada una de tus entradas. Mil gracias:)
    besos

    ResponderEliminar
  10. ami me quedo super bien quiero aprender mas thml

    ResponderEliminar
  11. ami me quedo super bien quiero aprender mas thml

    ResponderEliminar
  12. Yo tampoco se donde pegar el css

    ResponderEliminar
  13. te amo gracias e visto otras formas pero no funcionaba pero esta si, mil besos para ti tambien este soy yo https://1.bp.blogspot.com/-Xuo8WrXg5Ys/XzDnLw4GYbI/AAAAAAAAI9I/QMqjFKKZ_GUoaTViY02fADeZ0VZZtpT-ACLcBGAsYHQ/s640/IMG-20200808-WA0004.jpg

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.