css shaders

css filter effects

00   <style>
01   #myElement {
02       filter: <filter-function-or-reference>;
03   }
04   </style>

shorthand filters
filter: <short-hand-function>(<params>)

picture from iStockPhoto

filter: <short-hand-function>(<params>)

• easy to use
• easy to parametrize
• limited (yet useful) functionality

svg filters
filter: url(#svg-filter-id);

filter: url(#svg-filter-id);

• easy to use
• declarative description of the filter with primitives which can be combined
• (currently) no parameter passing
• (currently) only implemented on SVG content but will apply to all content soon

css shader filter
filter: custom(...)

The Creative Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus volutpat mi id condimentum. Duis vel massa quis arcu eleifend condimentum a nec libero. Vestibulum consequat.

Mauris at mauris urna. Donec a risus quis metus rhoncus aliquet quis non urna. Curabitur sed pharetra dui. Donec varius est euismod nisl faucibus elementum. Suspendisse in diam id nibh elementum ornare. Aliquam sit amet tempor lectus. Nunc ornare ornare tellus, vitae gravida metus dignissim lobortis. Integer consequat elit eu augue consectetur sodales.

Morbi congue ultricies risus, quis laoreet dolor placerat vel. Mauris dignissim, diam sit amet dapibus fringilla, sem massa rhoncus mauris, non viverra nisl ipsum eu neque. Cras sollicitudin, leo et dapibus mattis, erat quam aliquam nisi, at dictum sapien sapien in libero. Pellentesque euismod pulvinar sem, sed condimentum purus consectetur eget.

filter: custom(...)

• easy to use
• flexible imperative description of the filter
• adds manipulation of geometry in 3D space
• easy to parametrize
• bleeding edge (in the works)

using css shaders

using shaders

00   <style>
01   #myElement {
02       filter: custom(<params>);
04   }
05   </style>

custom()

00   <style>
01   #myElement {
02       filter: custom(<vertex-shader>
04                                 [wsp<fragment-shader>]
05                                 [,<vertex-mesh>]
06                                 [,<params>]);
07   }
08   </style>

vertex shader only

00   <style>
01   #myElement {
02       filter: custom(url(one-fold.vs), 2 2);
03   }
04   </style>

field sunset

field sunset

with fragment shader

00   <style>
01   #myElement {
02       filter: custom(url(one-fold-2.vs)
03                                 url(one-fold-2.fs), 2 2);
04   }
05   </style>

field sunset

field sunset

passing parameters

00   <style>
01   #myElement {
02       filter: custom(url(one-fold-3.vs) 
03                                 url(one-fold-3.fs), 2 2, 
04                                 amount 0.5);
05   }
06   </style>

field sunset

field sunset

change the value of the amount parameter uniform:

vertex shader

00   precision mediump float;
01   attribute vec4 a_position;
02   attribute vec2 a_texCoord;
03   const float MAX_AMOUNT = 0.5;
04   uniform float amount;
05   uniform mat4 u_projectionMatrix;
06   varying float shadow;
07   void main() {
08      vec4 pos = vec4(a_position);
09      float a = clamp(amount, 0.0, 1.0) * MAX_AMOUNT;
10      float t = 1.0 - abs(pos.x / 0.5);
11      pos.y = (pos.y + t * a) / (1.0 + a);
12      shadow = t;
13      gl_Position = u_projectionMatrix * pos;
14   }

things to remember

1. vertices have attributes such as a_position
2. shaders receive specific parameters uniforms such as u_projectionMatrix
3. authors can define additional parameters for the shader programs. They are 'delivered' as typed uniforms to the shader, such as the amount uniform.
4. vertex shaders can pass per-fragment variables to the fragment shader with varying property, such as the shadow float.

fragment shader

00   precision mediump float;
01    varying float shadow;
02    uniform float amount;
02    void main() {
03       float a = 1.0 - 0.25 * amount * shadow;
04       css_BlendColor = vec4(a, a, a, 1.0);
05   }

what are the threats?

• access to rendered content
• third party content (your bank...)
• user agent data such as:
  • visited links
  • dictionary content

how does a shader leak data?timing attacks

1. read pixel value
2. depending on color, execute in more or less time (make it easy, use 10x or 100x)
3. have a malicious script time the shader execution
4. infer the protected data

sounds crazy?unfortunately not

• has been demonstrated with WebGL
• we have reproduced a visited link attack with CSS shaders (if given texture access)

current proposed remedy

• cut the problem at the root: no rendered content access
• still preserves a lot of the functionality

working on...

• shader re-writing
• analyzing GPU execution patterns
• hoping to lift restrictions

back to... shaders and css

filters with transitions and animations

00   #my-element, #my-other-element {
01       transition: filter 0.5s linear;
02   }
03   
04   #my-element {filter: grayscale(1);}
05   #my-other-element {
06       filter: custom(url(wobble.vs), amount 0);
07   }
08   
09   #my-element:hover {filter: grayscale(0);}
10   #my-other-element:hover {
11       filter: custom(url(wobble.vs), amount 1);
12   }

CSS shader studio

attributions 1/3

• Slide tool Reveal.js by Hakim El Hatab

• Icons from the Noun project

  • emailRon Hogue, from The Noun Project
  • blogThe Noun Project

attributions 2/3

• Filter sample image and backgrounds from iStockPhoto

• Textures from Subtle Patterns

  • Exclusive Paper
  • Groove Paper
  • Tex2res4

attributions 3/3

• Fonts

  • Lobster (Google Fonts).
  • Myriad Pro (TypeKit)
  • Special Elite (Font Squirrel)
• Lea Verou's prefixfree.js
• Sass