Modificar las imágenes con CSS: su importancia en el Diseño Web

A estas alturas de la vida nadie duda de la importancia que tiene el uso de imágenes en nuestras páginas web, partiendo de esta premisa, lo que tenemos que tener en cuenta es cómo queremos mostrarlas a nuestros visitantes.

Las imágenes no solo nos sirven para mostrar sin palabras un hecho, efecto o cualquier otra circunstancia importante en nuestro diseño, sino que también hacen que nuestra web sea más atractiva y estructurada. Para poder tener un control total sobre las imágenes que mostramos en nuestras webs, necesitamos conocer (y añadirles) un poco de código CSS.

Alineaciones

Controlar la posición de nuestras imágenes, así como algún estilo más, puede hacer que el documento se vea más ordenado, e incluso más “moderno”.  Vamos a ver un ejemplo:

Este código representa una clase (.alineaderecha) que alinea las imágenes a la derecha, les aplica un borde de 3 píxeles, sólido y de un color negro. Para destacarla, le aplica un margen (distancia entre el borde del contenedor de la imagen y el resto de contenido), de 10px alrededor de la imagen. Además, le aplicamos un padding (distancia entre el objeto y el borde del contendedor) de 5px.

Alineaciones por defecto en WordPress

No es necesario que creemos todas las clases para las alineaciones dentro de nuestra página web, ya que, por defecto, WordPress reconoce las siguientes clases para las alineaciones:

• .aligncenter Alinea las imágenes en el centro del documento.
• .alignleft Alinea las imágenes en la parte izquierda del documento, es la alineación predeterminada.
• .alignright Alinea las imágenes en la parte derecha del documento.
• .alignnone Sin alineación dentro del documento.

Efectos de estilo simples para nuestras imágenes

Una vez que ya sabemos alinear nuestras imágenes, podemos aplicarles unos estilos simples utilizando estas clases:

• background Permite que nuestra imagen funcione como fondo de un contenedor.
• border Le aplica un borde a nuestra imagen. Este borde debe tener un grosor, un tipo de borde y un color, como hemos visto en el primer ejemplo.
• float Le indica a nuestro navegador dónde debe alinear nuestra imagen. Por defecto utilizamos left, center y right.
• margin Establece un margen para nuestra imagen, es decir, una distancia entre el contenedor y nuestra imagen.
• padding Aplica una distancia de separación al contenedor de la imagen con el resto de contenido.

Si quieres tener un mayor control y comprensión sobre todas estas etiquetas que afectan a las imágenes de tu web, es necesario conocer el denominado “box model” de CSS.

Para saber más acerca de alineaciones, separaciones, bordes y fondos, y sobre el “box model” puedes hacer clic aquí.