Teks Shadow 3D

Memasang kode Teks Shadow 3D
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru   buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style type="text/css">
@import "compass/css3";
body {
    background: #333;
    padding-left:0px;}

h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}

.otto {
  background: #dad ;
  color: #888;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}
</style>

<h1 class="otto">
DEMO SHOW
</h1>

Sources by. Codepen
Edited by. Myscript2010

DEMOSHOW

Category: Teks Shadow 3D

Audio Player In Pure JS & CSS

Memasang kode Audio Player In Pure JS & CSS
Kode ini dapat memainkan musik dengan format mp3. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru   buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="audio-styles">
@font-face {
    font-family:"SSStandard";
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ss-standard.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}
.ss-icon,.ss-icon.ss-standard {
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    -webkit-font-feature-settings: "liga","dlig";
            font-feature-settings: "liga","dlig";
}
.ss-icon,.ss-icon.ss-standard {
    font-family: "SSStandard";
}
* { box-sizing: border-box; }
figure#audioplayer { 
  border: 1px solid #000;
  background: #333;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dark_wall.png);
  overflow: hidden;
  width: 32rem;
  padding: .4rem;
  margin: 0 auto;
}
figure#audioplayer audio { width: 0; height: 0; }
figure#audioplayer figcaption { 
  width: 21.5rem; font-size: 0;
  margin: .45rem; background: #000;
  float: left; 
  border: 1px solid #555;
}
figure#audioplayer figcaption div { 
  background: #000;
  color: #fff;
  padding: .8rem;
  font-family: Avenir, Helvetica, sans-serif;
  text-transform: uppercase; font-size: .8rem;
  display: inline-block;
}
figure#audioplayer figcaption div span { 
  display: block;
  font-size: 1.3rem;
  text-indent: 1rem; 
}
div#album { 
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  width: 100%; 
}
div#time { 
  width: 7.55rem;
  border-left: 1px solid #555; 
}
input#volumeSlider { -webkit-appearance: slider-vertical;  }
figure#audioplayer button { 
  width: 3rem; height: 3rem; 
  background: #000; color: #fff; 
  border: none; 
}
#playback { clear: both; }
div#fader { display: inline-block; }
#playback progress { 
  margin-left: 1rem; 
  width: 20rem; height: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #888;
  border: none;
  color: hsl(44,100%,44%);
}
progress::-webkit-progress-bar, progress::-moz-progress-bar, progress::progress-bar {
  background: hsl(44,100%,44%);
}
progress::-webkit-progress-value { background: hsl(44,100%,44%); }
progress::-moz-progress-bar {
background-color: hsl(44,100%,44%);
}
@media screen and (max-width: 500px) {
  div#time { display: block !important; border-top: 1px solid #555; width: 100%; }
  figure#audioplayer { width: 100%; padding: .2rem; }
  figure#audioplayer figcaption div { padding: .4rem; }
}
@media screen and (max-width: 450px) {
figure#audioplayer figcaption { width: 16rem; }
#playback progress { width: 220px; } 
}
@media screen and (max-width: 400px) {
figure#audioplayer figcaption { width: 14rem; }
}</style>

<figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
<figcaption>
<div>
Track<span itemprop="name">24 Ghosts III</span></div>
<div id="album">
Album<span itemprop="inAlbum">Ghosts III</span></div>
<div id="artist">
Artist<span itemprop="byArtist">Nine Inch Nails</span></div>
<div id="time">
Time<span id="playbacktime">00:00</span></div>
</figcaption>
<meta itemprop="duration" content="PT2M29S">
<div id="fader">
</div>
<div id="playback">
</div>
<audio controls src="//demosthenes.info/assets/audio/24-ghosts-III.mp3" id="audiotrack" preload="auto" itemprop="audio"></audio>
</figure>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>
function player() {
    if (audioTrack.paused) {
        setText(this, 'Pause');
        audioTrack.play();
    } else {
        setText(this, 'Play');
        audioTrack.pause();
    }
}
function setText(el, text) {
    el.innerHTML = text;
}
function finish() {
    audioTrack.currentTime = 0;
    setText(playButton, 'Play');
}
function updatePlayhead() {
    playhead.value = audioTrack.currentTime;
    var s = parseInt(audioTrack.currentTime % 60);
    var m = parseInt(audioTrack.currentTime / 60 % 60);
    s = s >= 10 ? s : '0' + s;
    m = m >= 10 ? m : '0' + m;
    playbacktime.innerHTML = m + ':' + s;
}
function volumizer() {
    if (audioTrack.volume == 0) {
        setText(muteButton, 'volume');
    } else {
        setText(muteButton, 'volumehigh');
    }
}
function muter() {
    if (audioTrack.volume == 0) {
        audioTrack.volume = restoreValue;
        volumeSlider.value = restoreValue;
    } else {
        audioTrack.volume = 0;
        restoreValue = volumeSlider.value;
        volumeSlider.value = 0;
    }
}
function setAttributes(el, attrs) {
    for (var key in attrs) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        el.setAttribute(key, attrs[key]);
    }
    window.CP.exitedLoop(1);
}
var audioPlayer = document.getElementById('audioplayer'), fader = document.getElementById('fader'), playback = document.getElementById('playback'), audioTrack = document.getElementById('audiotrack'), playbackTime = document.getElementById('playbacktime'), playButton = document.createElement('button'), muteButton = document.createElement('button'), playhead = document.createElement('progress');
volumeSlider = document.createElement('input');
setText(playButton, 'Play');
setText(muteButton, 'volumehigh');
setAttributes(playButton, {
    'type': 'button',
    'class': 'ss-icon'
});
setAttributes(muteButton, {
    'type': 'button',
    'class': 'ss-icon'
});
muteButton.style.display = 'block';
muteButton.style.margin = '0 auto';
setAttributes(volumeSlider, {
    'type': 'range',
    'min': '0',
    'max': '1',
    'step': 'any',
    'value': '1',
    'orient': 'vertical',
    'id': 'volumeSlider'
});
var duration = audioTrack.duration;
setAttributes(playhead, {
    'min': '0',
    'max': '100',
    'value': '0',
    'id': 'playhead'
});
fader.appendChild(volumeSlider);
fader.appendChild(muteButton);
playback.appendChild(playButton);
playback.appendChild(playhead);
audioTrack.removeAttribute('controls');
playButton.addEventListener('click', player, false);
muteButton.addEventListener('click', muter, false);
volumeSlider.addEventListener('input', function () {
    audioTrack.volume = volumeSlider.value;
}, false);
audioTrack.addEventListener('volumechange', volumizer, false);
audioTrack.addEventListener('playing', function () {
    playhead.max = audioTrack.duration;
}, false);
audioTrack.addEventListener('timeupdate', updatePlayhead, false);
audioTrack.addEventListener('ended', finish, false);
//# sourceURL=pen.js
</script>

Penjelasan :
Ganti Judul lagu, nama artis dan backgroud audio player sesuai keinginan
kemmudian tambahkan background gambar jika diperlukan copy kode berikut ini :

*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;} 

Pastekan dibawah kode

<style class="audio-styles">

Kemudian klik simpan selesai

Edited by. Myscript2010
Sources by. Dudley Storey on Codepen

DEMOSHOW

Category: Audio Player In Pure JS & CSS

Backgroud

SOME KIND OF BACKGROUND

No. 1 Background Gambar

<style class="no repeat-styles">
*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 }   
 </style>

No. 2 Background Gambar

<style class="top-styles">
body {
    background-image: url("http://Lin Gambar.jpg");
    background-repeat: repeat-x;
}
</style>

No. 3 Background Gambar

<style class="left-styles">
body {
    background-image: url("https://Link Gambar.jpg");
    background-repeat: repeat-y;
}
</style>

No. 4 Background Gambar

<style class="center-styles">
body {
    background-image:url(Link Gambar.jpg );
    background-repeat:initial;
}
</style>

No. 5 Background Warna

<style class="warna-styles">
body {
    background-color:#000;
}
</style>

No. 6 Background Warna

