This slide deck is meant to be used in a controlled environment. It demonstrates some cutting-edge CSS features which this browser does not fully support. Read the instructions on how to setup that environment and get the full experience.

Cutting-edge CSS Features

CSS Blend Modes, Masking and Shapes

Razvan Caliman / @razvancaliman

Adobe Web Platform Team

Overview

  • CSS Blend Modes
  • CSS Masking
  • CSS Shapes

CSS Blend Modes

This slide uses the background-blend-mode property. It is not supported in this browser. Learn how to get a capable browser.

simple alpha compositing

blend-mode: overlay

This slide uses the background-blend-mode property. It is not supported in this browser. Learn how to get a capable browser.

simple alpha compositing

blend-mode: overlay

source

backdrop

blended result

Background Blending


 /* blend background images of the same element */
 .element {
   background: url(image1.jpg), url(image2.jpg);
   background-color: rgba(215, 120, 25, 0.7);
   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


 /* blend heading with container */
 h2 {
   mix-blend-mode: difference;
 }

 .container {
   background-image: url(texture.png);
 }

Scratch

HOLA!

The Verge website homepage
The Verge progressive enhancement demo
Bennett Feely about CSS Blend Modes in web design

CSS Blend Modes Status

W3C Candidate Recommendation - Adobe, Canon

Firefox browser logo
Chrome browser logo
Opera browser logo
Webkit browser logo

CSS Masking

clipping vs masking

clip-path: circle(25% at 50% 50%);

This slide uses the -webkit-clip-path property. It is not supported in this browser. Learn how to get a capable browser.

clip-path: ellipse(50% 40% at 50% 50%);

This slide uses the -webkit-clip-path property. It is not supported in this browser. Learn how to get a capable browser.

clip-path: polygon(nonzero, 955px 405px, 483px 212px, 1px 400px, 0px 500px, 956px 500px);

This slide uses the -webkit-clip-path property. It is not supported in this browser. Learn how to get a capable browser.

Clipping with SVG


 .element {
  -webkit-clip-path: url(#clipping);
 }


 <svg>
   <clipPath id="clipping">
     <circle cx="50" cy="50" r="10"/>
   </clipPath>
 </svg>

Masking


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

Masking with SVG


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


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

HOLA!

CSS Masking Status

W3C Working Draft - Adobe, Mozilla, Google

Chrome browser logo
Chrome browser logo
Webkit browser logo
Firefox browser logo

Shapes in CSS

CSS Shapes

Shape Inside


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

Shape Outside


 #coffee {
  float: left;
  shape-outside: circle(10em 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 transparency of an image */
  shape-inside: url(image.png);
  shape-image-threshold: 0.5;
 }

CSS Shapes status

W3C Candidate Recommendation - Adobe, Microsoft

Chrome browser logo
Webkit browser logo
Opera browser logo

CSS Blending

CSS Masking

CSS Shapes

end

@razvancaliman

Credits