Cutting-edge CSS Features – Gaining control of Web Design – CSS Masking

View Github Repository Open presentation in a new window

oslego

See all presentation from oslego

Cutting-edge CSS Features – Gaining control of Web Design – CSS Masking

0 2

cssconfeu-2013

Slides for CSSConf.eu

On Github oslego / cssconfeu-2013

Cutting-edge CSS Features

Gaining control of Web Design

Razvan Caliman / @razvancaliman

Overview

  • CSS Regions
  • CSS Blending
  • 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;
  }
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>
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

No DOM manipulation (parentNode). No CSS inheritance

CSS Regions Status

W3C Working Draft - Adobe, Microsoft

CSS Blending

simple alpha compositing

blend-mode: overlay

source

backdrop

blended result

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

Background Blending

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

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

Shapes in CSS

CSS Shapes

Shape Inside

  /* wrap the content inside a circle */
  #content { 
    shape-inside: circle(50%, 50%, 10em)
  }

Shape Outside

  #coffee {
    float: left;
    shape-outside: circle(50%, 50%, 10em);
  }

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

CSS Regions

CSS Blending

CSS Shapes

html.adobe.com

end

@razvancaliman

CSS Masking

clipping vs masking

Clipping

  .element {
    /* clip the element to a circle */
    clip-path: circle(50%, 50%, 10em);
  }

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

CSS Masking on html5rocks.com

Resources

Adobe Web Platform blog

CSS Regions

CSS Shapes

Credits