Skip to content

Instantly share code, notes, and snippets.

@Myscript2010

Myscript2010/CSS

Last active April 16, 2017 05:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Myscript2010/8d111f18fcec48d6bcf308338ba6c81f to your computer and use it in GitHub Desktop.
Save Myscript2010/8d111f18fcec48d6bcf308338ba6c81f to your computer and use it in GitHub Desktop.
Download ZIP
White Logo CSS
Raw
CSS
<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
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:-2px;
width: 100%;
text-align: center;
font-size: 6px;
background:#483D8B;
border-bottom:1px solid #f0f;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:80px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size: 11px;
background:#483D8B;
border-bottom:1px solid #f0f;
}
h2 {
padding:15px;
background: -webkit-linear-gradient(transparent 10%, #483D8B;50%, transparent 90%);
background: linear-gradient(transparent 10%, #222 50%, transparent 90%);
-webkit-animation: shadow 1s ease-in-out infinite;
animation: shadow 1s ease-in-out infinite;
}
/*Text Bawah1*/
M-2010, #teks, #posisi, #dibawah, span {
font: 900 15vw Raleway;
position: relative;
display: inline-block;
}
#M-2010, #teks, #posisi, #dibawah {
position: absolute;
font-size: 11px;
margin: 2px
}
#M-2010, #teks div {
text-decoration: underline;
cursor: pointer
}
#teks, #posisi {
text-align: right;
right: 50px;
}
#teks, #dibawah {
text-align: left;
left: 50px;
}
#dibawah, #posisi {
bottom:41px;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
0% {
text-shadow: 0 0 2px #B0E0E6 ,
0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 ,
0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 ,
0 0 40px #B0E0E6, 0 0 50px #B0E0E6 ,
0 0 80px #B0E0E6;
}
50% {
text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
0 -10px 2px rgba(255, 0, 0, 0.8);
}
100% {
text-shadow: 0 0 2px #800080 ,
0 0 8px #800080 , 0 0 10px #800080 ,
0 0 20px #800080 , 0 0 30px #800080 ,
0 0 40px #800080 , 0 0 50px #800080 ,
0 0 80px #800080 ;
}
}
/*end*/
.shadow-atas:after {
content: " ";
box-shadow: 0 0 200px 108px #fff;
}
.shadow-atas:before {
content: " ";
box-shadow: 0 0 200px 110px #809FFE;
}
#M2010-shadow-atas {
margin:-150px;
box-shadow: 0 0 150px 80px #D580FE;
}
.shadow-bawah:before,.shadow-bawah:after {
z-index:-1;
position:absolute;
content: " ";
bottom:25px;
left:10px;
width:50%;
max-width:110px;
box-shadow: 0 0 200px 90px #809FFE;
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
transform:rotate(-8deg);
}
.shadow-bawah:after {
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
transform:rotate(8deg);
right:10px;
left:auto;
}
body {
background-color:#47006B;
}
figure {
position: absolute;
display: block;
width: 520px;
top:27%;
left: 41%;
margin: 0 0 0 -150px;
}
figure:before {
content:"";
position: absolute;
display: block;
width: 132%;
height: 134%;
top: -15%;
left: -16%;
background-color:#000;
z-index: -1;
box-shadow:
inset 6px 10px .5em #660099,
inset .1em 0px .9em #660099,
inset -0.1em 6px .1em #660099,
0 .1em .2em #660099;
background-image: -moz-radial-gradient(50% 50%, circle farthest-corner,#000, #f00 100%);
background-image: -webkit-radial-gradient(50% 50%, circle farthest-corner,#000, #660099 100%);
background-image: -o-radial-gradient(50% 50%, circle farthest-corner,#000, #000 100%);
background-image: -ms-radial-gradient(50% 50%, circle farthest-corner,#000, #000 100%);
background-image: radial-gradient(50% 50%, circle farthest-corner,#000, #000 100%)
}
img {
background-color: rgba(255, 0, 0, 0.1);
position: relative;
display: block;
width: 88%;
height:197px;
padding: 6%;
box-shadow:
inset 6px 10px .5em #660099,
inset .1em 0px .9em #660099,
inset -0.1em 6px .1em #660099,
0 .1em .2em #660099;
}
#wrapper{
width:490px;
margin-left:-11px;
margin-right:0px;
margin-top:9px;
padding:15px;
width: 500px;
height: 260px;
padding: 20px;
border: 2px solid #D580FE;
border-radius: 8px;
-webkit-box-shadow: 0px 1px 71px 15px #660099;
-moz-box-shadow: 0px 1px 71px 15px rgba(0, 0, 0, 0.5);
}
img
{box-shadow:
0 0 200px 1px #fff;
}
</style>
Raw
HTML
<div align="center" style="margin-top:110px">
<div id="M2010-shadow-atas">
</div>
<div class="shadow-atas">
</div>
<div class="shadow-bawah">
</div>
<figure>
<div id="wrapper">
<img src="https://sites.google.com/site/sule62001/sule2001code/W-M-2010.png" />
</figure>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2017/01/white-logo.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a> </h2>
</a>
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family:arial;font-size:11px; color:#80C8FE;"> EDITED BY. <a href="https://sites.google.com/site/sule62001/sule2001code/White-Logo-Audio-Mp3-M2010.css"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a>
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="https://codepen.io/Myscript2010/pen/oBZMbb"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; CODEPEN </a>
</div>
<h2>
<audio id="player" preload="auto">
<source src="https://sites.google.com/site/sulelagu042/l/Instru-M2010.mp3">
</source></h2>
</a></div>
</div>
Raw
White Logo Audio
<link Audio mp3>
<link rel='stylesheet prefetch'href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script src="https://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js">
</script>
<script>$(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mejsPlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mejs-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mejs:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mejsPlayNext(currentPlayer) {
if ($('.mejs-list li.current').length > 0) {
var current_item = $('.mejs-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mejs-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment