CSS3 masking demo

HTML

              
                <h1> CSS3 masking demo </h1>
<div class="instructions">
  <label>
    <input type="checkbox" checked onchange="ClipPathDemo.showInstructionsChanged()">
    Show Instructions
  </label>
  <div id="instructionsContent">
    <ul>
      <li>
        <b>Mask type:</b> The type of the mask. Masks may be based on clip-path with a basic shape, clip-path with an inlined SVG element, or mask-image. Also, masks may be static or animated.
      </li>
      <br>
      <li>
        <b>Maskee:</b> The content within the mask.
      </li>
    </ul>
  </div>
</div>

<br>

<!-- Demo settings -->
<div class="setting">
  <span class="setting-label"> Mask Type: </span>
  <span>
    <select id="maskShape" name="maskShape" onchange="ClipPathDemo.maskShapeChanged()">
      <option value="none" autocomplete="off"> None </option>
      <option value="rectangle" autocomplete="off">
        clip-path | basic shape | Static Rectangle
      </option>
      <option value="rectangle-anim-reveal" autocomplete="off">
        clip-path | basic shape | Rectangle Reveal
      </option>
      <option value="rectangle-anim-shrinkgrow" autocomplete="off">
        clip-path | basic shape | Rectangle Shrink/Grow
      </option>
      <option value="circle" autocomplete="off">
        clip-path | basic shape | Static Circle
      </option>
      <option value="circle-anim-oscillateresize" autocomplete="off">
        clip-path | basic shape | Circle Oscillate and Resize
      </option>
      <option value="circle-anim-smalloscillate" autocomplete="off" selected>
        clip-path | basic shape | Circle Small Oscillation
      </option>
      <option value="octagon" autocomplete="off">
        clip-path | basic shape | Static Octagon
      </option>
      <option value="octagon-morph" autocomplete="off">
        clip-path | basic shape | Octagon to Square
      </option>
      <option value="clipSVG" autocomplete="off">
        clip-path | SVG | Static Star
      </option>
      <option value="clipSVG-anim" autocomplete="off">
        clip-path | SVG | Star Animated (no effect!)
      </option>
      <option value="maskStar" autocomplete="off">
        mask-image | Static Star
      </option>
      <option value="maskStar-reveal" autocomplete="off">
        mask-image | Star Reveal
      </option>
      <option value="maskStar-shrinkgrow" autocomplete="off">
        mask-image | Star Shrink/Grow
      </option>
      <option value="maskStar-oscillateresize" autocomplete="off">
        mask-image | Star Oscillate and Resize
      </option>
      <option value="maskStar-smalloscillate" autocomplete="off">
        mask-image | Star Small Oscillation
      </option>
    </select>
  </span>
</div>
<div class="setting">
  <span class="setting-label"> Maskee: </span>
  <span>
    <select id="maskee" name="maskee" onchange="ClipPathDemo.maskeeChanged()">
      <option value="car" autocomplete="off" selected> Car </option>
      <option value="car-animated" autocomplete="off"> Car (Animated) </option>
      <option value="text" autocomplete="off"> Text </option>
    </select>
  </span>
</div>

<!-- Mask and maskee. -->
<div class="container">
  <div class="mask clip-circle smalloscillate hide-overflow" id="Mask">
    <img data-content-type="car" class="content selected" src="https://services.google.com/fh/files/misc/color_grey.jpg">
    <img data-content-type="car-animated" class="content car-anim-3d" src="https://services.google.com/fh/files/misc/color_grey.jpg">
    <div data-content-type="text" class="content">
      <div class="text-background">
        <div class="text">
          Example Text
        </div>
      </div>
    </div>
  </div>

  <!-- Unmasked content for reference -->
  <div class="reference">
    <img data-content-type="car" class="content selected" src="https://services.google.com/fh/files/misc/color_grey.jpg">
    <img data-content-type="car-animated" class="content car-anim-3d" src="https://services.google.com/fh/files/misc/color_grey.jpg">
    <div data-content-type="text" class="content">
      <div class="text-background">
        <div class="text">
          Example Text
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Inlined SVG for use with clip-path. -->
<svg height="0" width="0">
  <defs>
    <clipPath class="clip-svg-source" id="clipShapeStar">
      <polygon points="150,10 90,198 240,78 60,78 210,198"
               style="opacity:1;fill:#000000;" />
    </clipPath>
  </defs>
