Estimated reading time: 2 minutes
Traditional video effects such as filters, cross-fades and blends are usually applied in an editing application, such as Adobe Premiere or Apple’s Final Cut. While there are obvious advantages to such a process, any changes made in an editor are “baked in” to each video frame, and can’t be manipulated or undone once the video is exported.
Yesterday, teaching a class in HTML5 multimedia, I realized that by using CSS filters and the newer blend modes it would be possible to duplicate many of the simpler video effects directly in CSS: the
<video> element is like any other, and is equally affected by
mix-blend-mode on supporting browsers. This shifts the rendering task onto the GPU of the machine, but the result can still be surprisingly effective.