Formato a imágenes con CSS. Padding.

En la anterior entrada vimos la manera más sencilla de realzar imágenes en las entradas usando border. Una segunda propiedad que nos permite añadir posteriormente más cosas es la que genera un margen o espacio interno. Eso es lo que en CSS se controla con la propiedad padding.

La diferencia entre padding y margin es que la segunda propiedad forma una especie de borde (con anchura) vacío de contenido, que sirve de separación exterior del elemento. Lo que hace padding es dejar también un área vacía, pero interior. En esta imagen se pueden ver dos capas con un margin:10px y un padding:15px. Para que sea visible, en la primera se han marcado con colores los efectos de aplicar esas propiedades con esos valores:

Pues bien, continuando con los efectos fáciles, otro muy socorrido es el del marco que también se puede conseguir añadiendo un padding y un fondo que rellenará con color ese padding:

.post img {
background: #333333;
padding:10px;
}

El efecto es idéntico al de border, pero nos permite hacer otras modificaciones adicionales como la siguiente, que consiste en añadir una sombra que hace que la imagen parezca una fotografía con marco. Para eso, también añadimos una sombra con box-shadow.

.post-body img {
background: #ffffff;
padding:10px;
-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}

Habréis observado que la propiedad box-shadow está triplicada pero con distintos prefijos. Esto es porque es una propiedad CSS3 relativamente nueva y sólo las últimas versiones de los navegadores la soportan. Para que sea visible en la mayor variedad de ellos posible, utilizamos los kits de compatibilidad. En el ejemplo y siguiendo el mismo orden, los de Safari y Mozilla.


Siguiendo por lo anterior, si queremos añadir un efecto Polaroid, sólo tendremos que aumentar el padding de la parte inferior. En el siguiente ejemplo se ha hecho de 50px frente a los 10px del resto.

.post img {
background: #ffffff;
padding:10px 10px 50px 10px;
-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}

Al hilo de esto, recordamos que el orden en el que se muestran los distintos valores tanto en padding como en margin, son respectivamente arriba, derecha, abajo e izquierda:

padding: 1px 2px 3px 4px;
padding: arriba derecha abajo izquierda


Para formar una especie de marco alrededor de una imagen, el uso de padding frente a border, nos permite usar ese fondo no sólo con un color plano, sino también con una imagen. En este caso simulamos que el poster está sobre un corcho:

.post img {
background: url(http://4.bp.blogspot.com/s1600/corcho.jpg);
padding:30px;
-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter