Las imágenes que publicamos en las entradas de nuestro Blog, son sin duda una ayuda visual para atraer a nuestros lectores, pero dar un poco de atractivo a estas imágenes por medio de sus bordes, puede ayudar a cambiar del clásico estilo cuadrangular, por un nuevo estilo y así hacer que este estilo sea mas llamativo para nuestros visitantes, en esta entrada aprenderemos a dar Bordes circulares a nuestras imágenes.
Para dar Bordes a nuestras Imágenes simplemente tenemos que aplicar el Famoso border-radius, para que nuestras imágenes se bordeen, border-style, la cual define el estilo de borde que tendrá nuestra imagen, ademas aplicaremos border-color para dar un color al borde que usaremos.
Ahora para que esta propiedad de Bordeado tenga efecto en las imágenes de nuestras entradas simplemente tenemos que añadir el estilo en la clase que identifica a nuestros Post, para añadir CSS en nuestro Blog solo tenemos que ir a Plantilla>> Personalizar >>Avanzado>>Añadir CSS.
Al seleccionar .post-outer img, seleccionamos el campo que contiene a las imágenes de las entradas. Para entender mejor de lo que quiero decir, veremos algunos ejemplos de bordes circulares que podemos aplicar en nuestras imágenes.
-->SemiBorde Circular-->Borde Circular-->Borde Circular Punteado-->Borde SemiCircular Punteado
En los siguientes ejemplos notamos diferentes resultados, cada uno con su respectivo código de esta forma podemos cambiar los clásicos estilos cuadrangulares por estilos circulares en nuestras imágenes, si deseamos obtener bordes circulares mas notables o menos notables, solo tenemos que aumentar o disminuir los pixeles de la propiedad border-radius.
El estilo punteado y firme, es aplicado en border-style, siendo los atributos dashed y solid respectivamente los generadores de estos.
Espero que les sea de mucha ayuda este Post, es una buena forma de cambiar la forma de presentación de nuestras imágenes en blogger, haciéndolas mas peculiares, claro podemos aplicar un sin numero de estilos mas, solo tenemos que centrarnos en: .post-outer img, la cual es la clase que identifica las imágenes que se encuentran dentro de nuestros post.
Cualquier duda o aporte hacerlo por comentarios. Gracias por su tiempo!
Muchas gracias, gran aporte.... Emm pero no tiene bordes cuadrados ?
ResponderEliminarHola NyverYi Kun, si quieres que tus bordes sean cuadrados solo quita la propiedad border-radius. el codigo quedaría así:
Eliminar.post-outer img
{
border-color:red;
border:solid;
}
Espero te sirva. Gracias por Comentar!