The Expressive Web

CSS Shapes, Masks, Blend Modes and Regions

Razvan Caliman / @razvancaliman

Overview

  • CSS Regions
  • CSS Blend Modes
  • CSS Masking
  • CSS Shapes

CSS Regions

illustration of content flowing from one region to another

illustration of complex layout with regions


  .content {
    /* collect content into a named flow */
    flow-into: myFlow;
  }

  .region {
    /* render the content from the named flow */
    flow-from: myFlow;
  }

Illustration of flows and regions
Demo of CSS Regions with viewport-height units. CSS Regions with viewport height units

Markup Separation


  <!-- content: semantic markup -->
  <article> 
    <h1>Title</h1>
    <p>...</p>    
  </article>

  <!-- layout: helper markup -->
  <div class="region"></div>
  <div class="region"></div>
  <div class="region"></div>  

Illustration of adaptive web app UI with CSS Regions Adaptive web app UI with CSS Regions

Aggregate content


  /* collect content from different places */
  header nav, 
  footer a {
    flow-into: menuFlow;
  }

  #menu {
    flow-from: menuFlow;
  }

Regions are only
Visual Containers

CSS Regions Status

W3C Working Draft - Adobe, Microsoft

Webkit browser logo
iOS 7 logo
Internet Explorer browser logo
Chrome browser logo

CSS Regions Status

W3C Working Draft - Adobe, Microsoft

Webkit browser logo
iOS 7 logo
Internet Explorer browser logo

CSS Blending

simple alpha compositing

blend-mode: overlay

source

backdrop

blended result

Background Blending


  /* blend background images of the same element */                
  .element {
    background: url(image1.png), url(image2.png);
    background-blend-mode: overlay;
  }

Blend modes

  • normal
  • screen
  • multiply
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity


http://www.w3.org/TR/compositing-1/#blending

Element Blending


  div { background-image: url(texture.png); }
  
  p {
    mix-blend-mode: overlay;
    font-family: "Mythos Std";
  }
    

CSS Compositing and Blending Status

W3C Working Draft - Adobe, Canon

Webkit browser logo
Chrome browser logo
Firefox browser logo

CSS Masking

clipping vs masking

Clipping


  .element {
    /* clip the element to a circle */
    clip-path: circle(100px at 50% 50%);
  }

Clipping with SVG


  <style>
    .element {
      /* clip the element using SVG */
      clip-path: url(#clipping);
    }
  </style>

  <svg>
    <defs>
      <clipPath id="clipping">
        <circle cx="50" cy="50" r="10"></circle>
        <path d="M90,30c0-5.523-4.477-10 ..."/>
      </clipPath>
    </defs>
  </svg>

Masking


  .element {
    /* use an image as a mask */
    mask-image: url(mask.png);
  }

Masking with SVG


  <style>
    .element {
      /* use a <mask> element as mask */
      mask-image: url(#mask);
    }
  </style>

  <svg>
    <defs>
      <mask id="mask">
        <circle cx="50" cy="50" r="10"></circle>
      </mask>
    </defs>
  </svg>

CSS Masking Status

W3C Working Draft - Adobe, Mozilla, Google

Webkit browser logo
Chrome browser logo
Firefox browser logo
CSS Masking on html5rocks.com

Shapes in CSS

CSS Shapes

Shape Inside


  /* wrap the content inside a circle */
  #content { 
    shape-inside: circle(100px at 50% 50%);
  }
  

Shape Outside


  #coffee {
    float: left;
    shape-outside: circle(100px at 50% 50%);
  }

Complex shapes


  .content{
    /* shape defined by points of a polygon */
    shape-inside: polygon(x1, y1 x2, y2 ... );
  }
 
  .content{
    /* shape defined by the alpha levels of an image */
    shape-inside: url(image.png);
    shape-image-threshold: 0.5;
  }
  
Enhancing Visual Storytelling with CSS Shapes

CSS Shapes status

W3C Working Draft - Adobe, Microsoft

Webkit browser logo
Chrome browser logo
Chrome Canary browser logo

CSS Regions

illustration of content flowing from one region to another

CSS Blending

CSS Shapes

CSS Masking

html.adobe.com

end

@razvancaliman

Resources

Adobe Web Platform blog

CSS Regions

CSS Shapes

Credits