Next Generation Reading Experience Using CSS Filters Integrated With Many Web Technologies

The experience uses

  • Simple CSS Filters
  • HTML5 video
  • WebGL
  • <canvas>
  • SVG
  • CSS Regions
  • CSS Custom Filters (a.k.a. Shaders)
  • CSS Exclusions (a.k.a Shapes)

What is a CSS filter?

DOM Tree

Lets look at the pipeline:

  • Build a DOM tree
  • Lay it out
  • Style it
  • Render it
  • Filter it
  • Push it to the screen

Basic filter primitives

Blur Offset Light Comp Comp Merge

Originated with SVG filters based on simple primitives like

  • Merge
  • Blur
  • Noise
  • Convolution
  • Point Light
  • Spot Light
  • Displacement Map
  • etc.

Simple filter doing a blur

.blurme { filter: blur(4px); }

Filters combine left to right

.combined { filter: hue-rotate(180deg) sepia(80%); }

So order matters

.ordered { filter: sepia(80%) hue-rotate(180deg); }

CSS shorthands

Packaged common filter combinations for ease of use

  • Applied via CSS selectors
  • With pre-defined combinations
  • Allowing browsers to optmize the rendering
  • And shift workload onto the GPU

So let's start with the
desktop experience

Next Generation National Geographic

Basic Filter effects vs. WebGL & Shaders

Pixel manipulation vs. vertex manipulation

  • Textures are similar to image sprites
  • Simple primitives modify pixels in the rendered image (now)
  • Fine-grain per pixel control is the domain of general filters
  • Bulk manipulation is the domain of custom filters
  • Vertex manipulation slices and dices the image as we like it...
  • They all cost time and memory, but less on the GPU

CSS custom filters

Formerly known as CSS shaders

  • Flatten web page content into a plane
  • Treat the plane as a texture (in 3D terminology)
  • Provide vertex and fragment shading for the plane
  • Allow arbitrary manipulation of web content as a post processing step

Custom Filters enable advanced effects

Using GPU manipulation of web content...

Experience the wonders of
WebGL & CSS Custom Filters

All GPU accelerated

Nothing comes for free


Mobile GPU is not your desktop

  • Deferred rendering limits complexity that will work
  • Keep a keen eye on texture memory usage
  • Test, test, test on mobile browsers
  • Small tiles beat large tiles especially when filtering them

Check out these sessions:

  • Web Page Design with the GPU in Mind at 11:15 today Room 6
  • Chrome DevTools Revolutions 2013 at 2:35 today Room 10
  • True Grit: Debugging CSS & Render Performance at 5:20 today Room 10

Deploying on Mobile

Packaging for mobile consumption has many options

  • View with a mobile browser unchanged
  • Build a fully native app
  • This experience built with Web Technology and PhoneGap

The Mobile
National Geographic Experience

Built with the Web on Nexus 10

The next level of CSS filters

Bring arbitrary SVG filter chains to the GPU

Accelerated SVG filters

Allow CSS to manipulate web content from arbitrary filter chains

  • Work just like CSS filters on flattened content
  • Enable developers to pick and choose effects
  • Provide a superset of the canned CSS filter primitives
  • Work on HTML content seamlessly

Just a url() reference away and here they are...

video {
  border:2px solid red;
<filter id="convolve" color-interpolation-filters="sRGB">
  <feConvolveMatrix order="3" kernelMatrix="1 -1  1 -1 -0.01 -1 1 -1 1"
  edgeMode="duplicate" result="convo"/>
<filter id="convoblur" color-interpolation-filters="sRGB">
  <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
  <feConvolveMatrix order="3" kernelMatrix="1 -1  1 -1 -0.01 -1 1 -1 1"
  edgeMode="none" result="convo"/>

CSS filters let you explore
powerful creative primitives

that work seamlessly from desktop through to mobile

Explore the experience yourself

The National Geographic Experience is open sourced

  • Check out the source here:
  • And enjoy the experience here:
  • Then do it yourself to see how CSS filters can make your content awesome!


Please try out CSS filters on all your devices
for ultimate creative control.

Line art courtesy of Dirk Schulze
Video (c) copyright 2008, Blender Foundation /