</svg>

CSS

              
                /** Demo Settings */
.instructions {
  font-size: 14px;
  width: 800px;
}

.hidden {
  display: none
}

.setting {
  margin-bottom: 10px;
}

.setting-label {
  margin-right: 10px;
}


  /** Mask, maskee, and reference content. */
.container {
  position: absolute;
  transform-style: preserve-3d;
  transform: perspective(1400px);
}

.container img {
  width: 400px;
  top: -50px;
}

.mask {
  position: absolute;
  left: 0px;
  top: 20px;
  width: 500px;
  height: 500px;
}

.mask.hide-overflow {
  /** If this is not set, clip-path is ignored if the maskee has 3D or animated transforms. */
  overflow: hidden;
}

.content {
  position: absolute;
  left: 0px;
  top: 0px;
  display: none;
}

.content.selected {
  display: block;
}

.reference {
  position: absolute;
  left: 500px;
  top: 20px;
}


/** Clipping using basic shapes. */
.clip-rectangle {
  clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
  -webkit-clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
}

.clip-rectangle.reveal {
  animation: clip_rectangle_reveal_keys 4s linear 0s infinite normal forwards;
  -webkit-animation: clip_rectangle_reveal_keys 4s linear 0s infinite normal forwards;
}

@keyframes clip_rectangle_reveal_keys {
  0% {
    clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
    -webkit-clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
  }
  50% {
    clip-path: polygon(175px 0px, 175px 0px, 175px 200px, 175px 200px);
    -webkit-clip-path: polygon(175px 0px, 175px 0px, 175px 200px, 175px 200px);
  }
  100% {
    clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
    -webkit-clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
  }
}

.clip-rectangle.shrinkgrow {
  animation: clip_rectangle_shrinkgrow_keys 4s linear 0s infinite normal forwards;
  -webkit-animation: clip_rectangle_shrinkgrow_keys 4s linear 0s infinite normal forwards;
}

@keyframes clip_rectangle_shrinkgrow_keys {
  0% {
    clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
    -webkit-clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
    animation-timing-function: ease-in-out
  }
  50% {
    clip-path: polygon(75px 0px, 275px 0px, 275px 200px, 75px 200px);
    -webkit-clip-path: polygon(75px 0px, 275px 0px, 275px 200px, 75px 200px);
    animation-timing-function: ease-in-out
  }
  100% {
    clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
    -webkit-clip-path: polygon(50px 0px, 300px 0px, 300px 200px, 50px 200px);
    animation-timing-function: ease-in-out
  }
}

.clip-circle {
  clip-path: circle(100px at 150px 125px);
  -webkit-clip-path: circle(100px at 150px 125px);
}

.clip-circle.oscillateresize {
  animation: clip_circle_oscillateresize_keys 6s linear 0s infinite normal forwards;
  -webkit-animation: clip_circle_oscillateresize_keys 6s linear 0s infinite normal forwards;
}

@keyframes clip_circle_oscillateresize_keys {
  0% {
    clip-path: circle(100px at 100px 100px);
    -webkit-clip-path: circle(100px at 100px 100px);
  }
  50% {
    clip-path: circle(0px at 300px 100px);
    -webkit-clip-path: circle(0px at 300px 100px);
  }
  100% {
    clip-path: circle(100px at 100px 100px);
    -webkit-clip-path: circle(100px at 100px 100px);
  }
}

.clip-circle.smalloscillate {
  animation: clip_circle_smalloscillate_keys 4s linear 0s infinite normal forwards;
  -webkit-animation: clip_circle_smalloscillate_keys 4s linear 0s infinite normal forwards;
}

