Met CSS3 kun je diverse filters toepassen op je afbeeldingen. Dit kan je doen door gebruik te maken van de property filter. De effecten worden ondersteund door de moderne browsers van tegenwoordig. Oude browsers kunnen helaas niet omgaan met deze property.

Hieronder zie je enkele voorbeelden van de effecten in werking:

Origineel
Blur effectBekijk de CSS code

.blur {
    filter: blur(3px);
    -webkit-filter: blur(3px);
}
Brighten effectBekijk de CSS code

.brighten {
    filter: brightness(200%);
    -webkit-filter: brightness(200%);
}
Contrast effectBekijk de CSS code

.contrast {
    filter: contrast(200%);
    -webkit-filter: contrast(200%);
}
Drop-shadow effectBekijk de CSS code

.drop-shadow {
    filter: drop-shadow(8px 8px 10px grey);
    -webkit-filter: drop-shadow(8px 8px 10px grey);
}
Grayscale effectBekijk de CSS code

.grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
Hue rotate effectBekijk de CSS code

.hue {
    filter: hue-rotate(90deg);
    -webkit-filter: hue-rotate(90deg);
}
Invert effectBekijk de CSS code

.invert {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
Opacity effectBekijk de CSS code

.opacity {
    filter: opacity(30%);
    -webkit-filter: opacity(30%);
}
Saturate effectBekijk de CSS code

.saturated {
    filter: saturate(800%);
    -webkit-filter: saturate(800%);
}
Sepia effectBekijk de CSS code

.sepia {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
}

Lees meer over het filter property >.

Geef een reactie