February 2016 | Mys2010 on Codepen

HomeArchives for February 2016

Animated Popup Android Style

Memasang kode Animated Popup Android Style
Code ini dapat menampilkan Box Info. 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

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>

<style class="PopUp-styles">

body {
  background: #ddd;
  width: 100%;
  height: 100vh;
  position: relative;
}

h1 {
  color: #c7c7c7;
  font-weight: 200;
  text-align: center;
  position: absolute;
  top: 45%;
  width: 100%;
}

h2 {
  color: #007fed;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

p {
  color: #001818;
}

.wrap {
  position: absolute;
  overflow: hidden;
  top: 10%;
  right: 10%;
  bottom: 85px;
  left: 10%;
  padding: 20px 50px;
  display: block;
  border-radius: 4px;
  transform: translateY(20px);
  transition: all 0.5s;
  visibility: hidden;
}
.wrap .content {
  opacity: 0;
}
.wrap:before {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  content: "";
  bottom: 10px;
  left: 50%;
  top: 95%;
  color: #fff;
  border-radius: 50%;
  -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active {
  display: block;
  visibility: visible;
  box-shadow: 2px 3px 16px silver;
  transition: all 600ms;
  transform: translateY(0px);
  transition: all 0.5s;
}
.wrap.active:before {
  height: 2000px;
  width: 2000px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -1000px;
  margin-top: -1000px;
  display: block;
  -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active .content {
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

a.button {
  padding: 11px 11px 13px 13px;
  outline: none;
  border-radius: 50%;
  background: #007fed;
  color: #fff;
  font-size: 24px;
  display: block;
  position: fixed;
  left: 50%;
  bottom: 20px;
  top: auto;
  margin-left: -25px;
  transition: transform 0.25s;
}
a.button:hover {
  text-decoration: none;
  background: #2198ff;
}
a.button.active {
  transform: rotate(135deg);
  transition: transform 0.5s;
}

</style>

<h1>Animated Popup Information</h1>
<div class='wrap'>
  <div class='content'>
    <h2>Well Hello!</h2>
    <p>Teks anda disini.</p>
    <p>Your Text here</p>
  </div>
</div>
<a class='button glyphicon glyphicon-plus' href='#'></a>
<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>$('a').on('click', function () {
    $('.wrap, a').toggleClass('active');
    return false;
});</script>

Penjelasan :
Tambahkan code CSS HTML dan JAVASRIPT
sesuai keinginan, untuk penambahan code CSS dibawah code

transition: transform 0.5s;
}

untuk penambahan code HTML atau teks ditengah code :

<p> ... </p>

dan untuk penambahan code <script> diatas code :

<a class='button glyphicon glyphicon-plus' href='#'></a>

Edited by. Myscript2010
Sources by. Ashwin Saxena

DEMOSHOW

Category: Animated Popup Android Style

Image with the background and text

Memasang kode Gambar dengan latar belakang dan text
Code ini menggunakan CSS dan HTML. 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">

/* CSS */

#member-squares, #member-squares *{box-sizing: border-box}
#member-squares a{text-decoration: none}
.member-square{padding: 5px 30px 30px 30px; width: 300px; height: 300px; margin: 9px 20px 20px 9px; display: inline-block; vertical-align: top; color: transparent; -webkit-transition: box-shadow 0.2s linear; -transition: box-shadow 0.2s linear}
.member-square:hover{box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5); color: white}
.member-name{background-color: #0fa9ec; color: white; position: relative; right: 39px; top: -9px; padding: 8px}
.member-square#person1 {background-image: url('http://placehold.it/300&text=Person+1')}
.member-square#person2 {background-image: url('http://placehold.it/300&text=Person+2')}
.member-square#person3 {background-image: url('http://placehold.it/300&text=Person+3')}
.member-square#person4 {background-image: url('http://placehold.it/300&text=Person+4')}

/* HTML */

<div id="member-squares">
<a href="http://Link Title">
<div class="member-square" id="person1">
<span class="member-name">Person 1 - owner</span><br>
Your Text.
</div>
</a>
<a href="http://Link Title">
<div class="member-square" id="person2">
<span class="member-name">Person 2 - owner</span><br>
Your Text.
</div>
</a>
<a href="http://Link Title">
<div class="member-square" id="person3">
<span class="member-name">Person 3 - owner</span><br>
Your Text.
</div>
</a>
<a href="http://Link Title">
<div class="member-square" id="person4">
<span class="member-name">Person 4 - owner</span><br>
Your Text.
</div>
</a>
</div>

Penjelasan :
Tambahkan code teks 3D untuk judul agar tampilan terlihat rapih, copy code berikut :

@import "compass/css3";
body {
    background: #fff;
    padding-left:0px;}

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

.otto {
  background: #dad ;
  color: yellow;
  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);}

Pastekan dibawah code :

<style type="text/css">

Kemudian copy code berikut ini :

<section id="main">
<div class="page-wrap">
<h1 class="otto">
DEMO SHOW
</h1>
<font size="5" color=" green "face="Time newroman">YOUR TEXT</a> </font>

Pastekan dibawah code : </style>
Selanjutnya klik pratinjau untuk melihat hasil dan klik perbarui selesai. Test Code Here

Edited by. Myscript2010
Sources by. Daniel Peukert

DEMOSHOW

See also code after modificationCode Here Image with the background

Category: Image with the background and text HTML CSS

Before modification YouTube Ambilight Prototype

Memasang kode YouTube Ambilight Prototype
Code ini dapat menamplkan Video Youtube Online. 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="TopTitle-styles">

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}
body {
  background-color: #000;
}
#tubular-container {
  filter: blur(50px) brightness(0.5);
  -webkit-filter: blur(50px) brightness(0.5);
  z-index: 0;
}
.video {
  width: 560px;
  height: 315px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
</style>

<div class='video'></div>

<script src="//assets.codepen.io/assets/libs/prefixfree.min-d258f6cb24f3a877e4fb83b348ec8a3f.js">
</script>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script src='http://www.seanmccambridge.com/tubular/js/jquery.tubular.1.0.js'>
</script>

<script>
      (function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width=\'560\' height=\'315\' src=\'//www.youtube.com/embed/' + yt_id + '?rel=0&controls=0&showinfo=0&autoplay=1\' frameborder=\'0\' allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });
        }
    };
}.call(this));    
    </script>

Penjelasan :
Tambahkan background gambar jika diperlukan, copy code berikut ini :

body {background-image: url(http://Link Gambar.jpg)
;color:red;height:100%;overflow:hidden;}
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: #444;
  border-bottom: 3px solid #333;
}

Patekan dibawah code :

<style class="TopTitle-styles">

Kemudian copy code berikut ini :

<p align="center">
<img src="http://Link Gambar.png" 
name="e902" border="0" width="780" height="610" /></a> 
</center>
<header>

<div class="page-wrap clearfix">
<p align="center">
<font size="2" color="green"face="arial"> 
<a href="http://Link Title.html" title="Myscript2010">Your Text</a>
</header>

Pastekan dibawah code :

<div class='video'> </div>

Selanjutnya edit ukuran gambar serta ukuran screen youtube width heigh agar sesuai dengan tampilan, dalam code tersebut ada background latar yang bernama Tubular Js, hapus code tersebut jika tidak diperlukan, lalu klik pratinjau untuk melihat hasil dan klik perbarui selesai

Edited by. Myscript2010
Sources by. Max On Codepen

DEMOSHOW

See also code after modificationCode Here Youtube Online

Category: Before modification YouTube Ambilight Prototype

YouTube Ambilight Prototype

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

<style class="TopTitle-styles">
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: #444;
  border-bottom: 3px solid #333;
}

body {background-image: url
(http://Link Gambar.jpg)
;color:red;height:100%;overflow:hidden;}

#tubular-container {
  filter: blur(0px) brightness(.5);
  -webkit-filter: blur(0px) brightness(.5);
  z-index: 0;
}

