How to create a new CSS style for images

To create a new style for images, the first steps to follow are the same as I explain in my post http://gooddesign.es/como-crear-un-estilo-nuevo-en-nuestra-plantilla-de-wordpress-para-texto-o-imagenes/.

I am going to create a new style for images so that the images defined with this style are inside a black rounded frame and have a predefined size.

Specifically, I want to achieve this effect for my images:

These are the attributes I need to work with:

height: /*image height*/
width: /*image width*/
border /*border style (color, size, type)*/
border-radius: /*rounded corners*/

As always, I will give a name to my style. In this case, the name will be redondo (rounded):

/*----------- REDONDO. Rounded images with predefined size ----------- */
.redondo {
 height: 400px;
 width: 400px;
 border: 2px solid black;
 border-radius: 800px;
 }

I call the style from the text editor of my WordPress post or page:


<img class="redondo" src="http:myimage" >

 

Voilá. Piece of cake!

¡ole ole! :-P

Leave a Reply

Your email address will not be published. Required fields are marked *