Référence complète CSS

Voici une référence complète des effets et bordures CSS que vous pouvez appliquer aux images, avec des exemples pour chacun :

1. Bordure : Ajoute une bordure autour de l’image.

img {
  border: 2px solid black;
}

2. Ombre de boîte : Ajoute une ombre autour de l’image.

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

3. Opacité : Ajuste la transparence de l’image.

img {
  opacity: 0,5;
}

4. Niveau de gris : Convertit l’image en niveau de gris.

img {
  filter: grayscale(100%);
}

5. Sépia : Applique un effet sépia à l’image.

img {
  filter: sepia(100%);
}

6. Flou : Floute l’image.

img {
  filter: blur(5px);
}

7. Luminosité : Ajuste la luminosité de l’image.

img {
  filter: brightness(50%);
}

8. Contraste : Ajuste le contraste de l’image.

img {
  filter: contrast(200%);
}

9. Rotation de la teinte : Fait tourner la teinte de l’image.

img {
  filter: hue-rotate(90deg);
}

10. Inversion : Inverse les couleurs de l’image.

img {
  filter: invert(100%);
}

11. Saturation : Ajuste la saturation de l’image.

img {
  filter: saturate(200%);
}

12. Sépia : Applique un effet sépia à l’image.

img {
  filter: sepia(100%);
}

13. Ombre portée : Ajoute un effet d’ombre portée à l’image.

img {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}

14. Transition : Ajoute un effet de transition à l’image.

img {
  transition: transform 0.3s ease;
}
img:hover {
  transform: scale(1.1);
}

15. Animation : Ajoute un effet d’animation à l’image.

@keyframes slidein {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
img {
  animation: slidein 1s ease;
}

Ce ne sont que quelques exemples des nombreux effets et bordures CSS que vous pouvez appliquer aux images. Expérimentez avec différents styles pour créer des designs uniques et accrocheurs !