Riferimento completo CSS
Ecco un riferimento completo sugli effetti e bordi CSS che puoi applicare alle immagini, insieme a esempi per ciascuno:
- Bordo: Aggiunge un bordo intorno all’immagine.
img {
border: 2px solid black;
}
- Ombra: Aggiunge un’ombra intorno all’immagine.
img {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
- Opacità: Regola la trasparenza dell’immagine.
img {
opacity: 0.5;
}
- Scala di Grigi: Converte l’immagine in scala di grigi.
img {
filter: grayscale(100%);
}
- Seppia: Applica un effetto seppia all’immagine.
img {
filter: sepia(100%);
}
- Sfocatura: Sfoca l’immagine.
img {
filter: blur(5px);
}
- Luminosità: Regola la luminosità dell’immagine.
img {
filter: brightness(50%);
}
- Contrasto: Regola il contrasto dell’immagine.
img {
filter: contrast(200%);
}
- Rotazione Tinta: Ruota la tinta dell’immagine.
img {
filter: hue-rotate(90deg);
}
- Inverti: Inverte i colori dell’immagine.
img {
filter: invert(100%);
}
- Saturazione: Regola la saturazione dell’immagine.
img {
filter: saturate(200%);
}
- Seppia: Applica un effetto seppia all’immagine.
img {
filter: sepia(100%);
}
- Ombra Drop: Aggiunge un effetto ombra drop all’immagine.
img {
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
- Transizione: Aggiunge un effetto di transizione all’immagine.
img {
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.1);
}
- 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!