CSS Filters

CSS Filters

• Ways of changing the rendering of HTML5 content
• ANY content, not just images (beat that, canvas!)

Shorthand Filters

#myelement {
	filter: shorthand-function(params);
}

Shorthand Filters

• cover most common needs (ex: galleries)
• can be applied to any HTML5 content
• hardware accelerated (on most browsers)

SVG Filters

#myelement {
	filter: url(#svg-filter-id);
}

SVG Filters

• (currently) no parameters passing
• applies only to SVG content (Firefox, WebKit nightly)
• created as graph of filters primitives(see spec for more details)

SVG Filter graph

<filter id='Emboss' filterUnits='objectBoundingBox' >
  <feColorMatrix result='pict0' in='SourceGraphic' 
                 type='luminanceToAlpha'/>
  <feSpecularLighting result='pict1' in='pict0' 
                      lighting-color='white' 
                      specularConstant='1' 
                      specularExponent='16' surfaceScale='6'>
    <fePointLight x='-200' y='100' z='380' 
                  id="light"/>
  </feSpecularLighting>
  <feComposite in2='pict1' in='SourceGraphic' 
               operator='out' k1='3.3' k2='0.2' k3='0.1' k4='0'/>
</filter>

CSS Shaders

CSS Shaders

#myelement {
	filter: custom(params)
}

Shader Syntax

#myelement {
	filter: custom(
	               
	               
	                         );
}

Vertex shader

#myelement {
	filter: custom( url(vertex.vs)
	                ,4 4);
}

Fragment shader

#myelement {
	filter: custom(	url(vertex.vs)
	                url(fragment.fs)
	                ,4 4);
}

Passing arguments

#myelement {
	filter: custom(	url(vertex.vs)
	                url(fragment.fs)
	                ,4 4
			,amount(0.5));
}

CSS Shaders

• easy to use
• hardware accelerated
• pixel and geometry manipulation

Shader code

Vertex code

precision mediump float;
// vertex attributes
attribute vec4 a_position;
attribute vec2 a_texCoord;
// shader uniform
uniform mat4 u_projectionMatrix;
//
varying vec2 v_texCoord;
uniform mat4 txf;
... const defines (PI, PHI) ...
void main() {    
    v_texCoord = a_texCoord;
    vec4 pos = a_position;
    pos.z = 40.0 * cos(pos.x * PI * 2.0 + PHI);
    gl_Position = u_projectionMatrix * txf * pos;
}

Fragment code

precision mediump float;
// These uniform values are passed in using CSS.
uniform float frontColor;
uniform float backColor;
// This varying value is passed from vertex shader.
varying float shadow;

void main()
{
    // Use gl_FrontFacing to hide the back face.
    float c = gl_FrontFacing ? frontColor : backColor;
    float a =  shadow * c;

    css_BlendColor = vec4(a, a, a, c);
}
						

CSS Shaders Security

Threats

• access to rendered content
• access to third-party content (bank info)
• user agent data (like visited links)

Timing attacks

• read pixel value
• depending on pixel value, spend more or less time in shader
• time the shader execution
• infer data

Timing attacks

• demonstrated in WebGL
• demonstrated in our prototype

Current fix

• rewrite shader to eliminate color based decisions
• analyze GPU execution patterns

CSS Compositing & Blending

• A very common idiom for designers. They currently have to use prerendered images
• Easy to describe with simple keywords
• Easy to implement by browser vendors

Alpha Compositing

#myelement {
	alpha-compositing: value;
}

CSS Blending

#myelement {
	blend-mode: value;
}

Mixing Blending and Filters

soft-glow effect

attributions 1/3

• Slide tool Reveal.js by Hakim El Hatab

• Icons from the Noun project

  • paint paletteOkan Benn, from The Noun Project
  • pyramidsmajd elsherif, from The Noun Project
  • securityThe Noun Project
  • source codeThe Noun Project

attributions 2/3

• Image with permission from miChou

• Image from personal collection

attributions 3/3

• Fonts

  • Lato (Google Fonts).
  • Ubuntu Mono (Google Fonts).