Formato a imágenes con CSS. Padding. | Oloblogger En la anterior entrada vimos la manera más sencilla de realzar imágenes en las entradas usando borde...

12 de enero de 2012

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
Copy URL

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

follow us in feedly

9 comentarios :

  1. Es un buen truco... pero creo que en "Windows Live Writer" trae estos formatos.

    Un abrazo.

    ResponderEliminar
  2. Muchísimas gracias Oloman......lo acabo de poner en el blog y me gusta, me gusta mucho.
    Saludos y que vaya bien

    ResponderEliminar
  3. No he utilizado nunca esa utilidad Celso, así que no puedo opinar sobre si es diferente o no. Aquí se trataba de ver cómo hacer esto con CSS.

    Gildo, pues en el blog de fotografía puede que también te quede bien un marco blanco de estos ;)

    ResponderEliminar
  4. Yo hace unos meses que coloqué el "borde efecto polaroid" en mi blog, con el pie de foto en el borde inferior, y me encanta como queda. Lo que no sé cómo hacer es poner un tipo de letra tipo manuscrita (como Lucida Handwriting) que se aplique solo en ese pie de foto... ¿alguna idea?

    ResponderEliminar
    Respuestas
    1. Sí, claro. Prueba con la clase .tr-caption ;)

      Eliminar
    2. Qué curioso, juraría que ya había probado con la clase .tr-caption y no me había funcionado... debí haber cometido algún error, así que muchas gracias por tu ayuda :)

      Al final he puesto la tan socorrida Comic Sans MS, la misma que hace un par de años te causó varios comentarios negativos (e injustificados) :D

      Eliminar
    3. Perdona, con el agotamiento de contestar tanto comentario no leí bien la parte de la tipografía. Echa un vistazo a esto, que es la mejor opción que conozco:
      Más fuentes para Blogger. Visita el enlace de Google Font.

      Eliminar
  5. Buenas, ¿es posible ponerle color al margin?

    ResponderEliminar
    Respuestas
    1. Sí y no. El margen realmente tendrá el color de fondo del contenedor al que pertenezca el elemento. Este bloque de comentarios tiene, por ejemplo, un margen con respecto al inmediatamente superior que se ve blanco, pero esto es porque ese es el color de la capa anterior.

      Eliminar