Personalizar borde en imágenes

Suprimir los bordes o líneas que por defecto rodean las imágenes es algo que tenemos costumbre hacer, bien para personalizar el blog o porque no termina de convencernos una imagen enmarcada. Personalmente me gustan las imágenes enmarcadas, utilizo un editor de imágenes pero también podemos hacerlo añadiendo unas líneas en nuestra plantilla.
Eso contesta la pregunta que me hizo un anónimo.

En nuestra plantilla Edición de HTML podemos encontrar las siguientes líneas de código:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

Es el lugar donde nos indica las propiedades de las imágenes añadidas en las entradas.
Desde Fuentes y colores podemos cambiar el color del borde, pero eso hace cambiar no sólo el color de en marco de las imágenes sino de todo el blog.
Para modificar el aspecto del borde que rodea nuestras imágenes sustituimos $bordercolor por el color escogido, por ejemplo #940f04 también vamos a darle un toque diferente sustituyendo solid por outset y aumentando el valor 1 a 4.

.post img {
padding:4px;
border:4px outset #940f04 ;
}

De esta forma cambiamos el borde únicamente de las imágenes añadidas en las entradas. El espacio de separación entre borde e imagen los disminuimos o aumentamos en padding.




Para facilitar la tarea de escoger un modelo de borde puedes ver aquí los efectos.

0 comentarios:

Publicar un comentario