CSS - Imágenes

Imágenes de fondo

CSS proporciona la propiedad background-image, que te permite establecer una imagen como fondo de un elemento. Para usar una imagen de fondo, necesitas especificar la URL del archivo de imagen dentro de la propiedad background-image.

.element {
  background-image: url("path/to/image.jpg");
}

Puedes controlar la posición de la imagen de fondo usando la propiedad background-position. Acepta valores como top, bottom, left, right, center, o valores específicos en píxeles o porcentajes. Por defecto, la imagen de fondo se coloca en la esquina superior izquierda del elemento.

.element {
  background-image: url("path/to/image.jpg");
  background-position: center center;
}

Si la imagen de fondo es más pequeña que el elemento al que se aplica, se repetirá por defecto para llenar todo el elemento. Puedes controlar este comportamiento usando la propiedad background-repeat. Acepta valores como repeat, repeat-x, repeat-y, y no-repeat.

.element {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
}

CSS también te permite establecer múltiples imágenes para el fondo de un elemento. Puedes especificar varias URLs separadas por comas dentro de la propiedad background-image. Cada imagen se apilará una encima de la otra, con cada una subsiguiente debajo de su predecesora en el orden especificado en el código CSS.

.element {
  background-image: url("image1.jpg"), url("image2.jpg");
  backgrounds-position: center center, top right;
  backgrounds-repeat: no-repeat, repeat;
}

En este caso, "image1.jpg" se posicionará en el centro y no se repetirá, mientras que "image2.jpg" se posicionará en la esquina superior derecha y se repetirá.

Las imágenes de fondo pueden añadir interés visual y mejorar el diseño en tus páginas web usando propiedades como la colocación, repetición y apariencia, todo controlado a través de estilos CSS.

Bordes de imágenes

CSS te permite añadir bordes alrededor de las imágenes, dándote control sobre su apariencia. Para añadir un borde a una imagen, puedes usar la propiedad border o sus propiedades individuales: border-width, border-style, y border-color.

Para establecer un borde para una imagen, puedes usar la propiedad abreviada border. Esta te permite especificar el ancho, estilo y color en una sola línea de código CSS. La sintaxis para la propiedad border es la siguiente:

img {
  border: 2px solid #000000;
}

La imagen tendrá un borde negro sólido de 2 píxeles de ancho.

Puedes personalizar el estilo usando la propiedad border-style. Esta acepta valores como solid, dashed, dotted, y otros. Cada estilo crea una apariencia diferente para el borde.

img {
  border-width: 3px;
  border-style: dashed;
  border-color: #ff0000;
}

Este código le dará a la imagen un borde rojo discontinuo de 3 píxeles de ancho.

También puedes establecer diferentes colores y anchos para cada lado de la imagen usando propiedades individuales: border-top, border-right, border-bottom, y border-left. Estas propiedades te permiten especificar el ancho, estilo y color para cada lado.

img {
  border-top: 2px solid #000000;
  border-right: 4px dotted #00ff00;
  border-bottom: 6px double #0000ff;
  border-left: 8px ridge #ff00ff;
}

Cada lado de la imagen tendrá un estilo, ancho y color diferente.

Los bordes pueden ser una forma sencilla de añadir atractivo visual y separación a las imágenes en tus páginas web. Al usar las propiedades de CSS, puedes personalizar la apariencia de los bordes de las imágenes para que coincidan con el diseño y estilo de tu sitio web.

Opacidad de la Imagen

CSS proporciona la propiedad opacity, que permite ajustar la transparencia de una imagen. La propiedad opacity acepta valores entre 0 y 1, donde 0 significa completamente transparente y 1 significa completamente opaco.

img {
  opacity: 0.5;
}

Puedes combinar la propiedad opacity con otros estilos de imagen para crear efectos visuales.

img {
  opacity: 0.7;
  border: 2px solid #000000;
  filter: grayscale(50%);
}

Ajustar la opacidad de la imagen puede ser útil en varios escenarios, como crear superposiciones o efectos de desvanecimiento. Al usar la propiedad opacity, controlas cuán transparentes son las imágenes y creas diseños atractivos.

