Magazine-like Layout for the Web

CSS Regions

CSS Regions Demo

• Human Legacy Project
• Colify
  • http://blogs.adobe.com/webplatform

CSS Regions on Mobile

CSS Regions

00  <style>
01      #content {
02          flow-into: article;
03      }
04
05      .region { 
06          flow-from: article;
06      }
07 </style>

CSSOM

00 var flow = document.getNamedFlows()
01            .namedItem('article');
03 flow.addEventListener("regionLayoutUpdate",
04                       onLayoutUpdate);
05          
06 ...
07
08 function onLayoutUpdate(event) {
09    var flow = event.target;
10    if (flow.overset === true) {
11      addRegion();
12    } else {
13      regionLayoutComplete();
14    }
15 }

CSS Page Templates

CSS Page Templates (Flow)

00  <style>
01      #article {
02          flow-into: article-flow;
03      }
04
05      #timeline {
06          flow-into: timeline-flow;
07      }
08
09      #combine-articles {
10          overflow-style: paged-x;
11      }
12 </style>

see Alan Stearn's blog post and demo

CSS Page Templates (Template)

00 @template {
01   @slot left {
02     width: 35%;
03     float: left;
04     flow-from: article-flow; }
05   @slot time {
06     width: 25%;
07     float: left;
08     flow-from: timeline-flow; }
09   @slot right {
10     width: 35%;
11     float: left;
12     flow-from: article-flow; }
13 }

Page Template Demo

CSS Exclusions

CSS Exclusions

Status

graphical features

how? (traditional tools)

on the web?

text-shadow

hover on glow

box-shadow

activate one of the text fields

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

picture from iStockPhoto

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

curved shadows

SVG filter graph example

01 <filter id="curved-shadow" ...>
02      <feFlood flood-color="black" flood-opacity="0.55" />
03      <feComposite in2="SourceAlpha" operator="in" result="coloredAlpha"/>
04      <feImage xlink:href="assets/images/slides/curved-disp.png" 
                  ... result="displacement"/>
05      <feDisplacementMap id="displacement" in2="displacement" in="coloredAlpha" 
                  ... result="displaced"/>
06      <feGaussianBlur stdDeviation="8" />
07      <feOffset id="displacementOffset" dx="0" dy="15" 
                  result="displaced-blurred"/>
08      <feMerge>
09          <feMergeNode in="displaced-blurred"/>
10          <feMergeNode in="SourceGraphic"/>
11      </feMerge>
12  </filter>

css shaders model

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   }

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   }

texturing and blending

alpha compositing

    #my-element {
        alpha-compositing: src-over;
    }

blend modes

    #my-element {
        blend-mode: normal;
    }

blend modes for <canvas>?

attributions 1/3

• Slide tool Reveal.js by Hakim El Hatab

• Icons from the Noun project Collection

  • emailRon Hogue, from The Noun Project
  • blogThe Noun Project
  • GearsDima Yagnyuk, from The Noun Project
  • BrowserYellow, from The Noun Project
  • LaptopThe Noun Project
  • Keyboardby Andrew Forrester, from The Noun Project
  • Pointerby ___Lo, from The Noun Project
  • Diskby Kordaat, from The Noun Project
  • Loopby P.J. Onori, from The Noun Project
  • Smartphoneby George Agpoon, from The Noun Project

attributions 2/3

• Filter sample image from iStockPhoto

• Textures from Subtle Patterns

  • Exclusive Paper
  • Arches
  • Grey Sandbag

attributions 3/3

• Fonts

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