<style class="warna-styles">
/*Time for the CSS*/
* {margin: 0; padding: 0;}
body {background: #000;}
</style>

No. 7 Background Gambar

<style class="bk-center-styles">
body {background-image: url(http://Link Gambar.jpg)
;color:red;height:100%;overflow:hidden;}
</style>

No. 8 Background Gambar

<style class="Gambar-Warna-styles">
    body {
            background-image : url("https://Link Gambar.png");
            background-image : repeat;
            background-color : #000;
    }
</style>

No. 9 Kotak Area

.kotak {
padding:10px;
margin-top:5px;
margin-bottom:10px;
border-left: 10px solid #0b5394;
border-top:1px solid #ddd;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:0px 3px 3px #aaaaaa;
background: url(https://#.png)
no-repeat center center;}

<div class="kotak">
Your Text center
</div>  

<div class="kotak" style="overflow-x: scroll; 
overflow-y:hidden; padding: 10px; width: 548px;">
Your Text scroll left right
</div> 

<div class="kotak" style="overflow: auto; height: 80px;" >
Your Text scroll up and down
</div> 

No.10 Kotak Area Shine

<style type="text/css">
.Mys2010:hover:after, .Mys2010:hover:before {left: 70%;opacity: 1;}
.Mys2010:hover .info:after {-moz-transform: rotate(-200deg);-ms-transform: rotate(-200deg);-webkit-transform: rotate(-200deg);transform: rotate(-200deg);opacity: 1;right: -170%;display: block}
.Mys2010:hover .info:before {opacity: 1;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);-moz-background-size: 100% 1px, 100% 100%;-o-background-size: 100% 1px, 100% 100%;-webkit-background-size: 100% 1px, 100% 100%;background-size: 100% 1px, 100% 100%;background-repeat: no-repeat;-moz-transition-property: "background, opacity";-o-transition-property: "background, opacity";-webkit-transition-property: "background, opacity";transition-property: "background, opacity";-moz-transition-duration: ".6s, .6s";-o-transition-duration: ".6s, .6s";-webkit-transition-duration: ".6s, .6s";transition-duration: ".6s, .6s"}
.info {background: -moz-linear-gradient(70deg, #888888, #aaaaaa);background: -webkit-linear-gradient(70deg, #888888, #aaaaaa);background: -ms-linear-gradient(70deg, #888888, #aaaaaa);background: -o-linear-gradient(70deg, #888888, #aaaaaa);background: linear-gradient(20deg, #888888, #aaaaaa);border-radius: 5px;position: relative;overflow: hidden;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.2);border-left: 1px solid rgba(255, 255, 255, 0.2);border-right: 1px solid rgba(255, 255, 255, 0.4);border-bottom: 1px solid rgba(255, 255, 255, 0.2);padding: 30px;font-family: sans-serif}
.info:before {opacity: 0;content: "";position: absolute;pointer-events: none;top: 0;left: 0;right: 0;bottom: 0;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);-moz-background-size: 100% 1px, 100% 100%;-o-background-size: 100% 1px, 100% 100%;-webkit-background-size: 100% 1px, 100% 100%;background-size: 100% 1px, 100% 100%;background-repeat: no-repeat}
.info:after {opacity: 0;position: absolute;pointer-events: none;top: -200%;width: 400%;right: -105%;bottom: -100%;content: "";background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);-moz-background-size: 50% 100%;-o-background-size: 50% 100%;-webkit-background-size: 50% 100%;background-size: 50% 100%;background-repeat: no-repeat;-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-moz-transition-property: all;-o-transition-property: all;-webkit-transition-property: all;transition-property: all;-moz-transition-duration: 0.6s;-o-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;transition-duration: 0.6s} 
</style> 

<div class="Mys2010">
<div class="info">
Your Text 
</div>
</div>

No. 11 Link Gambar

<img src="Link Gambar.jpg" alt="judul" width="100" height="100" />

No. 12 Link Gambar

<img src="Link Gambar.jpg"style="float:right;" alt="judul" width="100" height="100" />

No. 13 Kotak Iframe

<iframe border="0" src="http://Your Link" style="border: 0px; height: 350px; width: 800px;"></iframe>

No. 14 Kotak Area Warna

<style class="box color-styles">
        * {
            padding : 0px;
            margin : 0px;
        }
        .kotak {
            width : 300px;
            height : 150px;
            color : #fff;
            background-color : blue;
            float : left;
        }
        
    </style>

<div class="kotak">
Your Text
</div>

No. 15 Background Gradient

 <style>
 body{
      background: #dad;
      background: -webkit-linear-gradient(45deg, #dad, green);
      background: -moz-linear-gradient(45deg, #dad, green);
      background: -o-linear-gradient(45deg, #dad, green);
      background: linear-gradient(45deg, #dad, pink);
      min-height: 100%;   
 }
 </style>

No. 16 Top Title

<style class="TopTitle-styles">/* Simple Reset */
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #dcecf4;
  border-bottom: 3px solid #63a5c4;
}
</style>  
<header>
<div class="page-wrap clearfix">
<center>
<h1>
<a href="http://css.com">Myscript2010</a></h1>
</center>
</header>
<section id="main">
<div class="page-wrap">

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/pelajaranku1/fileku/fixed.css">
 
<header>
<div class="page-wrap clearfix">
<center>
<h1>
<a href="http://css.com">Myscript2010</a></h1>
</center>
</header>
<section id="main">
<div class="page-wrap">

No. 17 Double Link

<p align="center">
<a class="Mys2010" href="http://Link Title" target="_blank" title="Judul"><span>Judul</span>

<a class="Mys2010" href="http://Link Title" target="_blank" title="Judul" style="margin-left: 300px"><span>judul 2</span></a>
</div>

No. 18 Top Bottom Link Img

 
*:before,
*:after {
  box-sizing: border-box;
}
.hide {
  display: none !important;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

/* GRADIEND */
.ap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  margin: auto;
  font-family: Arial, sans-serif;
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #333;
  background: #000;
  border-top: 2px solid #f0f;
  z-index: 9999;
} 
 
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<div style="background-image: url('http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNZmvBsD876qhyphenhyphenQC_U3OgCJyYxPQLJ1Ht761d9ExRZqSkJuxxJ6M4UCBAKsbzPkzWCX9j5vM1d7terN82Am_sWgOmnSX6gRaCdVx4itfa4X-0HGAvSGP7nGgCKu2nhyphenhyphenCqdsw0fa6Ssdw/s1600-r/sky_blue_gradient_background_mys2010.jpg" alt="img gradiend" width="700" height="170"'); background-repeat: no-repeat;
background-position: center;">
<p style="text-align: center;">

<b><font size="2" color="green"face="arial"> TEKS<b>
Diatas Gambar</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

No. 19 Figure

<figure>
    <div class="picture">
        <a href="http://Link Title" target="_blank" title="Judul">
            <img src="http://Link Gambar" alt=""/>
            <div class="image-overlay-link"></div>
        </a>
    </div>
</figure> 

No. 20 Top Bottom Link Redirect

 
/* GRADIEND */
.ap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  margin: auto;
  font-family: Arial, sans-serif;
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #333;
  background: #000;
  border-top: 2px solid #f0f;
  z-index: 9999;
} 

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<script type="text/javascript"><!--
function delayer(){
    window.location = "http://demoshow-mys2010.blogspot.co.id/2016/01/sahre-playing-with-math-in-js.html"}//-->
</script></head><body onLoad="setTimeout('delayer()', 35000)"><h2>
Waiting for a change in background</h2><p>
<img src="http://www.dynamicdrive.com/dynamicindex4/ajaxloadr.gif" name="e902" border="0" width="28" height="29" /></a>
<p style="text-align: center;">

No. 21 Title center

/* HIDE */
body {#);
  font-size: 17px;color:green ;height:100%;overflow:hidden;text-shadow: 0  -0px 0 black, 0 0px 30px aqua, 0 0px 50px aqua;}
div {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}

All Sources
Edited by. Myscript2010

TESTSCRIPT

Category: Backgroud