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,
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
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:
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,
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
Muchas gracias por el tutorial!
ResponderEliminarMe alegro de vertebpor aquí de nuevo :)
Hola Blanca,
ResponderEliminarHe 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.
Qué raro
EliminarDebería hacerlo en todas las imágenes ya publicadas :/
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
EliminarMuchas gracias por todas las cosas que has compartido, amo tu blog.
Mil gracias Blanca! Me ha encantado el tutorial. Me alegra leerte de nuevo!
ResponderEliminarBesos
¡Gracias Blanca!
ResponderEliminarQué 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.
ResponderEliminarMe 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.
ResponderEliminarUn Beso
ay que chulo queda, solo con esa cosita, gracias Blanca
ResponderEliminaray que chulo queda, solo con esa cosita, gracias Blanca
ResponderEliminarHecho, 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.
ResponderEliminarHe puesto 20px para redondear solo un poco las esquinas, queda genial.
Un saludo.
De verdad que me salvas la vida con cada una de tus entradas. Mil gracias:)
ResponderEliminarbesos
ami me quedo super bien quiero aprender mas thml
ResponderEliminarami me quedo super bien quiero aprender mas thml
ResponderEliminarque es el css?
ResponderEliminarYo tampoco se donde pegar el css
ResponderEliminarya he conseguido hacerlo,gracias.
EliminarNo me funciona :(
ResponderEliminarNo me funciona :(
ResponderEliminarte 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
ResponderEliminarRegresa
ResponderEliminar