CSS básico. Ejemplo con imágenes redondas (y 2) | Oloblogger Y vamos ya a redondear esta mini serie de entradas. Decía en el anterior post que esto de hacer i...

13 de marzo de 2013

30 ☆ CSS básico. Ejemplo con imágenes redondas (y 2)

Y vamos ya a redondear esta mini serie de entradas.

Decía en el anterior post que esto de hacer imágenes redondas con CSS, sin necesidad de estar editándolas una a una con un programa, es muy sencillo. Pero claro, esto es así si se sabe un poco de ese lenguaje, de lo contrario es poco menos que una m:i2.

Pero como ya hemos visto los conceptos básicos sobre CSS ahora intentaremos aplicarlos con este ejemplo.

De lo que se trata es de subir una imagen de manera normal (HTML) y luego añadir algo en nuestra hoja de estilo que la transformará de manera que la silueta exterior sea un círculo... o al menos una forma redonda. Esto dependerá de las proporciones de la imagen que utilicemos.

Digo que subiremos la imagen, pero también sirve para cualquiera ya subida y que se marque adecuadamente aunque sea a posteriori como veremos. De hecho podremos aplicar este efecto a una imagen en concreto, a todas las de una zona o a todas las del blog. Eso ya dependerá de vuestros gustos.

Marcando el HTML



Evidentemente lo primero que necesitamos para redondear una imagen es una idem. El código puede complicarse lo que sea, pero una imagen se construye con la etiqueta img y tiene básicamente esta pinta:

<img src="DIRECCION_IMAGEN"/>

Así es como logramos que se vea algo como lo de la izquierda. Normalmente debería llevar también un alt con un texto y en ocasiones lleva unas dimensiones forzadas (con width y/o height). Cuando se suben desde el editor de Blogger ese código queda además dentro de un enlace que apunta a la imagen a tamaño original.

Pero si queremos que esa imagen pueda ser configurada desde CSS, necesita incorporar una marca. Esa marca será un selector que crearemos nosotros u otro que ya pudiera llevar previamente. Podemos encontrarlo (o añadirlo) de dos maneras: dentro de la etiqueta img o en la caja padre. Yo lo voy a bautizar como redondo y respectivamente, las dos maneras apuntadas antes serían estas:

<img class="redondo" src="DIRECCION_IMAGEN"/>

<div class="redondo">
<img src="DIRECCION_IMAGEN"/>
</div>

La cuestión básica es que para que el intérprete del navegador sepa que esa imagen en concreto tiene que llevar un estilo determinado, evidentemente hay que etiquetarla de alguna manera. Esa etiqueta es sencillamente indicarle que tendrá la clase X, en este caso redondo.

Aplicando estilo a todos los elementos homogéneos


Pero por si sola esa marca no hará nada. Necesita ser relacionada con una regla de estilo que le indique qué hacer con ella. Por mucho que añadamos clases, si estas no están definidas en el CSS, el aspecto de la imagen (o el elemento que sea), no cambiará.

Para cambiar la forma de TODAS las imágenes de nuestro blog, esto sería lo que habría que añadir a nuestro CSS:

img {
border: 2px solid grey;
margin: 0;
padding: 0;
border-radius: 800px;
overflow: hidden;
}

¿Y esto cómo lo traduce nuestro navegador? De la siguiente manera:

Busca imágenes mediante su nombre de etiqueta (img) y aplícale los siguientes formatos

  • un borde de 2 píxeles, sólido y de color gris (grey)
  • si tiene márgenes o padding anúlalos y déjalos a cero
  • el marco de la caja que sea redondo en sus cuatro esquinas
  • por último, todo lo que sobresalga de ese marco, escóndelo, que no se vea (hidden)

Bueno pues ahora que tenemos esa regla en nuestra hoja de estilo sí que ya se verán TODAS las imágenes como queríamos, como en el ejemplo de la derecha.

Para declarar una propiedad correctamente tenemos que conocer qué hace y cómo se ha de redactar y eso lo podréis encontrar en muchos sitios, aunque la autoridad en esto es W3C.

Por ejemplo  border-radius necesita en un principio 4 valores que leídos de izquierda a derecha representarían la curvatura de las esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda. Si se pone un sólo valor se sobrentiende que los cuatro serán iguales a ese.

