cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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="http://services.google.com/fh/files/misc/color_grey.jpg">
    <img data-content-type="car-animated" class="content car-anim-3d" src="http://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="http://services.google.com/fh/files/misc/color_grey.jpg">
    <img data-content-type="car-animated" class="content car-anim-3d" src="http://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>
            
          
!
            
              /** 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;
}
            
          
!
            
              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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console