Cuando aplicas opacidad a una imagen, afecta a todo, incluyendo bordes o sombras. Si deseas aplicar transparencia solo al contenido mientras mantienes los bordes o sombras completamente opacos, usa la función rgba() para los colores de fondo en su lugar.

img {
    background-color: rgba(255,255,255,.5);
    border: 2px solid #000;
}

Filtros de imagen

CSS proporciona la propiedad filter, que permite aplicar varios efectos visuales a las imágenes. Con la propiedad filter, puedes manipular la apariencia de las imágenes sin necesidad de software complejo de edición de imágenes.

Un efecto de filtro popular es el de escala de grises. Este elimina el color de una imagen y la muestra en tonos de gris. Para aplicar un filtro de escala de grises, puedes usar la función grayscale() dentro de la propiedad filter. La función acepta un valor porcentual, donde 0% significa que no hay efecto de escala de grises y 100% significa escala de grises completa.

img {
  filter: grayscale(100%);
}

Otro filtro comúnmente utilizado es el de desenfoque. Suaviza los bordes y detalles de una imagen, creando un efecto borroso. Para aplicar un filtro de desenfoque, puedes usar la función blur() dentro de la propiedad filter. La función acepta un valor de longitud, típicamente en píxeles, que determina la intensidad del desenfoque.

img {
  filter: blur(5px);
}

También puedes ajustar el brillo de una imagen usando la función brightness(). Acepta un valor porcentual, donde 100% significa que no hay cambio en el brillo; valores por debajo del 100% la oscurecen; valores por encima del 100% la hacen más brillante.

img {
  filter: brightness(150%);
}

CSS ofrece varias otras funciones de filtro como contrast(), hue-rotate(), invert(), y más. Incluso puedes combinar múltiples filtros listándolos uno tras otro dentro de la propiedad filter.

img {
  filter: grayscale(50%) blur(2px) brightness(120%);
}

Sprites de imágenes

Los sprites de imágenes combinan múltiples imágenes en un solo archivo. En lugar de usar archivos separados para cada elemento, se usa una sola imagen sprite y se muestra solo una parte específica de ella a la vez.

El principal beneficio es que reduce el número de solicitudes HTTP realizadas por una página web. Cuando se carga una página, cada archivo de imagen requiere una solicitud separada al servidor. Al combinar múltiples imágenes en una, se minimiza el número de solicitudes, lo que puede mejorar la velocidad de carga y el rendimiento.

Para crear un sprite de imagen, use una herramienta de edición de imágenes para organizar múltiples imágenes en una cuadrícula o diseño dentro de un archivo. Cada imagen individual dentro del sprite se coloca típicamente una al lado de la otra sin espacios entre ellas.

Una vez que tenga lista la imagen sprite, use CSS para mostrar partes específicas de la imagen. Establezca el sprite como imagen de fondo de un elemento usando background-image. Luego use background-position para especificar las coordenadas de la parte deseada dentro del sprite.