.video {
  width: 567px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
</style>

<div class='video'>
</div>
<p align="center">

<img src="http://Link Gambar.png" name="e902" border="0" width="780" height="610" /></a> 
</center>

<header>
<div class="page-wrap clearfix">
<p align="center">
<font size="2" color="green"face="arial"> 
<a href="http://Link Title" title="Myscript2010">YOUR TEXT</a>
</header>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>(function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width="570" height="330" src="https://www.youtube.com/embed/Favl3kzWejA?list=RDcbV190MjKiU" frameborder="0" allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });
        }
    };
}.call(this));
 
</script>

Penjelasan :
Edit Code ukuran gambar serta ukuran screen youtube width heigh dan ganti link youtube sesuai keinginan

Edited by. Myscript2010
Sources by. Max On Codepen

DEMOSHOW

You can edit the code before modificationnCode Here Youtube Online

Category: YouTube Ambilight Prototype

Audio Player Mp3 Modification

Memasang kode Audio Player 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="TopTitle-styles">
/* Backgroud 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: #444;
  border-bottom: 3px solid #333;
}
</style>  

<header>
<div class="page-wrap clearfix">
<p align="center">
<font size="3" color="green"face="arial"> 
<a href="#" target="_blank" title="Myscript2010">Audio Player Mp3</a>
</header>
</center>
<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

<style class="Audio-Player-Mp3-styles">
/* Code Audio Player Mp3 Requires font-awesome */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: #000;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: #fff;
    border-radius: 50%;
    float: left;
    position: relative;
    cursor: pointer;
    color: #000;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.player .source-ctrl-container:hover {
    background: rgb(246,246,246); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%, rgba(225,225,225,1) 49%, rgba(241,241,241,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(246,246,246,1)), color-stop(49%,rgba(225,225,225,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 10px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 18px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 18px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ffff00;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #666;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}

 
body {
  overflow: hidden;
  background: -webkit-radial-gradient(#4777b0 0%, #201d31 100%);
  background: radial-gradient(#4777b0 0%, #201d31 100%);
}

.b-nav, body:after {
  position: absolute;
  right: 0;
}
.b-brand, .b-link {
  font-size: 18px;
  font-weight: 700;
  margin-left: 0;
  text-decoration: none;
  font-family: "Roboto Slab", serif;
  text-transform: uppercase;
  ;
}
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
* {
  box-sizing: border-box
}
body:after {
  background: #000;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0;
  top: 0;
  visibility: hidden;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  width: 100%;
}
body.open:after {
  z-index: 10;
  opacity: 0.65;
  height: 100000%;
  visibility: visible
}
.b-nav {
  background: #000 none repeat scroll 0 0;
  position: absolute;
  top: 0;
  width: 320px;
  z-index: 12;
}
.b-nav:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav {
  animation-duration: .4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-nav ul {
  padding-left: 0px;
}
.b-nav li {
  color: #fff;
  list-style-type: none;
  padding: 10px 10px 10px 0;
  text-align: left;
  -webkit-transform: translateX(345px);
  -ms-transform: translateX(345px);
  transform: translateX(345px)
}
.b-nav li:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav li:not(.open), .b-nav.open li {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both
}
.b-nav li:first-child {
  margin-top: 0px
}
.b-nav.open {
  visibility: visible;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
.b-nav:not(.open) {
  visibility: hidden;
  animation-duration: 0.4s;
  animation-fill-mode: backwards;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav.open li {
  padding-left: 30px;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-link {
  background: 0 0;
  border-left: rgba(255, 255, 255, 0)solid 2px;
  color: #fff;
  transition: all .4s ease;
  width: auto
}
.b-link, .b-menu {
  -webkit-transition: all .4s ease;
}
.b-nav li {
  border-left: 5px solid #e00a12;
}

/*.b-link--active,
.b-link:hover {
    border-left: #e00a12 solid 5px;
    padding-left: 30px
}*/

.b-menu {
  cursor: pointer;
  display: block;
  height: 66px;
  padding-top: 20px;
  position: relative;
  top: -20px;
  transition: all 0.4s ease 0s;
  width: 43px;
  z-index: 12;
  right: 10px;
}
.b-bun--bottom, .b-bun--mid, .b-bun--top {
  height: 2px;
  width: 25px
}
.b-container.open .b-main, .b-menu:hover {}
.b-bun {
  background: #fff;
  transition: all .4s ease
}
.b-brand, .b-bun {
  position: relative;
  -webkit-transition: all .4s ease
}
.b-bun--top {
  top: 0
}
.b-bun--mid {
  top: 8px
}
.b-bun--bottom {
  top: 16px
}
.b-brand {
  color: #2196f3;
  top: -21.43px;
  transition: all .4s ease;
  z-index: 13
}
.b-container {
  position: absolute;
  right: 0;
  top: 20px;
}
.b-container:hover:not(.open) .bun-bottom, .b-container:hover:not(.open) .bun-mid, .b-container:hover:not(.open) .bun-top {
  background: #2196f3
}
.b-container.open .b-bun--top {
  background: #e00a12;
  top: 9px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
.b-container.open .b-bun--mid {
  opacity: 0
}
.b-container.open .b-bun--bottom {
  background: #e00a12;
  top: 5px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.b-container.open .b-brand {
  color: #fff
}
.mobile-search-btn {
     background-color: #e00a12;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 25px;
    margin-left: 30px;
    padding: 10px 20px;
    text-transform: uppercase;
  border:none;
}
.mobile-search {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #949494;
    font-size: 14px;
    margin-bottom: 20px;
    margin-left: 30px;
    padding: 10px;
    width: 80%;
}

@import "compass/css3";
body {
    background: ##333;
    padding-left:0px;}

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

.otto {
  background: #;
  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>

<center>
<audio id="player">
<source src="https://sites.google.com/site/studiedingsongmp3/laguku/Capoeira-Paranaue-Mys2010.mp3" type="audio/ogg">
<source src="https://sites.google.com/site/studiedingsongmp3/laguku/Capoeira-Paranaue-Mys2010.mp3" type="audio/mpeg">
</audio>
</center>

<div class="mobile-nav">
<div class="b-nav">
<ul>
<li><a class="b-link b-link--active" href="#">MENU Mp3</a></li>
<li><a class="b-link" href="#">1. Title Mp3</a></li>
<li><a class="b-link" href="#">2. Title Mp3</a></li>
<li><a class="b-link" href="#">3. Title Mp3</a></li>
<li><a class="b-link" href="#">4. Title Mp3</a></li>
</ul>
</div>
<!-- Burger-Icon -->
<div class="b-container">
<div class="b-menu">
<div class="b-bun b-bun--top">
</div>
<div class="b-bun b-bun--mid">
</div>
<div class="b-bun b-bun--bottom">
</div>
</div>
<!-- Burger-Brand -->
<a href="#" class="b-brand"></a>
</div>
</div>
<div class="Mys2010">
<div class="info">
<h1 class="otto">
MYSCRIPT2010
</h1>
</div>
</div>
<p align="center">
<font size="3" color="#888"face="arial"><b> LEARN EDITING SCRIPT CIBEBER CIMAHI</b></font>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'>
</script>

<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'>
</script>

<script>
"use strict";

/**
 * script Audio Player Mp3 Requires mootools core and mootools more Slider
 */

var Player = function(audio_element, options) {

    this.audio_obj = document.id(audio_element);
    this.options = options;

    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };

    this.render = function() {

        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);

        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );

        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );

        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };

    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };

    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };

    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }

        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;

        return time;
    }

    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };

}
var player = new Player('player');
player.init();
</script>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script>
'use strict';
/**
 * script Menu Mp3 Requires mootools core and mootools more Slider
 */
(function () {
    var body = document.body;
    var burgerMenu = document.getElementsByClassName('b-menu')[0];
    var burgerContain = document.getElementsByClassName('b-container')[0];
    var burgerNav = document.getElementsByClassName('b-nav')[0];
    burgerMenu.addEventListener('click', function toggleClasses() {
        [
            body,
            burgerContain,
            burgerNav
        ].forEach(function (el) {
            el.classList.toggle('open');
        });
    }, false);
}());
</script>

Edited by. Myscript2010
Sources by. Abidibo on Codepen

DEMOSHOW

You can edit the code before modificationnCode Here Audio Player Mp3

Category: Audio Player Mp3 Modification

Audio Player Mp3

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

<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<style class="music-styles">
/* Requires font-awesome */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: #000;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: #fff;
    border-radius: 50%;
    float: left;
    position: relative;
    cursor: pointer;
    color: #000;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.player .source-ctrl-container:hover {
    background: rgb(246,246,246); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%, rgba(225,225,225,1) 49%, rgba(241,241,241,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(246,246,246,1)), color-stop(49%,rgba(225,225,225,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 10px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 18px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 18px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ffff00;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #666;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}</style>

<h1>
Audio player Mp3</h1>
<p>
with play, pause, volume. Edited by. Myscript2010 Cibeber Cimahi</p>
<p>
Mootools powered.</p>
<audio id="player">
<source src="https://sites.google.com/site/pelajaranku1/mp3ku/bob-marley-Mys2010.mp3" type="audio/ogg">
<source src="https://sites.google.com/site/pelajaranku1/mp3ku/bob-marley-Mys2010.mp3" type="audio/mpeg">
</audio>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'>
</script>

<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'>
</script>

<script>
"use strict";
/**
 * Requires mootools core and mootools more Slider
 */
var Player = function(audio_element, options) {
    this.audio_obj = document.id(audio_element);
    this.options = options;
    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };
    this.render = function() {

        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);
        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );
        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );
        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };
    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };
    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };
    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }

        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;

        return time;
    }
    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };
}
var player = new Player('player');
player.init();
</script>