También convendría conocer que cuando el valor de la curva supera las dimensiones de la caja, la curva se adapta a esta formando un círculo. Si pongo 800px es para pasarme de largo con cualquier imagen de tamaño "normal" en un blog y que no se quede ovalada si me quedo corto con el radio.

Evidentemente la tarea para casa es ir aprendiendo todas las propiedades que existen y su sintaxis, cosa que es imposible desarrollar en un par de posts.

Aplicando estilo a todos los elementos del mismo bloque


Pero seguramente no queramos que todas las imágenes del blog sean redondas, sino sólo las que nosotros queramos, porque de otra manera hasta la cabecera tendrá esta forma. Antes hemos usado una etiqueta html (img) y no un selector y por ese motivo el estilo afectará a todas las imágenes.

Para evitarlo podemos hacer una de las cosas que vimos al principio y que era meter la imagen dentro de un div con la clase redondo. De esa manera sólo las imágenes que estuvieran dentro de una caja con esa clase se verán afectadas por la regla que las hará redondas.

<div class="redondo"><img src="DIRECCION_IMAGEN"/></div>

Pero la regla entonces no debería atacar a la etiqueta img directamente, sino al selector redondo. En ese caso habría que redactarla así:

.redondo img {
border: 2px solid grey;

etc...

Y la traducción sería algo así como aplicar el estilo sólo a las imágenes que estén dentro de una caja con clase redondo.

La ventaja de esto es que en muchas ocasiones no tendremos que crear ningún selector ex-profeso para modificar algo. Por ejemplo, en Blogger todas las imágenes del cuerpo principal para el contenido de las entradas ya están dentro de una caja que por lo general se llama post o post-body.

Así, si el selector que usamos es .post-body img, sólo las imágenes dentro del bloque de entradas se verán afectadas por el estilo que programemos con la ventaja de que no tendremos necesidad de crear un nuevo selector. Esto será normalmente lo que más utilicemos.


Aplicando estilo a un solo elemento


Lo último que me queda ya por explicar es cómo modificar el estilo de un solo elemento (una sola imagen siguiendo el ejemplo). Esto se hace añadiendo inline la clase por nosotros preparada y es lo que avanzamos al principio del post.

<img class="redondo" src="DIRECCION_IMAGEN"/>

Pero como antes, el selector a utilizar no sería exactamente igual a los utilizados hasta ahora, sino...

img.redondo {
border: 2px solid grey;
margin: 0;
padding: 0;
etc...

...lo que se interpreta cómo busca sólo las etiquetas img que tengan la clase redondo.


Epílogo


Para cerrar el tema secundario de lo de redondear imágenes, tenéis que tener en cuenta que si estas no son cuadradas, en lugar de salir con forma circular os aparecerán como óvalos.


Para solucionarlo se deberá incluir en la regla que vimos un width y un height con idéntica medida (valor en píxeles) para forzar el recorte de la imagen y que esta aparezca perfectamente circular.

Y sobre el tema principal (hojas de estilo), esto que en principio era sólo para explicar lo de las imágenes redondas se ha convertido casi sin querer en un mini-cutre-cursillo-express de CSS bastante deficiente y según escribía me daba cuenta de que me quedaban muchas cosas por explicar o desarrollar. Pero sinceramente no me veo capaz de realizar un buen manual sobre este tema y pienso que aún así, esto le podrá venir bien a alguien para hacer entendible lo que muchas veces se reduce a copiar y pegar, así que... ¡ahí queda!

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Y muchos más artículos interesantes si nos sigues en...

30 comentarios :

  1. Gracias por el dato, hacía falta esta rigurosa explicación

    ResponderEliminar
  2. Hola Oloblogger, lo que te comentaré nada tiene que ver con esta entrada :D

    Me interesa el servivio que ofreces sobre la cración de una plantilla desde cero con las especificaciones que se te envíen, pero no sé a que te refieres cuando dices "enviar fichero".

    Lo vi en http://www.oloblogger.com/p/oloblogger-low-cost.html

    De llegar a un arreglo cómo se te haría el deposito? soy de México.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Lo de enviar el fichero es opcional, por si queréis mandarme algún boceto, alguna imagen, un .doc con las explicaciones o cualquier plantilla ya prefabricada como muestra.

      Eliminar
    2. Bien. Gracias. Ya me pongo contacto contigo. Buen día.

      Eliminar
  3. Hola Oloman, quería preguntarte como podría poner varias fotografías redondeadas en lugar de la marquesina que tengo en mi blog, que ya me cansé de ella. Me gustaría poder ir cambiando los modelos a gusto para ir poniendo los últimos que confecciono, pero es que no tengo ni idea de como hacerlo. Incluso tampoco me importaría que fueran cuadradas en pequeño para que pueda poner por lo menos cinco o seis... No sé si te pido mucho, pero es que debo estar un poco obtusa y no se me ocurre la manera de hacerlo. ¿Sería posible ponerlo en un gadget para que pueda cambiarlas más fácilmente??.. La idea sería ponerlas justo debajo de las pestañas que tengo, así entrarían más. Te dejo la dirección del blog, que lo mismo te suena porque ya te pregunte en otra ocasión:
    http://soandoconperros.blogspot.com.es/
    Muchas gracias de antemano y saludos¡¡.

    ResponderEliminar
    Respuestas
    1. Me parece que en estos dos días ya has visto cómo hacer eso que querías en un gadget ;)

      Eliminar
    2. Si, jajaja, al final se me encendió la luz en el cerebro y busqué una solución fácil y práctica ya que cuanto más masticado le das las cosas a la gente, mejor para mi... Lo único que no he aplicado, por no liarme más sobre todo y por tiempo, es lo de redondear las fotos. Pero no lo descarto, porque creo que quedarán mejor en redondo que en cuadrado. Suavizará el aspecto del inicio del blog seguramente.
      Muchas gracias por contestar Oloman¡¡. Saludos :)

      Eliminar
    3. Pues este post va de eso, de redondear, así que ya sabes... ;)

      Eliminar
    4. Si lo sé, por eso te pregunté al principio como poner varias fotografías redondeadas... Solo que yo quería hacerlo en el mismo gadget, sin tener que modificar plantilla ni nada por el estilo. Supongo que tal y como lo tengo ahora sería imposible redondearlas dentro del gadget, no???... Jeje, yo por preguntar que no quede. Es que ya te he comentado en alguna ocasión lo poco que me gusta meterme con la plantilla...
      Mira hablando de plantillas. Me gustaría comentar una cosita contigo a ver si sabes que hacer: Desde hace un mes mas o menos llevo intentando modificar el fondo del blog y no me deja. Yo ahora mismo tengo un fondo de blogger, y me gustaría poder cambiarlo por otro, que puede ser de bloger o simplemente dejarlo con un solo color. Si entro en plantilla, en avanzado y fondo, elijo otro modelo pero donde aparece la imagen del blog debajo, no se modifica, sin embargo si le doy a guardar plantilla me dice que la plantilla está aplicada. He comprobado que me ocurre lo mismo con la letra y el color de la misma. En ayuda de Blogger, he introducido la pregunta varias veces, pero no hacen ni caso. Es más, somos muchos a los que les ocurre lo mismo, pero pasan de nosotros. No sabemos a que es debido que ni tan siquiera nos respondan, cuando normalmente suelen hacerlo. Yo sé que tú estás en contacto con ellos bastante, y sería de agradecer intentaras comentar con alguien de Google el porqué está ocurriendo esto. No ocurre con todos los blogs, solo con algunos. Hoy mismo ha contestado en la linea de preguntas un chaval que tiene 5 blogs y solo le ocurre con uno, y está también harto que no nos respondan ni nos den solución. También me gustaría saber tu opinión del porqué ocurre esto y si se puede modificar el fondo de otra manera. Lo suyo sería poder controlar el diseño de tu propio blog, pero parece que a algunos no se nos permite. Perdona por extenderme tanto, pero es que estoy un poco harta de no encontrar la manera de poder modificar mi blog a mi antojo. Gracias por todo Olo¡¡.. ;)

      Eliminar
    5. Si no fuera por el borde blanco que le pusiste a tus imágenes, con que añadieras esto Avanzado > Añadir CSS, sería suficiente:
      #HTML32 img {
      border: 0;
      height: 150px;
      width: 150px;
      border-radius: 400px;
      }

      Pero si realmente quieres modificar tu blog a tu antojo como dices después, deberías perderle el miedo a meterte en la plantilla, pues es dónde tendrás absoluta libertad.

      Por ejemplo, para cambiar el fondo sólo tienes que entrar en ella y buscar una etiqueta BODY que lleva un background: #4A7AA8 url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYmI5ZjFjODktMzQyMC00ZWViLTg2YmYtOTlhYWNlM2ZiYTVm) no-repeat fixed top center /* Credit: Airyelf (http://www.istockphoto.com/googleimages.php?id=2597369&platform=blogger) */;
      }

      Esa es la imagen de fondo de tu blog y si cambias el contenido de background, pues ya cambias tu fondo.

      El por qué el Diseñador de plantillas falla algunas veces lo desconozco, pero no dudes de que cuando lo averigue o alguien me lo diga lo publicaré. Hace sólo dos días me enteré por un comentario cual era el problema (pequeño) por el cual no funcionaba el lightbox en algunos blogs. Y es que no tengo enchufe (contacto) con Google como tú piensas ;)

      Eliminar
    6. Lo de modificar en Avanzado > CSS estaría bien si me funcionara... Pero de la misma manera que no puedo modificar, el fondo, tampoco puedo incluir ni cambiar nada... Un asco... Hoy, por fin¡¡ después de un mes o más los de blogger han respondido viendo la cantidad de comentarios de gente que le ocurre lo mismo que a mí. La solución que nos dan, yo por lo menos ya la había puesto en práctica, actualizar navegador, activar Javascript, borrar caché y cookies... En fin, que nada da resultado. Hombre no es que piense que tienes enchufe con ellos, solo que es muy posible que entiendas mejor de lo que te hablo, solo eso..
      Sobre el tema que me decías del cambiar el fondo, lo que tengo que buscar Body y en el background y "todo" eso que me has puesto es la URL de la imagen??... Es decir que todo lo que me indicas debería sustituirlo por la URL de la imagen que quisiera cambiar??. Es que tengo dudas con eso, no sé cual es exactamente la dirección completa que tengo que cambiar. Te lo digo porque ya lo intenté pero no pasó nada... (ya he preguntado por ahi este tema en concreto, jajaja) Ya te digo que soy bastante torpe con el HTML. Para tí es fácil porque es lo que dominas, pero si te digo que me cosas a la máquina uno de mis collares, seguro que también le tendrías miedo a darle al pedal¡¡.. Yo todo bien explicadito por favor, que soy muuu paleta.. ;)

      Eliminar
    7. ¿Tú naciste sabiendo coser a máquina? Pues yo todavía estoy aprendiendo cosas todos los días. Es sólo cuestión de empezar y después de darle la primera vez al pedal, seguir haciéndolo con frecuencia ¿no? :)

      Eso sí, las pruebas no se hacen con los collares buenos, sino con algunos de prueba... supongo.

      Y la URL de la imagen que hay que cambiar es exactamente esta: //themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYmI5ZjFjODktMzQyMC00ZWViLTg2YmYtOTlhYWNlM2ZiYTVm

      La tuya llevará al principio un http:// y con Vista Previa comprobarás si lo hiciste bien o no. Si es que no, simplemente no guardes los cambios y todo se quedará como estaba. No problemo.

      Eliminar
    8. Jajaja, vale Oloman, las comparaciones son odiosas, lo sé.. ;)
      Bueno, gracias por contestar, una vez más, espero encontrarla sin problema, que estoy leyendo por ahí que han cambiado el HTML, y que ya no existe lo de Expandir Plantilla de Artilugios, algo así he visto por ahi.. Aunque supongo que con Control-- Cmd (en mi caso) F se seguirán localizando las etiquetas... Ya sé, probaré primero con Vista Previa para ver si lo he implementado correctamente antes de Guardar. No te preocupes...
      Solo tengo una pequeña duda y ya te dejo en paz. Para que la nueva imagen ocupe todo el fondo, ¿tendría que poner alguna cosita más??. Porque ya sabes que a veces la imagen se queda por la mitad, o no se ve bien con algunos navegadores y parece que se queda cortada. Y como la que quiero poner es una imagen que me gusta de internet )y que no tengo ni idea de si valdrá para ponerla), no de blogger lo mismo no lo ocupa.
      Pues por el momento nada más, aunque no descarto darte más la tabarra... ;) Gracias de nuevo..

      Eliminar
    9. Por cierto, ya lo último que me faltaba, al intentar entrar en el HTML, se queda pillado "cargando" y no entra... Lo he probado 20 veces hoy a lo largo de la tarde y ahora y no carga la plantilla... Joe :(

      Eliminar
    10. Hola Oloman, al final despues de borrar cookies, la caché y entrar con otro navegador (yo uso Safari, pero con el no me cargaba la edición de HTML como te comenté ayer) en concreto con el Chrome, he conseguido que se abra la plantilla en el editor. He encontrado la URL de la imagen que tengo de blogger después de mirarme tu entrada sobre como acceder a las distintas partes de la nueva edicion de plantilla, que me ha costado, jeje. Bueno que después de todo el tema, cambio la URL de esa imagen por la que quiero poner...¡¡ y tampoco se cambia¡¡... Esto ya me está superando, de verdad. Yo toda contenta pensando que por fin iba a poder modificar el fondo y resulta que no se cambia.... Puff, esto no es normal no te parece??. Te aseguro que he seguido todas tus instrucciones, pero nada, que en vista previa no se reflejan los cambios. Pasa lo mismo que en Personalizar y Avanzado, que no se aplican los cambios... Así que evidentemente no le he dado a guardar porque no veía cambio alguno. Sé que te estoy volviendo loco, y que ya me estoy pasando, pero es que no tengo a nadie a quien preguntarle esto que me pueda ayudar. Lo siento :( No suelo ponerme tan pesada con esto, pero es que esto me supera, y se está convirtiendo en una obsesión... Dime si puedo hacer algo, o desisto, simplemente y sigo como estoy... Gracias una vez más.

      Eliminar
    11. Perdona pero estoy intentando pegar aqui el código tal y como queda cambiando la URL antigua por la nueva, pero no me deja, no se porque. Por eso verás comentarios mios eliminados. En fin... :)

      Eliminar
    12. Busca esto en tu plantilla:
      body, .body-fauxcolumn-outer {
      font: normal normal 17px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #414e5b;
      background: #4A7AA8 url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYmI5ZjFjODktMzQyMC00ZWViLTg2YmYtOTlhYWNlM2ZiYTVm) no-repeat fixed top center /* Credit: Airyelf (http://www.istockphoto.com/googleimages.php?id=2597369&platform=blogger) */;
      }
      Ese background es el que tienes que cambiar. De momento quita la imagen y deja sólo background: #4A7AA8; Supongo que te funcionará por lo que luego sólo tienes que volver a poner la imagen así:
      background: #4A7AA8 url(DIRECCION_IMAGEN);

      Y para otra vez utiliza esto para pasar previamente el código a texto plano. Así te dejará pegarlo en un comentario.

      Eliminar
    13. Perdona también se queda corto en ambos lados del blog, se ve un poco del fondo azul que tenía puesto antes en el blog. ¿Se podría ajustar al completo??. Gracias

      Eliminar
  4. Gracias al final he conseguido cambiar la imagen con tus indicaciones. Muchas gracias por tu paciencia. Ahora por lo menos se donde encontrarla en el que caso que me canse de la que puse ahora. Solo tengo un pequeño problema que ya te comenté en en este mismo post. Que la imagen no se ajusta por completo al blog. Es decir que no sale al completo. Le falta la parte de abajo que también lleva un pequeño dibujo en la esquina inferior derecha. Eso ya me imaginaba que podía ocurrir porque he leído por ahí a gente que le ocurre lo mismo. No sé que debería añadir al código para ajustar la imagen al completo y que saliera entera. Si te apetece me contestas y si no, me mandas por ahí y lo entendería, jajaja...
    Muchísimas gracias de nuevo. Eres el santo Job¡¡ Pero sobre todo una gran ayuda¡¡. ;)

    ResponderEliminar
    Respuestas
    1. Vale. En el background tienes añadido esto: no-repeat fixed top center... Cambia ese top por un bottom y entonces el fondo se tomará a partir de la parte inferior y así se verán las hierbas esas XD

      Eliminar
    2. Ok, pues voy a probar a ver como queda con el bottom ese, aunque ahora tampoco me disgusta. Habrás visto que se ve un poquito abajo, aunque no entero, y quizás entero sería demasiado. Lo único que no me gusta es que a ambos lados se ha quedado como un centímetro del fondo azul que tenía antes puesto en el blog, y no sé como conseguir que la imagen ocupe todo el fondo al completo... Ya está al 100% según veo en los códigos, pero seguro que algo está mal... Ojalá supiera tanto de HTML como tú, o por lo menos una cuarta parte, seguro que no tendría que estar dando el coñazo a nadie, jaja.
      Bueno, muchas gracias por todo Olo, has sido super amable. ;)

      Eliminar
    3. Yo no veo esos laterales azules, pero puede ser porque tu pantalla sea más ancha que la mía. Si quieres puedes intentar usar esta propiedad CSS: background-size

      Eliminar
    4. Gracias, entonces he de imaginar que solo verán esos laterales de distinto azul que el del fondo que he puesto los que tengan una pantalla grande panorámica... Bueno, creo que lo dejaré así entonces, que ya da un poco igual. Muchas gracias de nuevo. :) Saludos¡

      Eliminar
  5. Excelente ! truco realizado muy facil! Lo que quisiera saber es, quisiera subir fotos a mi blog pero no desea andar alojandolas en otras webs y estar copiando el link quiero todo en un solo lado,el efecto redondeado lo probe me gusto pero, que pasa cuando subo varias fotos, que valores tengo que manejar para que queden como alineadas y no todas una abajo de la otra, desperdiciando espacios en los lados, hay manera de manejar eso desde la plantilla o el editor de blogger cuando realizas la publicacion? la idea es que queden como thumbls y al hacerles click se habra la imagen

    ResponderEliminar
    Respuestas
    1. Hola. Pues para que sea desde la plantilla, tendrás que añadir al CSS algo así:
      .post-body img, .separator, .separator a {display:inline-block !important;}

      Pero realmente es algo más complicado si quieres que se queden como en una galería. Lo demás lo dejo para tí.

      Eliminar
  6. Hola !!!
    Ante todo, gracias por ser tan generoso y por compartir tus conocimientos con el mundo. Te sigo desde hace unos meses y tu blog me ha sido de mucha ayuda para diseñar un poco el mio y hacerlo más bonito.
    Vengo a preguntarte una cosa, sobre esto de las imágenes circulares. Te tengo que decir que he conseguido que en las entradas las imágenes sean circulares, pero ¿como hago que aquellas imágenes que subimos en la columna también lo sean? Entra si quieres en mi blog, veras que he hecho como un menú de categorías y he subido unas imágenes que los he hecho circulares con un programa que tengo, o sea ya los he subido circulares, pero se nota la sombra cuadrada alrededor de la imagen, y estéticamente no queda bien, ya que no sabia como hacerlo. Porque creo que se necesita algún código o etiqueta desde el css que hay que añadir para estas imágenes de la columna. Espero tu respuesta. Gracias !!!
    Mi blog:http://www.misdulcesjoyas.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Como explico por ahí adentro, siempre se trata de encontrar la caja dónde está el elemento a modificar.

      Si por ejemplo quisieras redondear TODAS las imágenes de los gadgets de la barra lateral, tendrías que añadir a tu CSS algo como esto:
      .sidebar .widget-content img {
      border-radius: 400px;
      overflow: hidden;
      border: 4px solid pink;
      }

      Sin embargo, si sólo quieres cambiar las que correspondan con gadgets tipo Imagen, habría que usar otro selector:
      .sidebar .widget.Image img {
      border-radius: 400px;
      overflow: hidden;
      border: 4px solid pink;
      }

      Por último si sólo quieres aplicarlo a un gadget concreto, tendrás que ver cual es su ID. Por ejemplo la de los Bizcochos tiene la id=Image1, por lo que para modificar esa sola sería:
      .sidebar #Image1 img {
      border-radius: 400px;
      overflow: hidden;
      border: 4px solid pink;
      }

      Y una vez explicado todo esto, si lo que realmente te molesta es ese fondo gris que tienen las imágenes, quizás lo mejor sería que vieras esto.

      Eliminar
  7. Hola !!
    Muchas gracias. Tu respuesta me ha sido de gran ayuda. Un saludo !!!

    ResponderEliminar
    Respuestas
    1. Ohhh...acabo de usar el selector y las imágenes quedan perfectas !!!
      Además me has puesto la posibilidad del borde en color rosa, ME ENCANTA !!!!
      Llevo un buen rato mirando la pantalla y me encanta como queda. Gracias y disculpa por ser tan pesada. Un abrazo !!!

      Eliminar