Mys2010 on Codepen

HomeAll Tutorials

CSS-only responsive buttons

Memasang kode CSS Responsive Buttons
Kode ini menampilkan Tombol Menu Horizontal. 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

Penjelasan :
Terapkan Link title yang diwarnai, tambahkan teks animasi jika diperlukan. Copy code berikut pastekan dibawah code : .navigation li:last-child{margin-right:0;}}</style>

<style class="Text Animasi-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>

<style class="text-animated-styles">
.intro-text h2 {
   font-size: 70px;
   font-weight: 200;
   width: 100%;
   overflow: hidden;
   text-transform: uppercase;
   padding: 0;
   margin: 0;
   position: absolute;
   top: 0;
   left: 0;
   letter-spacing: 14px;
   text-align: center;
   opacity: 0;
}

.intro-text h2,
.intro-text h2 > span {
   height: 100%;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -moz-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

.intro-text h2 > span {
   margin: 0 15px;
}

.intro-text h2 > span > span {
   display: inline-block;
   -webkit-perspective: 1000px;
   -moz-perspective: 1000px;
   perspective: 1000px;
   -webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
}

.intro-text h2 > span > span > span {
   display: inline-block;
   color: hsla(0,0%,0%,0);
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   -webkit-animation: TextSequence 5.2s linear forwards;
   -moz-animation: TextSequence 5.2s linear forwards;
   animation: TextSequence 5.2s linear forwards;
}

.intro-text h2:nth-child(2) > span > span > span {
   -webkit-animation-delay: 5s;
   -moz-animation-delay: 5s;
   animation-delay: 5s;
}

.intro-text h2:nth-child(3) > span > span > span {
   -webkit-animation-delay: 10s;
   -moz-animation-delay: 10s;
   animation-delay: 10s;
}

.intro-text h2:nth-child(4) > span > span > span {
   -webkit-animation-delay: 15s;
   -moz-animation-delay: 15s;
   animation-delay: 15s;
}

.intro-text h2:nth-child(5) > span > span > span {
   font-size: 150px;
   -webkit-animation-delay: 21s;
   -moz-animation-delay: 21s;
   animation-delay: 21s;
   -webkit-animation-duration: 8s;
   -moz-animation-duration: 8s;
   animation-duration: 8s;
}

.intro-text h2:nth-child(6) > span > span > span {
   -webkit-animation-delay: 30s;
   -moz-animation-delay: 30s;
   animation-delay: 30s;
}

.intro-text h2:nth-child(7) > span > span > span {
   -webkit-animation-delay: 34s;
   -moz-animation-delay: 34s;
   animation-delay: 34s;
}

@-webkit-keyframes TextSequence {
   0% {
       text-shadow: 0 0 50px #fff;
       letter-spacing: 80px;
       opacity: 0;
       -webkit-transform: rotateY(-90deg);
   }
   50% {
       text-shadow: 0 0 1px #fff;
       letter-spacing: 14px;
       opacity: 0.8;
       -webkit-transform: rotateY(0deg);
   }
   85% {
       text-shadow: 0 0 1px #fff;
       opacity: 0.8;
       -webkit-transform: rotateY(0deg) translateZ(100px);
   }
   100% {
       text-shadow: 0 0 10px #fff;
       opacity: 0;
       -webkit-transform: translateZ(130px);
       pointer-events: none;
   }
}

@-moz-keyframes TextSequence {
   0% {
       text-shadow: 0 0 50px #fff;
       letter-spacing: 80px;
       opacity: 0.2;
       -moz-transform: rotateY(-90deg);
   }
   50% {
       text-shadow: 0 0 1px #fff;
       letter-spacing: 14px;
       opacity: 0.8;
       -moz-transform: rotateY(0deg);
   }
   85% {
       text-shadow: 0 0 1px #fff;
       opacity: 0.8;
       -moz-transform: rotateY(0deg) translateZ(100px);
   }
   100% {
       text-shadow: 0 0 10px #fff;
       opacity: 0;
       -moz-transform: translateZ(130px);
       pointer-events: none;
   }
}

@keyframes TextSequence {
   0% {
       text-shadow: 0 0 50px #fff;
       letter-spacing: 80px;
       opacity: 0.2;
       transform: rotateY(-90deg);
   }
   50% {
       text-shadow: 0 0 1px #fff;
       letter-spacing: 14px;
       opacity: 0.8;
       transform: rotateY(0deg);
   }
   85% {
       text-shadow: 0 0 1px #fff;
       opacity: 0.8;
       transform: rotateY(0deg) translateZ(100px);
   }
   100% {
       text-shadow: 0 0 10px #fff;
       opacity: 0;
       transform: translateZ(130px);
       pointer-events: none;
   }
}

.intro-text h2:nth-child(8) > span > span > span {
   font-size: 30px;
   -webkit-animation: FadeIn 4s linear 40s forwards;
   -moz-animation: FadeIn 4s linear 40s forwards;
   animation: FadeIn 4s linear 40s forwards;
}

@-webkit-keyframes FadeIn {
   0% {
       opacity: 0;
       text-shadow: 0 0 50px #fff;
   }
   100% {
       opacity: 0.8;
       text-shadow: 0 0 1px #fff;
   }
}

@-moz-keyframes FadeIn {
   0% {
       opacity: 0;
       text-shadow: 0 0 50px #fff;
   }
   100% {
       opacity: 0.8;
       text-shadow: 0 0 1px #fff;
   }
}

@keyframes FadeIn {
   0% {
       opacity: 0;

       text-shadow: 0 0 50px #fff;
   }
   100% {
       opacity: 0.8;
       text-shadow: 0 0 1px #fff;
   }
}

/* Bold Text */
.intro-text h2:first-child .word3,
.intro-text h2:nth-child(2) .word2,
.intro-text h2:nth-child(4) .word2 {
   font-weight: 600;
}</style>
<div class="intro-text" id="intro-text">
               <h2>
WELCOME</h2>
<h2>
MYSCRIPT2010</h2>
<h2>
LEARN EDITING </h2>
<h2>
SCRIPT CSS HTML </h2>
<h2>
CODEPEN</h2>
<h2>
EDITED BY.</h2>
<h2>
MYSCRIPT2010</h2>
<h2>
COPYRIGHT2015 CIBEBER CIMAHI</h2>
</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 src='http://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
<script>
$(document).ready(function () {
    $('#intro-text > h2').css('opacity', 1).lettering('words').children('span').lettering().children('span').lettering();
});
//# sourceURL=pen.js
</script>

Edited by. Myscript2010
Sources by. Kevadamson On Codepen

DEMOSHOW

Category: CSS-only responsive buttons

Button Share CSS3

Memasang kode Button Share CSS3
Kode ini menampilkan Tombol Link Hover. 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

Penjelasan :
Jika ingin menambahkan code teks animasi, copy code berikut :

Pastekan dibawah code : z-index: -1; } Lalu copy code berikut :