.icon {
  background-image: url('sprite.png');
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.icon-home {
  background-position: 0 0;
}

.icon-settings {
  background-position: -20px 0;
}

.icon-profile {
  background-position: -40px 0;
}

En este ejemplo, "sprite.png" contiene múltiples iconos. Cada icono tiene un tamaño de 20x20 píxeles. El CSS establece esto como fondo para elementos con clase "icon". Los iconos individuales se muestran ajustando background-position. El primer valor representa la posición horizontal; el segundo valor representa la posición vertical. Los valores negativos lo desplazan hacia la izquierda o hacia arriba.

Para usar bien los sprites, planifique cuidadosamente el diseño y las dimensiones de las imágenes individuales dentro de él. Considere también el tamaño; los sprites grandes pueden afectar el tamaño total del archivo.

Los sprites se usan comúnmente para iconos, botones y otros elementos gráficos pequeños que se usan con frecuencia en sitios web. Al implementar sprites, puede optimizar sus páginas reduciendo las solicitudes y mejorando el rendimiento de carga.

Imágenes Responsivas

Es importante hacer que las imágenes sean responsivas para que se adapten bien a diferentes tamaños de pantalla. CSS ofrece técnicas para hacer que las imágenes sean responsivas y optimizar su visualización en diferentes dispositivos.

Una forma de hacer que las imágenes sean responsivas es usando la propiedad max-width. Al establecer max-width: 100%;, una imagen se reducirá proporcionalmente si su contenedor es más pequeño que el tamaño original de la imagen. Sin embargo, no se ampliará más allá de sus dimensiones originales, evitando cualquier pérdida de calidad.

img {
  max-width: 100%;
  height: auto;
}

Cuando estableces max-width: 100%;, también es una buena idea establecer height: auto;. Esto asegura que la altura de la imagen se ajuste automáticamente en proporción a su ancho, preservando la relación de aspecto. Sin height: auto;, la imagen podría aparecer estirada o distorsionada al escalarse.

Otra técnica para imágenes responsivas es servir diferentes versiones de una imagen según el dispositivo o tamaño de pantalla. Esto te permite optimizar la calidad de la imagen y el tamaño del archivo para diferentes escenarios.

Las media queries de CSS te permiten aplicar diferentes estilos basados en características del dispositivo, como el ancho de pantalla. Puedes definir puntos de quiebre en los que se deben usar diferentes estilos o diferentes imágenes.

/* Imagen predeterminada */
.image {
  background-image: url("small-image.jpg");
}

/* Media query para pantallas más grandes */
@media screen and (min-width: 768px) {
  .image {
    background-image: url("large-image.jpg");
  }
}

Al usar media queries, puedes especificar diferentes fuentes de imagen para diferentes tamaños de pantalla. Esto te permite servir imágenes más pequeñas y optimizadas para dispositivos móviles e imágenes de mayor calidad para pantallas más grandes. Esta técnica ayuda a mejorar los tiempos de carga de la página y optimizar el uso del ancho de banda.

Al implementar imágenes responsivas, considera factores como el propósito de la imagen, los tamaños de pantalla esperados de tus dispositivos objetivo y el equilibrio entre calidad y tamaño de archivo. Probar tu implementación en varios dispositivos y tamaños de pantalla ayuda a encontrar un equilibrio que proporcione una buena experiencia de usuario.

Las imágenes responsivas son una parte importante del diseño web moderno. Al usar técnicas de CSS como max-width y media queries, puedes hacer que tus imágenes se adapten bien a diferentes dispositivos y tamaños de pantalla.

Efectos al Pasar el Cursor sobre Imágenes

CSS te permite crear efectos al pasar el cursor sobre imágenes, añadiendo interactividad y atractivo visual a tus páginas web. Estos efectos se activan cuando un usuario mueve su cursor sobre una imagen, ofreciendo una manera de resaltar o revelar información adicional.

Un efecto común al pasar el cursor es cambiar la opacidad de una imagen. Usando la pseudo-clase :hover y la propiedad opacity, puedes hacer que una imagen sea más transparente u opaca cuando se pasa el cursor por encima.

img {
  opacity: 0.8;
  transition: opacity 0.3s;
}

img:hover {
  opacity: 1;
}

Otro efecto popular al pasar el cursor es escalar la imagen. Puedes usar la propiedad transform con la función scale() para agrandar o reducir la imagen cuando se pasa el cursor por encima.

img {
  transition: transform 0.3s;
}

img:hover {
  transform: scale(1.1);
}

También puedes cambiar el borde de una imagen al pasar el cursor. Usando la pseudo-clase :hover y las propiedades de borde, puedes modificar el estilo, color o ancho del borde cuando se pasa el cursor sobre la imagen.

img {
  border: 2px solid #000;
  transition: border-color 0.3s; 
}

img:hover {
  border-color: #ff0000;
}

Para hacer que los efectos al pasar el cursor sean más atractivos visualmente, puedes combinarlos con transiciones. Las transiciones te permiten animar suavemente los cambios entre los estados normal y al pasar el cursor. Usa la propiedad 'transition' para especificar propiedades, duración y función de temporización.

img {
  opacity: 0.8;
  transition: 0.3s all ease-in-out;
}

img:hover {
  transform: scale(1.1);
}

Usando estas técnicas, creas experiencias interactivas para los usuarios. Experimenta con diferentes valores para lograr el efecto visual deseado que complemente el diseño de tu sitio web. Recuerda considerar la accesibilidad. Algunos usuarios pueden tener dificultades con el control preciso del ratón, así que asegúrate de que la información y funcionalidad importantes sigan siendo accesibles sin depender únicamente de interacciones.

Galerías de imágenes

CSS permite crear galerías de imágenes en tus páginas web. Las galerías de imágenes son una forma de mostrar una colección de imágenes de manera organizada e interactiva.

Para construir una galería de imágenes con CSS, comienza estructurando tu marcado HTML para incluir un elemento contenedor que albergue los elementos individuales de la galería. Cada elemento de la galería típicamente consiste en una miniatura de imagen y una leyenda u overlay opcional.

<div class="gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Imagen 1">
    <div class="caption">Leyenda para Imagen 1</div>
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Imagen 2">
    <div class="caption">Leyenda para Imagen 2</div>
  </div>
</div>

Con la estructura HTML en su lugar, usa CSS para dar estilo a la galería y sus componentes. Comienza aplicando estilos al contenedor de la galería, como establecer un diseño de cuadrícula o flexible para organizar los elementos de la galería.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

Este código CSS establece que el contenedor de la galería use un diseño de cuadrícula con tamaños de columna responsivos que se adaptan al espacio disponible.

A continuación, estiliza los elementos individuales de la galería. Puedes aplicar bordes, relleno o colores de fondo para crear miniaturas distintivas. Usa CSS para controlar el tamaño y la relación de aspecto de las miniaturas.

.gallery-item {
  border: 1px solid #ccc;
  padding: 5px;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
}

Los elementos de la galería tienen un borde y relleno; las imágenes dentro de ellos se escalan de manera responsiva mientras mantienen su relación de aspecto.

Para añadir interactividad, puedes implementar una función de lightbox. Un lightbox es una superposición que aparece cuando haces clic en una miniatura; muestra una versión más grande de la imagen junto con controles de navegación.

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0;
}

