Con un sencillo código podemos implementar bordes uniformes para todas las imágenes puestas en las entradas de un blog. Vamos a Editar HTML: | Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
Localizamos, poniéndola dentro del rectángulo de búsqueda (search), la siguiente etiqueta: ...e, inmediatamente antes, pegamos el siguiete código: .post img, table.tr-caption-container {
padding: 0px;
border: 8px solid #fe4a4a;
}
|
Con el anterior código lograremos que todas las imágenes que pongamos en las entradas del blog adquieran un borde con las características indicadas en el mismo código. Veamos: - El resaltado en
este color adjudica un espacio entre el borde y la imagen, que en este ejemplo no existe ya que es de cero pixeles. Si queremos que haya ese espacio cambiamos el cero por el número de pixeles que le dé el espacio deseado.
- El resaltado en
este color adjudica el ancho al borde.
- El resaltado en
este color es la propiedad que le da un estilo al borde. Ese estilo puede ser:
dotted: borde en línea punteada.dashed: borde en línea discontinua.solid: borde normal o en línea continua.double: borde en línea doble.groove: borde con efecto ranura o acanalado.ridge: borde con efecto cresta, rugosidad o cordoncillo.inset: borde con proyección o perspectiva hacia adentro.outset: borde con proyección o perspectiva hacia afuera.
- El resaltado en
este color es el código hexadecimal del color adjudicado al borde.
Veamos bordes con cada uno de los estilos arriba indicados, y sus respectivos códigos, puestos a la siguiente imagen (en cada uno se le ha dado un ancho apropiado para poder apreciar claramente cada estilo):
Imagen sin borde |
|
Código | Borde |
.post img, table.tr-caption-container {
padding: 0px;
border: 5px dotted #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 5px dashed #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px solid #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px double #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px groove #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px ridge #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px inset #fe4a4a;
} | |
.post img, table.tr-caption-container {
padding: 0px;
border: 8px outset #fe4a4a;
} | |
|
