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

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

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

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>  

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

CSS Regions Status

W3C Working Draft - Adobe, Microsoft

CSS Blending

Background Blending

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

Blend modes

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

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

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;
  }
  

CSS Shapes status

W3C Working Draft - Adobe, Microsoft

html.adobe.com

end

@razvancaliman

Resources

CSS Regions

• CSS Regions on html.adobe.com
• CSS Regions tutorial
• CSS Regions W3C Proposal

CSS Shapes

• CSS Shapes on html.adobe.com
• CSS Shapes W3C Proposal
• Hans Muller's blog

Credits

• Reveal.js created by Hakim el Hattab