Edited by. Myscript2010
Sources by. Abidibo on Codepen

DEMOSHOW

See also code after modificationCode Here Audio Player Mp3

Category: Audio Player Mp3

Mobile Menu Design

Memasang kode Mobile Menu Design
Kode ini menampilkan gambar berbentuk handphon yang berisikan front menu serta rear menu.
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

@import url(https://fonts.googleapis.com/css?family=Lato);
* {
  margin: 0;
  padding: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
html {
  line-height: 1.2;
}
body {
  background-color: #fff;
  color: #333;
  font-family: "Lato", arial, sans-serif;
  font-size: 16px;
}
.mobile {
  background-color: #19b698;
  border: 0 solid #333;
  border-width: 50px 15px;
  border-radius: 12px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6);
  margin: 20px auto;
  max-width: 300px;
  height: 560px;
  overflow: hidden;
  position: relative;
}
header {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  height: 50px;
}
.logo {
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  padding: 0 0 0 20px;
  text-transform: capitalize;
}
/* menu button */
.menuBtn {
  height: 30px;
  width: 30px;
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 101;
}
.menuBtn > span {
  background-color: #fff;
  border-radius: 1px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -15px;
  -webkit-transition: height 100ms;
  transition: height 100ms;
}
.menuBtn > span:after,
.menuBtn > span:before {
  content: '';
  background-color: #fff;
  border-radius: 1px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}
.menuBtn > span:after {
  top: -7px;
}
.menuBtn > span:before {
  bottom: -7px;
}
.menuBtn.act > span {
  height: 0;
}
.menuBtn.act > span:after,
.menuBtn.act > span:before {
  background-color: #008877;
  top: 1px;
}
.menuBtn.act > span:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.menuBtn.act > span:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
/* main menu block */
.mainMenu {
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  display: table;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
          transform: scale(0);
}
.mainMenu.act {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.mainMenu.act ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.mainMenu ul {
  display: table-cell;
  vertical-align: middle;
}
.mainMenu li {
  padding: 8px 0;
  -webkit-transition: all 400ms 510ms;
  transition: all 400ms 510ms;
  opacity: 0;
}
.mainMenu li:nth-child(odd) {
  -webkit-transform: translateX(30%);
          transform: translateX(30%);
}
.mainMenu li:nth-child(even) {
  -webkit-transform: translateX(-30%);
          transform: translateX(-30%);
}
.mainMenu li:last-child {
  -webkit-transform: none;
          transform: none;
}
.mainMenu a {
  color: #19b698;
  display: inline-block;
  font-size: 18px;
}
.mainMenu a.suBtn {
  color: #fff;
}
/* sign up button */
.suBtn {
  background-color: #19b698;
  border-radius: 5px;
  padding: 10px 20px;
}

<div class="mobile">
 <div class="mainContainer">
  <header>
   <a href="#" class="logo">logo</a>
   <a href="#" class="menuBtn">
    <span class="lines"></span>
   </a>
   <nav class="mainMenu">
    <ul>
     <li>
     <a href="Link Title">Intro</a>
     </li>
     <li>
     <a href="Link Title">Services</a>
     </li>
     <li>
     <a href="Link Title">Team</a>
     </li>
     <li>
     <a href="Link Title">Pricing</a>
     </li>
     <li>
     <a href="Link Title" class="suBtn">Sing Up</a>
     </li>
    </ul>
   </nav>
  </header>
  <div class="container">
  </div>
  <footer>
  </footer>
 </div>
</div>

<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>
$(document).ready(function () {
    $('.menuBtn').click(function () {
        $(this).toggleClass('act');
        if ($(this).hasClass('act')) {
            $('.mainMenu').addClass('act');
        } else {
            $('.mainMenu').removeClass('act');
        }
    });
});
//# sourceURL=pen.js
</script>

Edited by. Myscript2010
Sources by. Vijayakumar on Codepen

DEMOSHOW

Category: Mobile Menu Design

Mobile menu, CSS only

Memasang kode Mobile menu, CSS only
Kode ini menampilkan gambar berbentuk handphon yang berisikan menu serta box search.
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

@import url("http://fonts.googleapis.com/css?family=Lato");

*,
*:before,
*:after { /* Slow, yes I know :) */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Lato, Sans-serif;
  font-size: 12px;
  background: #353138;
  background: -moz-radial-gradient(center, ellipse cover,  #353138 0%, #1a181c 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #353138), color-stop(100%, #1a181c));
  background: -webkit-radial-gradient(center, ellipse cover,  #353138 0%,#1a181c 100%);
  background: -o-radial-gradient(center, ellipse cover,  #353138 0%,#1a181c 100%);
  background: -ms-radial-gradient(center, ellipse cover,  #353138 0%,#1a181c 100%);
  background: radial-gradient(ellipse at center,  #353138 0%,#1a181c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#353138', endColorstr='#1a181c', GradientType=1);
}
.container {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  -ms-perspective: 1500px;
  perspective: 1500px;
  position: relative;
}
.toggle {
  color: #fff;
  display: inline-block;
  line-height: 16px;
  font-size: 20px;
  float: left;
}
.menu {
  margin: 100px auto;
  position: relative;
  background: #62278d;
  background: -moz-linear-gradient(top,  #62278d 0%, #2cc09b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b));
  background: -webkit-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: -o-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: -ms-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: linear-gradient(to bottom,  #62278d 0%,#2cc09b 100%);
  width: 300px;
  border-width: 20px 0;
  border-style: solid;
  border-color: #fff;
  color: #fff;
  height: 540px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  -webkit-box-shadow: 0 0 50px 0 #444;
     -moz-box-shadow: 0 0 50px 0 #444;
          box-shadow: 0 0 50px 0 #444;
}
input.toggle:checked ~ .menu {
  -webkit-transform: translateY(-200px) translateZ(-150px) rotateX(45deg) rotateZ(45deg);
     -moz-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
      -ms-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
       -o-transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
          transform: translateY(-150px) rotateX(45deg) rotateZ(45deg);
}
.menu:before {
  content: '';
  position: absolute;
  height: 30px;
  width: 300px;
  top: 520px;
  left: 0px;
  -webkit-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
     -moz-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
      -ms-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
       -o-transform: rotateX(90deg) translateY(-15px) translateZ(15px);
          transform: rotateX(90deg) translateY(-15px) translateZ(15px);
  background: #fff;
  pointer-events: none;
}
.menu:after {
  content: '';
  position: absolute;
  height: 540px;
  width: 30px;
  top: -20px;
  right: -30px;
  -webkit-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
     -moz-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
      -ms-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
       -o-transform: rotateY(90deg) translateZ(-15px) translateX(15px);
          transform: rotateY(90deg) translateZ(-15px) translateX(15px);
  border-width: 20px 0;
  border-style: solid;
  border-color: #fff;
  background: #62278d;
  background: -moz-linear-gradient(top,  #62278d 0%, #2cc09b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62278d), color-stop(100%,#2cc09b));
  background: -webkit-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: -o-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: -ms-linear-gradient(top,  #62278d 0%,#2cc09b 100%);
  background: linear-gradient(to bottom,  #62278d 0%,#2cc09b 100%);
  pointer-events: none;
}
.menu .top {
  padding: 15px 15px 15px 20px;
  width: 100%;
}
.menu .top .search {
  position: relative;
  display: inline-block;
}
.menu .top .search input {
  background-color: transparent;
  -webkit-transition: all 100ms ease-in-out;
     -moz-transition: all 100ms ease-in-out;
      -ms-transition: all 100ms ease-in-out;
       -o-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  color: transparent;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 10px 30px 10px 15px;
  outline: 0 none;
  width: 60px;
  height: 40px;
  position: relative;
  -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
      -ms-transform: translateZ(1px);
       -o-transform: translateZ(1px);
          transform: translateZ(1px);
  z-index: 2;
}
.menu .top .search input:focus {
  width: 200px;
  color: #fff;
}
.menu .top .search:after {
  content: '\f002';
  font-family: 'FontAwesome';
  font-size: 16px;
  position: absolute;
  color: #fff;
  top: 11px;
  right: 18px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
      -ms-transform: translateZ(1px);
       -o-transform: translateZ(1px);
          transform: translateZ(1px);
  z-index: 1;
}
.menu .top .exit {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  outline: 0 none;
  float: right;
  cursor: pointer;
  -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
      -ms-transform: translateZ(1px);
       -o-transform: translateZ(1px);
          transform: translateZ(1px);
  z-index: 2;
}
.menu .top .exit:focus,
.menu .top .exit:active {
  border: 1px solid #fff;
  border-radius: 20px;
}
.menu .top .exit:before {
  content: '';
  pointer-events: none;
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: 14px;
  left: -6px;
  border-width: 0 2px 0 0;
  border-style: solid;
  border-color: #fff;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  z-index: 1;
}
.menu .top .exit:after {
  content: '';
  pointer-events: none;
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: -6px;
  left: -6px; 
  border-width: 0 2px 0 0;
  border-style: solid;
  border-color: #fff;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}
.menu .middle {
  position: relative;
  min-height: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.menu .middle li {
  margin: 0;
  padding: 15px 0 15px 40px;
  outline: 0 none;
  position: relative;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(1px);
     -moz-transform: translateZ(1px);
      -ms-transform: translateZ(1px);
       -o-transform: translateZ(1px);
          transform: translateZ(1px);
  z-index: 1;
}
.menu .middle li:hover {
  -webkit-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
     -moz-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
          box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.menu .middle li:hover:before,
.menu .middle li:focus:before {
  content: '\f0da';
  font-family: 'FontAwesome';
  font-size: 16px;
  position: absolute;
  top: 15px;
  left: 20px;
}
.menu .middle li:focus,
.menu .middle li:focus:after {
  color: #3EAC9E;
  background-color: #62278d;
}
.menu .middle li .fa {
  padding-right: 15px;
}
.menu .middle li:focus:after,
.menu .middle li:hover:after {
  content: '';
  position: absolute;
  height: 48px;
  width: 30px;
  top: 0px;
  right: -30px;
  -webkit-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
     -moz-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
      -ms-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
       -o-transform: rotateY(90deg) translateZ(-14px) translateX(15px);
          transform: rotateY(90deg) translateZ(-14px) translateX(15px);
  pointer-events: none;
  
}
.menu .middle li:hover:after {
  -webkit-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
     -moz-box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
          box-shadow: inset 0 0 80px 0 rgba(255, 255, 255, 0.3);
}
.menu .bottom {
  height: 40px;
}
.menu-back {
  position: absolute;
  background: transparent;
  top: -20px;
  left: 0;
  width: 300px;
  height: 540px;
  -webkit-transform: translateZ(-29px);
     -moz-transform: translateZ(-29px);
      -ms-transform: translateZ(-29px);
       -o-transform: translateZ(-29px);
          transform: translateZ(-29px);
  -webkit-box-shadow: 100px 100px 50px -30px #111;
     -moz-box-shadow: 100px 100px 50px -30px #111;
          box-shadow: 100px 100px 50px -30px #111;
  z-index: 0;
}
.glass-reflection {
  position: absolute;
  -webkit-transition: box-shadow 1s;
     -moz-transition: box-shadow 1s;
      -ms-transition: box-shadow 1s;
       -o-transition: box-shadow 1s;
          transition: box-shadow 1s;
  -webkit-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
     -moz-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
      -ms-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
       -o-transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
          transform: rotateZ(-1deg) translateZ(1px) skewY(60deg);
  
  -webkit-box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
     -moz-box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
          box-shadow: inset 0px -40px 0px -50px rgba(255, 255, 255, 0.0);
  border-radius: 200px 0 20px 0 ;
  top: 85px;
  left: 95px;
  width: 200px;
  height: 100px;
  background-color: transparent;
}
input.toggle:checked ~ .menu .glass-reflection {
  -webkit-box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
     -moz-box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
          box-shadow: inset 0px -40px 150px -50px rgba(255, 255, 255, 0.15);
}

<div class="container">
  <input type="checkbox" class="toggle" id="toggle" checked="checked" /><label class="toggle" for="toggle"> Toggle tilt</label>
  <div class="menu">
    <div class="top">
      <span class="search">
        <input type="text">
      </span>
      <a class="exit" href="#" tabindex="0"></a>
    </div>
    <ul class="middle">
      <li tabindex="0"><i class="fa fa-calendar"></i>Calendar</li>
      <li tabindex="0"><i class="fa fa-camera"></i>Photos</li>
      <li tabindex="0"><i class="fa fa-check-square-o"></i>Tasks</li>
      <li tabindex="0"><i class="fa fa-map-marker"></i>Places</li>
      <li tabindex="0"><i class="fa fa-codepen"></i>Codepen</li>
      <li tabindex="0"><i class="fa fa-dribbble"></i>Dribbble</li>
      <li tabindex="0"><i class="fa fa-user"></i>User account</li>
      <li tabindex="0"><i class="fa fa-cogs"></i>Settings</li>
    </ul>
    <div class="bottom"></div>
    <div class="menu-back"></div>
    <div class="glass-reflection"></div>
  </div>
</div>

Edited by. Myscript2010
Sources by. poppe1219 on Codepen

DEMOSHOW

Category: CSS only, Mobile menu

Mys2010 on Codepen

Animated Popup Android Style

Image with the background and text

Before modification YouTube Ambilight Prototype

YouTube Ambilight Prototype

Audio Player Mp3 Modification

Audio Player Mp3

Mobile Menu Design

Mobile menu, CSS only

POPULAR

Blog Archive