@keyframes clip_circle_smalloscillate_keys {
  0% {
    clip-path: circle(100px at 150px 125px);
    -webkit-clip-path: circle(100px at 150px 125px);
    animation-timing-function: ease-in-out
  }
  50% {
    clip-path: circle(100px at 170px 125px);
    -webkit-clip-path: circle(100px at 170px 125px);
    animation-timing-function: ease-in-out
  }
  100% {
    clip-path: circle(100px at 100px 125px);
    -webkit-clip-path: circle(100px at 150px 125px);
    animation-timing-function: ease-in-out
  }
}

.clip-octagon {
  clip-path: polygon(50px 70px, 120px 0px, 220px 0px, 290px 70px, 290px 170px, 220px 240px, 120px 240px, 50px 170px);
  -webkit-clip-path: polygon(50px 70px, 120px 0px, 220px 0px, 290px 70px, 290px 170px, 220px 240px, 120px 240px, 50px 170px);
}

.clip-octagon.morph {
  animation: clip_octagon_morph_keys 4s linear 0s infinite normal forwards;
  -webkit-animation: clip_octagon_morph_keys 4s linear 0s infinite normal forwards;
}

@keyframes clip_octagon_morph_keys {
  0% {
    clip-path: polygon(50px 70px, 120px 0px, 220px 0px, 290px 70px, 290px 170px, 220px 240px, 120px 240px, 50px 170px);
    -webkit-clip-path: polygon(50px 70px, 120px 0px, 220px 0px, 290px 70px, 290px 170px, 220px 240px, 120px 240px, 50px 170px);
  }
  50% {
    clip-path: polygon(120px 70px, 120px 70px, 220px 70px, 220px 70px, 220px 170px, 220px 170px, 120px 170px, 120px 170px);
    -webkit-clip-path: polygon(120px 70px, 120px 70px, 220px 70px, 220px 70px, 220px 170px, 220px 170px, 120px 170px, 120px 170px);
  }
  100% {
    clip-path: polygon(50px 70px, 120px 0px, 220px 0px, 290px 70px, 290px 170px, 220px 240px, 120px 240px, 50px 170px);
    -webkit-clip-path: polygon(50px 70px, 120px 0px, 220px 0px, 290px 70px, 290px 170px, 220px 240px, 120px 240px, 50px 170px);
  }
}

/** Clipping using an inlined SVG. */
.clip-svg {
  -webkit-clip-path: url(#clipShapeStar);
  clip-path: url(#clipShapeStar);
}

.clip-svg-source.anim {
  animation: clip_svg_keys 2s linear 0s infinite normal forwards;
  -moz-animation: clip_svg_keys 2s linear 0s infinite normal forwards;
  -webkit-animation: clip_svg_keys 2s linear 0s infinite normal forwards;
}

@keyframes clip_svg_keys {
  0% { transform: translate3d(0px, 0px, 0px); }
  50% { transform: translate3d(0px, 100px, 0px); }
  100% { transform: translate3d(0px, 0px, 0px); }
}

@-moz-keyframes clip_svg_keys {
  0% { -moz-transform: translate3d(0px, 0px, 0px); }
  50% { -moz-transform: translate3d(0px, 100px, 0px); }
  100% { -moz-transform: translate3d(0px, 0px, 0px); }
}

@-webkit-keyframes clip_svg_keys {
  0% { -webkit-transform: translate3d(0px, 0px, 0px); }
  50% { -webkit-transform: translate3d(0px, 100px, 0px); }
  100% { -webkit-transform: translate3d(0px, 0px, 0px); }
}

/** Masking. */
.mask-svg {
  -webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg);
  -webkit-mask-position: 0px 0px;
  -webkit-mask-size: 300px 300px;
  -webkit-mask-repeat: no-repeat;
  mask-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg);
  mask-position: 0px 0px;
  mask-size: 300px 300px;
  mask-repeat: no-repeat;
}

.mask-svg.reveal {
  animation: mask_svg_reveal_keys 4s linear 0s infinite normal forwards;
  -moz-animation: mask_svg_reveal_keys 4s linear 0s infinite normal forwards;
  -webkit-animation: mask_svg_reveal_keys 4s linear 0s infinite normal forwards;
}

@keyframes mask_svg_reveal_keys {
  0% {
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 300px 300px;
    mask-position: 0px 0px;
    mask-size: 300px 300px;
  }
  50% {
    -webkit-mask-position: 100px 0px;
    -webkit-mask-size: 0px 300px;
    mask-position: 100px 0px;
    mask-size: 0px 300px;
  }
  100% {
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 300px 300px;
    mask-position: 0px 0px;
    mask-size: 300px 300px;
  }
}

.mask-svg.shrinkgrow {
  animation: mask_svg_shrinkgrow_keys 3s linear 0s infinite normal forwards;
  -moz-animation: mask_svg_shrinkgrow_keys 3s linear 0s infinite normal forwards;
  -webkit-animation: mask_svg_shrinkgrow_keys 3s linear 0s infinite normal forwards;
}

@keyframes mask_svg_shrinkgrow_keys {
  0% {
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 300px 300px;
    mask-position: 0px 0px;
    mask-size: 300px 300px;
    animation-timing-function: ease-in-out;
  }
  50% {
    -webkit-mask-position: 10px 10px;
    -webkit-mask-size: 280px 280px;
    mask-position: 10px 10px;
    mask-size: 280px 280px;
    animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 300px 300px;
    mask-position: 0px 0px;
    mask-size: 300px 300px;
    animation-timing-function: ease-in-out;
  }
}

.mask-svg.smalloscillate {
  animation: mask_svg_smalloscillate_keys 3s linear 0s infinite normal forwards;
  -moz-animation: mask_svg_smalloscillate_keys 3s linear 0s infinite normal forwards;
  -webkit-animation: mask_svg_smalloscillate_keys 3s linear 0s infinite normal forwards;
}

@keyframes mask_svg_smalloscillate_keys {
  0% {
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 300px 300px;
    mask-position: 0px 0px;
    mask-size: 300px 300px;
    animation-timing-function: ease-in-out;
  }
  50% {
    -webkit-mask-position: 20px 20px;
    -webkit-mask-size: 300px 300px;
    mask-position: 20px 20px;
    mask-size: 300px 300px;
    animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 300px 300px;
    mask-position: 0px 0px;
    mask-size: 300px 300px;
    animation-timing-function: ease-in-out;
  }
}

.mask-svg.oscillateresize {
  animation: mask_svg_oscillateresize_keys 4s linear 0s infinite normal forwards;
  -moz-animation: mask_svg_oscillateresize_keys 4s linear 0s infinite normal forwards;
  -webkit-animation: mask_svg_oscillateresize_keys 4s linear 0s infinite normal forwards;
}

@keyframes mask_svg_oscillateresize_keys {
  0% {
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 300px 300px;
    mask-position: 0px 0px;
    mask-size: 300px 300px;
  }
  50% {
    -webkit-mask-position: 300px 150px;
    -webkit-mask-size: 1px 1px;
    mask-position: 300px 0px;
    mask-size: 1px 1px;
  }
  100% {
    -webkit-mask-position: 0px 0px;
    -webkit-mask-size: 300px 300px;
    mask-position: 0px 0px;
    mask-size: 300px 300px;
  }
}

/** Maskee styling. */
.car-anim-3d {
  animation: car_keys_3d 5s ease-in-out 0s infinite normal forwards;
  -webkit-animation: car_keys_3d 5s ease-in-out 0s infinite normal forwards;
}

