Riferimento completo CSS

Ecco un riferimento completo sugli effetti e bordi CSS che puoi applicare alle immagini, insieme a esempi per ciascuno:

1. Bordo: Aggiunge un bordo intorno all’immagine.

img {
  border: 2px solid black;
}

2. Ombra: Aggiunge un’ombra intorno all’immagine.

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

3. Opacità: Regola la trasparenza dell’immagine.

img {
  opacity: 0.5;
}

4. Scala di Grigi: Converte l’immagine in scala di grigi.

img {
  filter: grayscale(100%);
}

5. Seppia: Applica un effetto seppia all’immagine.

img {
  filter: sepia(100%);
}

6. Sfocatura: Sfoca l’immagine.

img {
  filter: blur(5px);
}

7. Luminosità: Regola la luminosità dell’immagine.

img {
  filter: brightness(50%);
}

8. Contrasto: Regola il contrasto dell’immagine.

img {
  filter: contrast(200%);
}

9. Rotazione Tinta: Ruota la tinta dell’immagine.

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

10. Inverti: Inverte i colori dell’immagine.

img {
  filter: invert(100%);
}

11. Saturazione: Regola la saturazione dell’immagine.

img {
  filter: saturate(200%);
}

12. Seppia: Applica un effetto seppia all’immagine.

img {
  filter: sepia(100%);
}

13. Ombra Drop: Aggiunge un effetto ombra drop all’immagine.

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

14. Transizione: Aggiunge un effetto di transizione all’immagine.

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

15. Animazione: Aggiunge un effetto animazione all’immagine.

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

Questi sono solo alcuni esempi dei molti effetti e bordi CSS che puoi applicare alle immagini. Sperimenta con diversi stili per creare design unici e accattivanti!