Pastekan dibawah code : <i class="fa fa-google-plus fa-2x"></i></a></i>
</ul>
</div>
</div>

Kemudian klik pratinjau untuk melihat hasil dan klik publish selesai

Edited by. Myscript2010
Sources by. Michelle Ortner on Codepen

DEMOSHOW

Category: Button Share CSS3

Pure CSS Dancing Tree

Memasang kode Pure CSS Dancing Tree
Kode ini menampilkan Gambar animasi Pohon. 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

Sources by. Codepen
Edited by. Myscript2010

DEMOSHOW

Category: Pure CSS Dancing Tree

Fish flocking simulation

Memasang kode Fish flocking simulation
Kode ini menampilkan animasi ikan berkelompok. 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

Edited by. Myscript2010
Sources by. P.S Amundsen

DEMOSHOW

Category: Fish flocking simulation

Animated Cube Slider

Memasang kode Animated Cube Slider
Kode ini menampilkan gambar auto slide. 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

<div class="title">
<h1>
Animated Cube Slider</h1>
<p>
CSS Only</p>
</div>
<div class="slider">
<div class="container">
<div class="slide x">
</div>
<div class="slide y">
</div>
<div class="slide z">
</div>
</div>
<div class="shadow">
</div>
</div>
<p class="credit">
by <span><a href="http://Your Link.com" target="_blank">Your Text</a></span></p>

Penjelasan : Edit kode yang diwarnai

Edited by. Myscript2010
Sources by. Alberto Hartzet on Codepen

DEMOSHOW

Category: Animated Cube Slider

Deep Sea Creature

Memasang kode Deep Sea Creature CSS3
Kode ini menampilkan Gambar animasi. 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="cp-pen-styles"> 
body {
        background: #000;
        overflow: hidden;
}
canvas {
        background: url(http://media.giphy.com/media/iEygmp20xiQE0/giphy.gif) 0 0 no-repeat;
        background-size: 100% 100%;
}
canvas,
img {
        display: block;
        border: 1px solid black;

}</style>



<center>
<canvas id='c'></canvas>
<img id="img">

Sources by. Codepen
Edited by. Myscript2010

DEMOSHOW

If you want to directly copy  and  paste you can Download  Deep Sea Creature Full

Category: Deep Sea Creature

Lighting CSS Animated Preloader

Memasang kode Lighting CSS3
Kode ini menampilkan Text yang disinari cahaya. 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>
body {
    margin: 0;
    padding: 0;
    background: rgb(0, 0, 0);
    font-family: "Times New Roman", Georgia, Serif;
}
.wrapper {
  position: relative;
  width: 540px;
  margin: 0 auto;
}

p {
  margin: 0;
  padding: 0;
  font-family: ‘Arial Narrow’, sans-serif;
  font-size: 98px;
  letter-spacing: 1px;
}

.text {
    position: absolute;
    top: 40px;
    left: 100px;
    margin: 0;
    padding: 0;
    color: rgb(0, 0, 0);
    background: transparent;
    text-shadow: 0px 10px 10px rgb(0, 0, 0);
    z-index: 1;
    -webkit-animation: shadow 6.0s ease-in-out infinite;
    animation: shadow 6.0s ease-in-out infinite;
}

.light {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 140px;
    height: 140px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    border-radius: 100px;
    z-index: 0;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
     box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: light 6.0s ease-in-out infinite;
    animation: light 6.0s ease-in-out infinite;
}

.light.two {
    z-index: 2;
    opacity: 0.7;
}

@-webkit-keyframes light {
    0% {

        left: 45px;
    }

    50% {
        left: 335px;
    }

    100% {
        left: 45px;
    }

}

@keyframes light {
      0% {
        left: 45px;
    }
    50% {
        left: 335px;
    }
    100% {
        left: 45px;
    }
}

@-webkit-keyframes shadow {
    0% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
    50% {
        text-shadow: 9px 2px 5px rgb(0, 0, 0);
    }
    100% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
}
@keyframes shadow {
    0% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
    50% {
        text-shadow: 9px 2px 5px rgb(0, 0, 0);
    }
    100% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
}
</style>

<div class="wrapper">
  <div class="text">
    <p>Your Text</p>
    </div>

     <div class="light"></div>
    <div class="light two"></div></div>

Animated code by. Christofer Vilander
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Animated Preloader

Category: Lighting CSS Animated Preloader

CSS-only responsive buttons

Button Share CSS3

Pure CSS Dancing Tree

Fish flocking simulation

Animated Cube Slider

Deep Sea Creature

Lighting CSS Animated Preloader

POPULAR

Blog Archive