Skip to content

Instantly share code, notes, and snippets.

@htmlr
htmlr / dabblet.css
Created July 4, 2016 14:57 — forked from dstorey/dabblet.css
set the size of the boxes and any decoration
.slider {
/* set initial width */
width: 520px;
/* hide the content that overflows (to allow second box to show through) */
overflow: hidden;
display: inline-block;
/* skew container so that it has angled edge, and set up transition */
transform: skewX(-20deg);
<!-- Video element (live stream) -->
<label>Video Stream</label>
<video autoplay id="video" width="640" height="480"></video>
<!-- Canvas element (screenshot) -->
<label>Screenshot (base 64 dataURL)</label>
<canvas id="canvas" width="640" height="480"></canvas>
<!-- Capture button -->
<button id="capture-btn">Capture!</button>