stanwmusic

<div class="player paused">
  <div class="album">
    <div class="cover">
      <div><img src="https://www.gimptalk.org/wp-content/uploads/2017/10/PeacePipe_new1440Sqr-URLs-300x300.jpg" alt="Last Trail by Stan Williams" /></div>
    </div>
  </div>
  
  <div class="info">
    <div class="time">
      <span class="current-time">0:00</span>

stanwmusic

<!--
  Don't use the "5-unsafe" CDN version in your own code. It will break on you. 
  Instead go to videojs.com and copy the CDN urls for the latest version.
-->

<div id="instructions">

  <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
      controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
      data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>

stanwmusic

Animated overlay caption

This is the last example from the "Captioneering" article here: http://hansmuller-webkit.blogspot.com/2014/04/captioneering_16.html

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="300 300 1400 1400">
<g id="Drums">
	<g>
		<path id="Drum-Shadow" opacity="0.1" fill="#333333" d="M1626.6,1282.8c0,45.4-280.5,82.1-626.6,82.1
			c-346,0-626.6-36.8-626.6-82.1c0-45.4,280.5-82.1,626.6-82.1C1346,1200.6,1626.6,1237.4,1626.6,1282.8z"/>
		<g id="Snare">
			<g id="Snare-Drum">
				
					<rect x="1219" y="885" fill="#0BC1F8" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="223" height="110"/>
				<line fill="none" stroke="#0891BA" stroke-width="8" stroke-miterlimit="10" x1="1438" y1="914" x2="1223" y2="914"/>

stanwmusic

<div>
  <canvas id="background"></canvas>
  <canvas id="text"></canvas>
  <canvas id="render"></canvas>
</div>

<section>
  <input id="name" type="text" placeholder="Loved One" maxlength="24" />
  <input id="line1" type="text" placeholder="Line 1" maxlength="40" />
  <input id="line2" type="text" placeholder="Line 2" maxlength="40" />

stanwmusic

<div id=bg></div>
<svg id=svg></svg>
<header>
  <input type=text id=playlist placeholder="SoundCloud Playlist URL" />
  <button id=load>Load Playlist</button>
</header>  

<footer>
  <a href="https://soundcloud.com">
    <img src="https://developers.soundcloud.com/assets/powered_by_white-371bd6967352fcc89673d4c81f7e5661.png" />

stanwmusic

CSS Only Lightbox with buttons

This is a lightbox with previous, next, and exit buttons made using CSS. This pen takes advantage of the CSS :target selector. Animation can be added, but for the sake of this pen, I have not implemented it.

A Pen by Stan Williams on CodePen.

License.

stanwmusic

CSS Only Modal + [Animation]

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<input type="checkbox" id="share-menu" />
<label for="share-menu" class="share-menu">
	<ul>
		<li><strong>Share</strong></li>
		<li><a href="#">Google+</a></li>
		<li><a href="#">Facebook</a></li>
		<li><a href="#">Twitter</a></li>
		<li><a href="#">Email</a></li>
	</ul>
</label>

stanwmusic

<main>
        <header>
            <video autoplay loop>
              <source src="https://res.cloudinary.com/dzjiv8sye/video/upload/v1472205518/Coverr-lamp_jikfrz.webm">
              <source src="https://res.cloudinary.com/dzjiv8sye/video/upload/v1472205519/Coverr-lamp_krhevy.mp4">
            </video>
            <h1>I have not failed. I've just found 10,000 ways that won't work.</h1>
        </header>
        <div id="maincontent">
            <h1>Thomas Alva Edison</h1>