Achtergrond
Filtereffecten bestaan al een tijdje, maar zijn ontworpen om in SVG te werken. Ze zijn fantastisch krachtig in het toepassen van effecten zoals kleurintensiteit, kromtrekken of vervagen op een afbeelding voordat deze wordt samengesteld en in het document wordt weergegeven.
Nou ja, lang geleden in 2009 zei Mozilla dat SVG niet genoeg was! Uiteindelijk gingen ze nog een stap verder met filters en stonden ze toe op HTML-inhoud in Firefox 3.5. Bekijk Paul Irish's tijdloze demo van SVG-filters op een afspelende <video> . Nogmaals, werkt alleen in Firefox, maar nog steeds de bijenknieën.
Vandaag
We flitsen vooruit naar eind 2011 en Adobe (en anderen) zijn hard aan het werk geweest om deze geweldige technologie naar CSS te brengen. In het bijzonder verwijs ik naar CSS Filter Effects 1.0 , dat WebKit is gaan implementeren.
Door filters rechtstreeks in CSS in te schakelen, kan bijna elk DOM-element hiervan profiteren! Afbeeldingen, <video> , <canvas> , noem maar op.
Toekomst
De specificatie definieert ook CSS-shaders , die uiteindelijk OpenGL-shadertechnologie naar CSS zullen brengen. Dat is heel HEEL spannend! Er zijn echter steeds veiligheidsoverwegingen wanneer u de GPU van een systeem opent. Om deze reden heeft WebKit voorlopig alleen CSS-filterfuncties geïmplementeerd.
Steun
Chrome 18.0.976.0 (momenteel canarisch), Webkit elke nacht
In Webkit Nightlies kunnen filters worden toegepast op hardwareversnelde inhoud (bijv. img { -webkit-transform: translateZ(0); } ). In Chrome zijn filters op versnelde inhoud nog steeds een werk in uitvoering (gebruik de vlag --enable-accelerated-filters ). Dit omvat <video> , dat standaard wordt versneld.