Redonder las imagenes del blog con CSS (Tutorial)
Cargando el blog... Espera un momento para continuar...

Redonder las imagenes del blog con CSS (Tutorial)

Que onda! Hace unos días que hice un nuevo blog personal y con un diseño muy personalizado Jeje, pues les enseñaré como hacer que las imagenes del blog se vean redondeadas.


Para hacer este efecto debemos aplicar los siguientes atributos al estilo CSS:

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Para ser más claro lo explicaré paso a paso (Sígue todos los pasos con atención y guarda una copia de tu plantilla antes de empezar):
  • Primero abriremos nuestro escritorio de blogger, después nos vamos a plantilla y nos vamos a Edición HTML. (Expandimos plantilla de artilugios por si es necesario)
Bien aqui es donde decidiremos a que parte del blog le aplicaremos dicho efecto -Por ejemplo: en mi blog personal tengo un efecto a las imagenes de las entradas y otro a las imagenes de la sidebar.
  • Segundo, les explicaré como hacer el efecto a toda la plantilla, solo a las entradas o solo en la sidebar.

Imagenes con puntas redondeadas en TODA la plantilla


Recordamos que ya estamos en la edición HTML de nuestro blog, ahora para hacer este efecto a toda la plantilla buscamos usando (Ctrl+F) esto que esta entre comillas ".img {" y si no les aparece ".img{", y si aun así no aparece (Recuerden que las plantillas descargadas pueden no tener la misma estructura) buscamos "img {" o "img{".

Una vez que lo hallamos encontrado vamos a reemplazar el texto quedando así:
img {
padding: 0px;
background: #fff;
margin: 5px 0px 5px 0px;
border: 1px solid #ddd;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

Y quedará así:

...Otro estilo mejorado por el padding que dejará un espacio para verse el background:
img {
padding: 6px;
background: #fff;
margin: 5px 0px 5px 0px;
border: 1px solid #ddd;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

Y quedará así:
En fin, podrás jugar con los valores en rojo, para probar distintos diseños, te recomiendo no mover el margin pues te dará el espacio entre el texto y la imagen.

Imagenes con puntas redondeadas SÓLO en las entradas


Bien, ya vimos los códigos CSS para conseguir estos diseños, ahora para que solamente las imagenes de las entradas del blog se vean de esta manera sigamos estos pasos:
  • Estando en la edición de HTML de nuestro blog, buscamos de igual manera con (CTRL+F) lo siguiente (Puede ser cualquiera de estos):
- "post{"
- "post {"
- "entry{"
- "entry {"

Una vez que lo encuentres pon debajo de su "}" el siguiente código CSS:

Nota: Si ya lo tienes sólo remplaza el contenido.
.entry img {
padding: 6px;
background: #fff;
margin: 5px 0px 5px 0px;
border: 1px solid #ddd;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

**Recuerda Puede ser "entry" o "post" depende el que hayan encontrado. De igual manera pueden jugar con los numeros para conseguir el efecto que deseen (A mayor numero más curva), pero no olviden No borrar el margin.

Imagenes con puntas redondeadas SÓLO en la sidebar


Bien, aquí hacemos lo mismo pero esto es más sencillo, buscamos usando (CTRL+F) lo siguiente: "sidebar{" ó "sidebar {" y justo debajo del ultimo "}" coloca el siguiente código CSS:
.sidebar img {
padding: 6px;
background: #fff;
margin: 5px 0px 5px 0px;
border: 1px solid #ddd;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

Y listo, esto es todo. Espero que te guste el diseño y a la próxima les enseñare cómo hacer jugar con el efecto hover en las imagenes como en mi blog personal. Si tienes dudas dejame tus comentarios.

En las categorías: ,

Una opinión hasta el momento.

  1. Muchas gracias :)

Por favor, deja tu opinion ó comentario:

Gracias por tu visita y por tus comenarios C=