demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Summer Sale Now On

HTML5 Video Effects with CSS Blend Modes

css / blend modes

Estimated reading time: 2 minutes

Cet article est également disponible en français

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 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 filter and 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.

Anaglyph of Saguaro National Park at dusk; Kit Peak in the distance, behind Avra Valley. Numerous cacti present in the foreground.

3D Glasses with CSS Blend Modes

css / blend modes

Estimated reading time: 2 minutes

Recently Bennett Feely put together a very neat 3D glasses demo using CSS blend modes. Inspired by his work, I decided to create a variant, using a true stereoscopic photograph.

This demo won’t, by itself, allow you to see a 3D image - that happens inside your brain, with the glasses held a lot closer to your face - but it does demonstrate another important aspect of the multiply mode.

X

MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes

css / blend modes

Estimated reading time: 1 minute, 30 seconds

CSS blend modes, clipping paths and filters make a number of effects that were previously available only in PhotoShop possible on the web.

One possibility that combines these CSS properties is overlaying images, for before-and-after comparisons or to achieve other visual effects. An example might be the placement of Hugh Jackman’s face over a contemporary photo of Clint Eastwood; particularly effective since both of them possess such similar bone structure and facial features.

For the first example, the markup looks something like this:

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.