04/09/16 | Mys2010 on Codepen

HomeArchives for 04/09/16

Transparent Background

Memasang kode Transparent Background
Untuk menerapkan kode tersebut 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="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: 0;
  width: 100%;
  background: #333;
  border-bottom: 3px solid #dad;
}

/* 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;
}
 /*end*/

body
{
  width: 95%; 
  height:100%;
  margin:0em 5%;
  background-color:#dad;
  background-image: url("http://vignette3.wikia.nocookie.net/scarfheroes/images/c/c3/Fancy-Swirl-Pattern-Grey-White-PNG.png/revision/20151009044909");
  background-position: center bottom;
  animation: animatedBackground 30s linear infinite;
  /* Safari and Chrome: */
   
-webkit-animation: animatedBackground 30s linear infinite;
}


@keyframes animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
@-webkit-keyframes  animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
#content
{
  position:fixed;
  top:5em;
  height:1em;
  width:19em;
  background-color:rgba(1,1,1,0.5);
  color:white;
  padding:2em;
  border-bottom-right-radius: 5em;
  -webkit-border-bottom-right-radius: 5em;
   border-top-left-radius: 5em;
  -webkit-border-top-left-radius: 5em;
}
/*end*/

.blurred-bg.tinted {
  background: rgba(4,000,000, .4);
   
}
      .box {
  width: 500px;
  height: 300px;
  left: -webkit-calc( 50% - 250px );
  top: 20%;
  position: absolute;
  border-radius: 5px;
  -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  transition: box-shadow .3s ease;
}
.box:active {
  cursor: move;
  -moz-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}
.box .content {
  margin: auto;
}

h1, h2, a, p {
  color: white;
  font-weight: 100;
}
.tinted h1, .tinted h2, .tinted a, .tinted p {
  color: black;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

h2 {
  font-size: 14px;
}

p {
  margin: 20px;
}
p.related {
  text-transform: uppercase;
  font-weight: 700;
  color: #444;
}
p.related a {
  font-weight: 700;
  text-decoration: none;
}
p.related a:hover {
  text-decoration: underline;
}</style>

<div id="box1" class="box blurred-bg tinted">
<div class="content">
<h1>
Transparent Background</h1>
<h2>
Edited By <a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" rel="follow" target="_blank">Myscript2010</a></h2>
<p>
Drag this box to move around</p>
<p class="related">
See also: <a href="http://codepen.io/Myscript2010/pens/popular/" target="_blank">Code in the edit codepen</a></p>
</div>
</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/laguhiburan/file/Transparent-Background-with-background-running-Mys2010.css"title="Myscript2010s"> 
<h2>
DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html" target="_blank"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script> 
<script>$(function () {
    $('.box').draggable();
}); 
</script>

Blurred Background by. Rian Ariona
Background Example Code by. Vollnixx
Design code is edited by. by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Transparent-Background

Category: Transparent Background with background running

CSS3 Animated Clouds with Glass Quote

Memasang kode CSS3 Animated Clouds with Glass Quote
Code ini menggunakan CSS dan HTML serta Js. 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="Mys2010-styles">
body {);color:#111;height:100%;overflow:hidden;}
body {
  background: #f0f;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}
 /*end*/

.clouds_one {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
.clouds_two {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
.clouds_three {
  background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}
@-webkit-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}
@-webkit-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}
@-moz-keyframes moon {
  0% {
    opacity: 0;
    left: -200% -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1);
    left: 0% bottom: 250px;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    bottom: 500px;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
main {
  margin: 70px auto;
  position: relative;
  padding: -60px 5px;
   background: rgba(4,111,111, .4);
  font-size: 20px;
  font-family: 'agency fb', serif;
  line-height: -1.5;
  border-radius: 40px;
  width: 50%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}
main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  z-index: -1;
}
blockquote {
  font-style: italic;
}
cite {
  font-style: normal;
  font-size: 20px;
}

<body>
<div class="sky">
<div class="moon">
</div>
<div class="clouds_one">
</div>
<div class="clouds_two">
</div>
<div class="clouds_three">
</div>
</div>

<main>
<blockquote>
<center>
About Me</center>
<cite>
&mdash;" Hey there, I MyScript 2010. 
&mdash; Thank you for visiting my site!
&mdash; I’m a stay-at-home dad
&mdash; my address in Cibeber cimahi Bandung West Java, 
&mdash; hopefully article available on the Website can be useful and add to knowledge."</cite>
&mdash; <b><font size="5" color="#111"face="vivaldi"> Sulaeman Mys2010</b> 
</blockquote>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://LINK DOWNLOAD "title="Myscript2010s"> 
<h2>
DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>

CSS3 Animated Clouds by. Montana Flynn
Frosted Glass Quote Code by. Joni Trythall
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Clouds Glass Quote

Category: CSS3 Animated Clouds with Glass Quote

Mys2010 on Codepen

Transparent Background

CSS3 Animated Clouds with Glass Quote

POPULAR

Blog Archive