CSS - Filters voor afbeeldingen


Je kunt eenvoudig filters toepassen op afbeeldingen middels CSS, helaas is dit alleen beschikbaar voor browsers gebaseerd op renderengine Webkit zoals Safari (iPhobe, iPad, Desktop) en tevens is er ondersteuning van Google Chrome (voorheen Webkit). Daarnaast is er gedeeltelijk ondersteuning voor Firefox al dienen hier bestanden voor aangemaakt te worden. Hieronder een overzicht van alle filters die beschikbaar zijn.

Sepia

-webkit-filter:sepia(0.8);


Voor Firefox kan de volgende regel worden opgenomen (let op het pad) met de onderstaande code in een apart bestand. filter:url(filters.svg#sepia);

<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="sepia">
                <feColorMatrix type="matrix" values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0"></feColorMatrix>
        </filter>
</svg>

Saturate

-webkit-filter:saturate(0.4);


Hue-rotate

-webkit-filter:hue-rotate(90deg);


Invert

-webkit-filter:invert(1);


Voor Firefox kan de volgende regel worden opgenomen (let op het pad) met de onderstaande code in een apart bestand. filter:url(filters.svg#invert);

<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="invert">
                <feComponentTransfer>
                <feFuncR type="table" tableValues="1 0" </feFuncR>
                <feFuncG type="table" tableValues="1 0" </feFuncG>
                <feFuncB type="table" tableValues="1 0" </feFuncB>
                </feComponentTransfer>
        </filter>
</svg>

Brightness

-webkit-filter:brightness(0.45);


Voor Firefox kan de volgende regel worden opgenomen (let op het pad) met de onderstaande code in een apart bestand. filter:url(filters.svg#brightness);

<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="brightness">
                <feComponentTransfer>
                        <feFuncR type="linear" slope="0.45"/>
                        <feFuncG type="linear" slope="0.45"/>
                        <feFuncB type="linear" slope="0.45"/>
                </feComponentTransfer>
        </filter>
</svg>

Contrast

-webkit-filter:contrast(4.5);


Voor Firefox kan de volgende regel worden opgenomen (let op het pad) met de onderstaande code in een apart bestand. filter:url(filters.svg#contrast);

<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="contrast">
                <feComponentTransfer>
                        <feFuncR type="linear" slope="4.5" intercept="-(0.5 * 4.5) + 0.5"/>
                        <feFuncG type="linear" slope="4.5" intercept="-(0.5 * 4.5) + 0.5"/>
                        <feFuncB type="linear" slope="4.5" intercept="-(0.5 * 4.5) + 0.5"/>
                </feComponentTransfer>
        </filter>
</svg>

Blur

-webkit-filter:blur(4px);


Voor Firefox kan de volgende regel worden opgenomen (let op het pad) met de onderstaande code in een apart bestand. filter:url(filters.svg#svgBlur);

<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="grayscale">
                <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
        </filter>
        <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="4"/>
        </filter>
</svg>