In CSS (Cascading Style Sheets) können Sie die Filtereigenschaft verwenden, um visuelle Effekte auf Ihre Elemente anzuwenden. Dies beinhaltet das Ändern von Helligkeit, Kontrast, Sättigung, und vieles mehr.
Hier ist ein grundlegendes Beispiel, wie die Filtereigenschaft in CSS verwendet wird:
```css
img {
filter: blur(5px);
}
```
In diesem Beispiel würde das Bild um 5 Pixel verschwommen sein.
Es gibt viele Funktionen, die Sie mit dem Filter nutzen können:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
Jede dieser Funktionen nimmt spezifische Werte an. Zum Beispiel nimmt die Funktion `brightness()` einen Prozentsatz, wobei 100% die Originalhelligkeit ist.
Hier ist ein weiteres Beispiel, das mehrere Filterfunktionen nutzt:
```css
img {
filter: grayscale(100%) brightness(50%) contrast(200%);
}
```
In diesem Beispiel wird das Bild zunächst in ein Graustufenbild umgewandelt (grayscale(100%)), danach wird die Helligkeit auf die Hälfte reduziert (brightness(50%)) und schließlich wird der Kontrast verdoppelt (contrast(200%)).
Zum Testen und Üben dieser Filtereigenschaft können Sie Entwicklertools in Ihrem Webbrowser verwenden und die Werte live auf Ihrer Website ändern, um zu sehen, wie sie funktionieren.
Darüber hinaus können Sie auch mehrere Filtereffekte kombinieren – einfach durch Kommas getrennt in der Reihenfolge, in der sie angewendet werden sollen. Zum Beispiel:
```css
img {
filter: contrast(200%) brightness(150%);
}
```
In diesem Beispiel wird der Kontrast des Bildes zuerst erhöht und dann wird die Helligkeit erhöht.