El lightbox está inicialmente oculto y posicionado de forma fija, cubriendo todo el viewport. Cuando se activa, muestra una imagen más grande centrada en la pantalla con un fondo semitransparente.

Para controlar el lightbox, añade botones de navegación usando elementos HTML estilizados con CSS.

<div class="lightbox">  
  <img src="large-image.jpg" alt="Imagen Grande">  
  <div class="navigation">   
    <button class="prev">Anterior</button>   
    <button class="next">Siguiente</button>    
  </div>    
</div>    

Puedes añadir leyendas o superposiciones que proporcionen información adicional sobre cada imagen usando posicionamiento CSS.

.gallery-item .caption {
  margin-top: 5px;
  font-size: 14px;
  color: #888;
}     

Las leyendas se posicionan debajo de las miniaturas y se estilizan con un tamaño de fuente más pequeño y un color diferente.

Formas CSS con imágenes

CSS ofrece propiedades que permiten crear formas no rectangulares con imágenes, añadiendo interés visual a tus páginas web. Dos propiedades clave para crear formas son clip-path y shape-outside.

La propiedad clip-path permite recortar una imagen en una forma específica. Puedes definir formas básicas como círculos, elipses, polígonos o incluso usar trazados SVG personalizados para crear formas complejas. La parte de la imagen dentro de la forma especificada permanece visible, mientras que el resto se recorta.

img {
  clip-path: circle(50% at 50% 50%);
}

La propiedad shape-outside se usa en combinación con elementos flotantes. Define una forma alrededor de la cual debe envolverse el contenido. Al aplicar shape-outside a una imagen flotante, puedes hacer que el texto circundante se ajuste a los contornos de la imagen.

img {
  float: left;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

Puedes combinar clip-path y shape-outside para crear imágenes con formas personalizadas que interactúen con el contenido circundante.

img {
  float: left;
  clip-path: ellipse(60% at center);
  shape-outside: ellipse(60% at center);
}

Al usar formas CSS con imágenes, puedes mejorar aún más el atractivo visual combinándolas con otros estilos como bordes, sombras, filtros o efectos de hover en imágenes con forma.

img {
  clip-path: polygon(50% top-left-corner%, right-center-corner%, bottom-center-corner%, left-center-corner%);
  transition: clip-path .3s;
  filter: grayscale();
}

img:hover {
  clip-path: rectangle();
  filter: grayscale-off();
}