I Didn't Know My Browser Can Do That!

Alan Greenblatt | Creative Cloud Evangelist | @agreenblatt blattchat.com





*No canvases were hurt in the making of this presentation

Who is This Guy?

Adobe Creative Cloud Evangelist

@agreenblatt

blattchat.com

Who Are You?

Designer?

Developer?

Somewhere In Between?


W3C Standards - Areas of Focus

Layout

CSS Regions

CSS Shapes

Graphics

Compositing & Blending

 

CSS Custom Filters

3 Different Ways to Apply Filters Through CSS

Built-In Filters

SVG Filters

Custom Filters

Built-In Filters

Chrome, Android Chrome, Safari & iOS Safari

-webkit-filter:

  • grayscale(<number> | <percentage>)
  • sepia(<number> | <percentage>)
  • saturate(<number> | <percentage>)
  • invert(<number> | <percentage>)
  • opacity(<number> | <percentage>)
  • brightness(<number> | <percentage>)
  • contrast(<number> | <percentage>)
  • hue-rotate(<angle>)
  • blur(<length>)
  • drop-shadow(offsetX offsetY radius rgba(r, g, b, a))
-webkit-filter: sepia(100%) saturate(200%)

Box Shadow vs Drop Shadow

Box Shadow
box-shadow: 15px 15px 5px #314235
Drop Shadow
-webkit-filter: drop-shadow(15px 15px 5px rgba(255, 0, 0, 0.5))

Copy Layers & Combine Filters for Soft Blur

SVG Filters

Chrome & Firefox

Check out this Pen!

Custom Filters

Chrome

Implemented With GLSL Shaders

Vertex Shader
Fragment Shader
-webkit-filter:
  custom(url(shaders/vertex/crumple.vs) mix(url(shaders/fragment/crumple.fs)
  multiply source-atop), 50 50 border-box, amount 1, 
  strength 0.45, lightIntensity 1);

GLSL - The Basics

  • Uniform - Fixed parameter
  • Attribute - Per-vertex variable
  • Varying - Used to pass values from vertex to fragment shader
  • Programming is very C-like
  • Types include floats, vectors, matrices, etc
http://www.opengl.org/documentation/glsl/

Vertex Shader Basics

  • main() is called for every mesh vertex
  • Write-Only
  • Use varyings to pass data to fragment shader
  • Set gl_Position with new vertex position
                        
                            /* built-in attributes & uniforms */
                            attribute vec4 a_position;
                            uniform mat4 u_projectionMatrix;

                            /* passed in from CSS */
                            uniform float time;
                            
                            /* passed to fragment shader */
                            varying float v_lighting;
                            
                            main() {
                               vec4 pos = a_position;
                               /* do something with pos */
                               /* maybe set v_lighting */
                               gl_Position = u_projectionMatrix * pos;
                            }
                        
                    

Fragment Shader Basics

  • main() is called for every pixel
  • Transform only. You can't even write color directly.
  • css_ColorMatrix - Multiplied with pixel color
  • css_MixColor - Blended with transformed color
                        
precision mediump float;
varying float v_lighting;
                            
void main()
{  
  css_ColorMatrix = mat4(
       vec4(v_lighting, 0.0, 0.0, 0.0),
        vec4(0.0, v_lighting, 0.0, 0.0),
        vec4(0.0, 0.0, v_lighting, 0.0),
        vec4(0.0, 0.0, 0.0, 1.0)
    );
  css_MixColor = vec4(1.0, 0.0, 0.0, 1.0);
}
                        
                    

CSS FilterLab

html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/

Mobile Prototype

Play with the Code

CSS Filter Lab: git.io/cssfilterlab
Mobile Travel App: git.io/zxtapw

How is Adobe Making the Web Better?

Further Reading

Comments/Questions?

blatt@adobe.com @agreenblatt

Take the Survey!

  • Session Survey
  • Be Social!
    • @SenchaCon
    • #SenchaCon
    • @agreenblatt