Filter CSS: blur, grayscale, brightness
La proprietà filter applica effetti grafici agli elementi.
Filtri disponibili
.blur { filter: blur(5px); }
.grayscale { filter: grayscale(100%); }
.brightness { filter: brightness(1.2); } /* Più luminoso */
.contrast { filter: contrast(1.5); }
.saturate { filter: saturate(2); }
.sepia { filter: sepia(100%); }
.invert { filter: invert(100%); }
.opacity { filter: opacity(50%); }Combinare filtri
.vintage {
filter: sepia(50%) contrast(1.1) brightness(0.9);
}Hover effect
.image {
filter: grayscale(100%);
transition: filter 0.3s;
}
.image:hover {
filter: grayscale(0%);
}