Filter

CSS Filter

Filtereigenschaften in CSS stammen ursprünglich aus SVG. Wir sehen hier ein paar Beispiele mit einigen Filtern, die in CSS definiert sind. Mehrere Filtereigenschaften werden mit Leerzeichen separiert aufgeführt filter: blur(3px) grayscale(0.5)

filter:blur(3px);

filter:grayscale(1)

filter: brightness(0.5)

filter: contrast(200%)

filter:drop-shadow(16px 16px 10px black)

filter:hue-rotate(90deg)

filter:invert(100%)

filter:opacity(50%)

filter:saturate(200%)

filter: sepia(100%)

filter: contrast(150%) brightness(230%)

filter: url(#pixel)

url(#someFilter)

filter: url(#erode)

Filter SVG

Man kann einer Filter-Eigenschaft auch eine URL zuweisen, die auf einen Filter verweist der mittels SVG definiert ist. filter:url(#pixelfilter). Siehe die letzten 3 Beispiele und den unten aufgeführten SVG Code.

Hier bietet sich an, eine SVG Datei zu erstellen, in der man sich eine Zusammenstellung mehrerer Filter definiert, die man mehrmals einsetzen kann.

    <svg>
            <defs>
                <filter id="blur">
                    <feGaussianblur stdDeviation="2" />
                </filter>

                <filter id="gray">
                    <feColorMatrix type="saturate" values="0.3" />
                </filter>
                
                <filter id="erode">
                    <feMorphology operator="erode" radius="3"/>
                </filter>

                <filter id="pixel">
                    <feMorphology operator="dilate" radius="4" />
                </filter>


                <filter id="someFilter">
                    <feMorphology operator="erode" radius="1" />
                    <feMorphology operator="dilate" radius="3" />
                    <feGaussianblur stdDeviation="0" />
                    <feColorMatrix type="saturate" values="2" />
                </filter>

            </defs>
    </svg>