JMiur [E]

¿Para qué usamos border="0" en las imágenes?

La teoría es la siguiente: por defecto, los navegadores crean un borde automático en toda etiqueta IMG que sea un enlace; ese borde tiene un pixel de ancho y es del mismo color que el texto de los enlaces y por lo tanto, si no queremos que se muestre ese borde, debenos agregar ese atributo.

Cuando subimos una imagen a Blogger, el código siempre es un enlace que permite abrir la imagen original y si bien nos muestra un código "excesivo", de todos modos, allí está el famoso atributo:
<div class="separator" style="clear: both; text-align: center;">
  <a href="http://......./s1600/........" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" height="xxx" src="http://......./sxxx/........" width="xxx" />
  </a>
</div>

Entonces, ¿basta que pongamos border="0" para que una imagen no tenga borde?

Si pero no; esta es la misma imagen con el mismo código y sin embargo, tiene un borde:


¿Por que ocurre eso? Porque lentamente, los atributos de las etiquetas van siendo reemplazdos por el CSS y esto no es una moda; las regla de estilo, tienen prioridad sobre los atributos así que si agregamos una regla que diga que los enlaces tengan borde, el border="0" será ignorado.

En Blogger, todo eso suele estar definido al inicio; por ejemplo, en una plantilla minima dice esto:
a:link {
  color:$linkcolor;
  text-decoration:none;
}
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
}
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
}
Y por supuesto, podemos modificarlo como se nos ocurra:
a:link, a:visited {
  color: #FF0;
  outline: none;
  text-decoration:none;
}
a:hover {
  color: #F0F;
  outline: none;
  text-decoration:none;
}
a img {
  border: none;
}
o establecer reglas específicas para las imágenes de las entradas
.post img {
  border:4px outset #940f04 ;
  padding:4px;
}
o ya que Blogger agrega una clase, podemos usarla:
.separator {
  .......
}
.separator img {
  .......
}
.separator img:hover {
  .......
}
Algo similar ocurre con otros atributos como width y height.

Usando el mismo código agregado por Blogger podemos crear reglas que lo modifiquen y estas reglas de estilo, tendrán prioridad sobre los atributos:
.separator img {
  background-color: #EEE;
  border: 5px solid #ABC;
  height: 100px;
  outline: 1px solid #DDD;
  padding: 5px;
  width: 100px;
}

10 comentarios:

Asesino Cereal  

En dónde estaba esta info hace 1 año cuando me pasé días buscándola? :) Al final me eché un curso de CSS para saber en dónde tenía que darle, pero lo bueno es que ahora soy más "proh" con el CSS :)

Responder
Ramona  

pufff, llevo meses buscando información al respecto sobre quitar el borde de las imágenes de mis entradas, pero ni con tu post (que está muy bien) me aclaro... podrías ayudarme?

todo lo que modifico en el CSS no se aplica nunca...

Responder
JMiur  

No veo que en tu blog las imágenes tengan un borde.

Tienes todas estas reglas de estilo;

.post img {
border: 0 outset #FFFFFF;
padding: 0;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: transparent;
border: 1px solid transparent;
-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);
}
.post-body img, .post-body .tr-caption-container {
padding: 5px;
}
.post-body .tr-caption-container {
color: transparent;
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

Que simplemente puedes eliminar y ya no habrá bordes, sombras o separaciones en las imágenes.

Responder
adm100388  

Muy buena la entrada, aprendí bastante, y además muy interesante, había varias cosas de las que no tenía idea.
Ahora, una cuestión, yo uso así el post img:

.post img {
border:1px solid #CCCCCC;
padding:2px;
}

Siempre salen con bordes obviamente, lo que quiero es que determinadas imágenes no usen bordes, o dicho de otra forma, que las entradas nuevas que publique, al aplicarle un div por ejemplo no muestre el borde en la imagen, bueno, no necesariamente nuevas, sino una cualquier aplicándole el div. Intenté crear un nuevo css sin borde, para que lo aplique por el que está encima, pero aun así sigue saliendo el borde.

¿Hay forma de hacer esto?

Gracias,

Responder
JMiur  

SI, debes crear una clase y agregarla a la imagen; por ejemplo:

.post img.sinborde {
border:none !important;
padding:0 !important;
}

<img class="sinborde" src="imagen" />

Responder
Cocina  

Hola JMiur! estoy usando una de las plantillas del nuevo diseñador,y mi problema esta cuando subo una imagen a las entradas en png,nunca queda de fondo transparente.que deberia modificar??ya pude quitarle el borde a las imagenes pero ahora tengo este problema.
Saludos!y gracias

JMiur  

Eso ocurre porque las reglas de estilo de ese blog indican que las imágenes tengan un fondo blanco así que, deberías quitarles la propiedad background:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {}
.post-body .tr-caption-container img {}

Cocina  

Gracias JM !!
quedo perfecto como siempre!
un saludo excelente semana !

Responder
Leslie Mishigan  

Disculpe, he intentado todo lo descrito en este post y no me funciona >_< ... bueno en parte si xD... le explico, yo aplique un borde inferior con dahsed para los enlaces, lo malo, esque también le sale ese borde a las imagenes :/ , y yo solo quiero que el efecto se muestre en los textos, en las imagenes que no aparesca ningun borde, sin embargo no logro hacerlo :/ aplique propiedades con .separator img:hover y efectivamente aplica las propiedad que le pongo pero tambien le sale el borde dashed XD y no quiero eso... me podria ayudar?

mi blog -> http://lesliemishigan.blogspot.com/

JMiur  

Eso es muy difícil de resolver, tal vez, agregando una regla que conteple las imágenes de los posts:

.separator a:hover{
border:none !important;
}

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR