Modificar las imágenes con CSS

Tiempo estimado de lectura: 8 minutos

 

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:

.alineaderecha {
border: 3px solid #000000;
float: right;
margin: 10px;
padding: 5px;
}

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.

Modificar las imagenes con CSS: estilos varios
Modificar las imagenes con CSS: estilos varios

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.

El "box model" de CSS
El «box model» de CSS

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


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *