Referencia completa de CSS

Aquí hay una referencia completa de efectos de CSS y bordes que se pueden aplicar a imágenes, junto con ejemplos para cada uno:

1. Borde: Agrega un borde alrededor de la imagen.

img {
  border: 2px sólido negro;
}

2. Sombra de caja: Agrega una sombra alrededor de la imagen.

img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

3. Opacidad: Ajusta la transparencia de la imagen.

img {
  opacidad: 0.5;
}

4. Escala de grises: Convierte la imagen a escala de grises.

img {
  filtro: escala de grises(100%);
}

5. Sepia: Aplica un efecto sepia a la imagen.

img {
  filtro: sepia(100%);
}

6. Desenfoque: Desenfoca la imagen.

img {
  filtro: desenfoque(5px);
}

7. Brillo: Ajusta el brillo de la imagen.

img {
  filtro: brillo(50%);
}

8. Contraste: Ajusta el contraste de la imagen.

img {
  filtro: contraste(200%);
}

9. Rotación de matiz: Rota el matiz de la imagen.

img {
  filtro: rotación de matiz(90deg);
}

10. Invertir: Invierte los colores de la imagen.

img {
  filtro: invertir(100%);
}

11. Saturar: Ajusta la saturación de la imagen.

img {
  filtro: saturar(200%);
}

12. Sepia: Aplica un efecto sepia a la imagen.

img {
  filtro: sepia(100%);
}

13. Sombra arrojada: Agrega un efecto de sombra arrojada a la imagen.

img {
  filtro: sombra-arrojada(2px 2px 5px rgba(0, 0, 0, 0.5));
}

14. Transición: Agrega un efecto de transición a la imagen.

img {
  transición: transformar 0,3 s facilidad;
}
img:hover {
  transform: escala(1.1);
}

15. Animación: Agrega un efecto de animación a la imagen.

@keyframes deslizar {
  desde {
    transform: translateX(100%);
  }
  a {
    transform: translateX(0);
  }
}
img {
  animación: deslizar 1s facilidad;
}

Estos son solo algunos ejemplos de los muchos efectos de CSS y bordes que se pueden aplicar a las imágenes. ¡Experimenta con diferentes estilos para crear diseños únicos y llamativos!