@keyframes car_keys_3d {
  0% {
    transform: rotateY(-30deg) translate3d(-50px, 0px, 0px);
    -webkit-transform: rotateY(-30deg) translate3d(-50px, 0px, 0px);
  }
  50% {
    transform: rotateY(30deg) translate3d(50px, 0px, 0px);
    -webkit-transform: rotateY(30deg) translate3d(50px, 0px, 0px);
  }
  100% {
    transform: rotateY(-30deg) translate3d(-50px, 0px, 0px);
    -webkit-transform: rotateY(-30deg) translate3d(-50px, 0px, 0px);
  }
}

.text-background {
  position: absolute;
  width: 340px;
  height: 280px;
  background-color: #c4c4c4;
}

.text {
  position: absolute;
  left: 50px;
  top: 100px;
  font-size: 40px;
}

JS

              
                window.ClipPathDemo = {};

/**
 * Callback invoked when the clipping or masking shape has changed.
 */
ClipPathDemo.maskShapeChanged = function() {
  var svgShape = document.getElementById('clipShapeStar');
  var maskShape = document.getElementById('maskShape').value;

  var mask = document.getElementById('Mask');
  mask.classList.remove('hide-overflow');
  mask.classList.remove('clip-svg');
  mask.classList.remove('mask-svg');
  mask.classList.remove('clip-rectangle');
  mask.classList.remove('clip-circle');
  mask.classList.remove('clip-octagon');
  mask.classList.remove('anim');
  mask.classList.remove('reveal');
  mask.classList.remove('shrinkgrow');
  mask.classList.remove('oscillate');
  mask.classList.remove('smalloscillate');
  mask.classList.remove('oscillateresize');
  mask.classList.remove('morph');
  svgShape.classList.remove('anim');

  // Set the mask shape.
  if (maskShape == 'clipSVG') {
    mask.classList.add('clip-svg');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'clipSVG-anim') {
    mask.classList.add('clip-svg');
    mask.classList.add('anim');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'maskStar') {
    mask.classList.add('mask-svg');
  } else if (maskShape == 'maskStar-reveal') {
    mask.classList.add('mask-svg');
    mask.classList.add('reveal');
  } else if (maskShape == 'maskStar-shrinkgrow') {
    mask.classList.add('mask-svg');
    mask.classList.add('shrinkgrow');
  } else if (maskShape == 'maskStar-oscillateresize') {
    mask.classList.add('mask-svg');
    mask.classList.add('oscillateresize');
  } else if (maskShape == 'maskStar-smalloscillate') {
    mask.classList.add('mask-svg');
    mask.classList.add('smalloscillate');
  } else if (maskShape == 'rectangle') {
    mask.classList.add('clip-rectangle');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'rectangle-anim-reveal') {
    mask.classList.add('clip-rectangle');
    mask.classList.add('reveal');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'rectangle-anim-shrinkgrow') {
    mask.classList.add('clip-rectangle');
    mask.classList.add('shrinkgrow');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'circle') {
    mask.classList.add('clip-circle');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'circle-anim-oscillateresize') {
    mask.classList.add('clip-circle');
    mask.classList.add('oscillateresize');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'circle-anim-smalloscillate') {
    mask.classList.add('clip-circle');
    mask.classList.add('smalloscillate');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'octagon') {
    mask.classList.add('clip-octagon');
    mask.classList.add('hide-overflow');
  } else if (maskShape == 'octagon-morph') {
    mask.classList.add('clip-octagon');
    mask.classList.add('morph');
    mask.classList.add('hide-overflow');
  }
};


/**
 * Callback invoked when the selected maskee changes.
 */
ClipPathDemo.maskeeChanged = function() {
  var maskeeName = document.getElementById('maskee').value;
  var elems = document.querySelectorAll('.content');
  for (var i = 0, len = elems.length; i < len; i++) {
    if (elems[i].getAttribute('data-content-type') == maskeeName) {
      elems[i].classList.add('selected');
    } else {
      elems[i].classList.remove('selected');
    }
  }
};


/**
 * Callback invoked when the demo instructions are shown or hidden.
 */
ClipPathDemo.showInstructionsChanged = function() {
  document.getElementById('instructionsContent').classList.toggle('hidden');
};

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions