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

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

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

CSS Blend Modes Status

W3C Candidate Recommendation - Adobe, Canon

CSS Masking

clipping vs masking

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

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

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

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>

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(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

end

@razvancaliman

Credits

• Reveal.js created by Hakim el Hattab
• Scratch Texture
• Background Wall Texture