Membuat Efek 3D Membuka Pada Teks Dengan CSS

Membuat Efek 3D Membuka Pada Teks Dengan CSS - Dengan menggunakan fungsi pseudo-elemen, CSS transformasi dan transisi, kita akan membuat efek 3D (3 Dimensi) dengan sangat menarik seperti yang akan saya bagikan berikut ini, membuat efek 3 Dimensi membuka pada teks. Dan efek membuka pada teks ini cocok untuk semua browser karena adanya penggunaan transisi pseudo-elemen khususnya untuk Chrome dan Firefox

Namun saya teidak bisa menerapkannya didalam blog ini dikarenakna kode CSS yang digunakan untuk membuat efek 3D membuka pada teks ini lumayan banyak, sedangkan di template blog ini sendiri sudah banyak penggunaan kode CSSnya, apalagi kode HTML juga lumayan. Namun meski menggunakan kode CSS yang lumayan banyak tidak akan mempengaruhi loading blog dan saya sudah membuat serta memasangnya di sebuah blog yang sementara ini khusus hanya untuk menampilkan DEMO dari efek 3 dimensi membuka pada teks ini. Silahkan klik tombol berikut ini untuk melihat DEMOnya langsung

Klik DEMO Disini

Sudah melihat DEMOnya? Mari kita lanjutkan... Efek membuka pada teks dari Tympanus ini bukan milik saya dan melalui artikel ini saya hanya memberikan infonya saja sedangkan untuk penerapannya, silahkan dikembangkan sendiri :)

Jika Anda belum melihat DEMOnya, saya yakin Anda tidak akan tahu seperti apa tampilan dari efek membuka pada teks ini dan jika Anda sudah melihat DEMOnya, saya juga akan berpikir "Lalu akan saya pasang dimana?" Karena melihat tampilan DEMOnya saja sudah sangat menarik namun tetap bingung untuk memasangnya hihihii..

Sekali lagi, kode CSS untuk efek 3D pada teks membuka ini saya sesuaikan dengan halaman DEMO yang telah saya buat. Jika Anda ingin menampilkannya secara per kalimat dalam bentuk minimal atau sesuai dengan keinginan Anda, silahkan dikembangkan sendiri

CSS

*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #222;
font-weight: 300;
color: #f0f0f0;
font-family: 'Lato', Arial, sans-serif;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
a {
color: #e74d3c;
text-decoration: none;
outline: none;
}

a:hover, a:focus {
color: #fff;
}
.codrops-header {
font-size: 14px;
padding: 20px;
text-align: left;
}
.codrops-header h1 {
font-size: 38px;
line-height: 36px;
padding: 0 0 15px;
font-weight: 400;
color: #ea6657;
margin: 0;
}
.codrops-header a {
display: block;
margin: 10px 0;
font-weight: 400;
}
.grid li .codrops-header a span {
color: #e74d3c;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

.grid li .codrops-header a:hover span {
color: #fff;
}
.codrops-icon:before {
font-family: 'codropsicons';
margin: 0 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
.related {
clear: both;
text-align: center;
font-size: 2em;
padding: 1em 0;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
.grid {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.grid li {
position: relative;
float: left;
font-size: 12em;
line-height: 1.5;
max-height: 290px;
text-align: center;
width: 16.6666667%;
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
}
.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: hsla(0, 0%, 0%, 0.6);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 550px;
-ms-perspective: 550px;
perspective: 550px;
z-index: 1;
}
.grid li span:before,
.grid li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
-webkit-transition: all .3s;
transition: all .3s;
}
.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
.ot-letter-left { background: #e74d3c; }
.ot-letter-left span { text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c; }
.ot-letter-left span:after { color: #e74d3c; }
.ot-letter-left:hover span:after { color: #ea6253; }
.ot-letter-right { background: #ea6657; }
.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657; }
.ot-letter-right span:after { color: #ea6657; }
.ot-letter-right:hover span:after { color: #ed7a6e; }
.ot-letter-top { background: #ee7f72; }
.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72; }
.ot-letter-top span:after { color: #ee7f72; }
.ot-letter-top:hover span:after { color: #f09389; }
.ot-letter-bottom { background: #e95949; }
.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949; }
.ot-letter-bottom span:after { color: #e95949; }
.ot-letter-bottom:hover span:after { color: #eb6e60; }
.ot-letter-left span:before,
.ot-letter-left span:after {
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.ot-letter-left span:before {
-webkit-transform: scale(1.08,1) skew(0deg,1deg);
-ms-transform: scale(1.08,1) skew(0deg,1deg);
transform: scale(1.08,1) skew(0deg,1deg);
}
.ot-letter-left span:after {
text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(-15deg);
-ms-transform: rotateY(-15deg);
transform: rotateY(-15deg);
}
.ot-letter-left:hover span:before {
-webkit-transform: scale(0.85,1) skew(0deg,20deg);
-ms-transform: scale(0.85,1) skew(0deg,20deg);
transform: scale(0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:after {
-webkit-transform: rotateY(-40deg);
-ms-transform: rotateY(-40deg);
transform: rotateY(-40deg);
}
.ot-letter-right span:before,
.ot-letter-right span:after {
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ot-letter-right span:before {
-webkit-transform: scale(0.85,1) skew(0deg,1deg);
-ms-transform: scale(0.85,1) skew(0deg,1deg);
transform: scale(0.85,1) skew(0deg,1deg);
}
.ot-letter-right span:after {
text-shadow: 1px 0px 0px hsla(360, 100%, 100%, 0.1), -3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(15deg);
-ms-transform: rotateY(15deg);
transform: rotateY(15deg);
}
.ot-letter-right:hover span:before {
-webkit-transform: scale(0.85,1) skew(0deg,-20deg);
-ms-transform: scale(0.85,1) skew(0deg,-20deg);
transform: scale(0.85,1) skew(0deg,-20deg);
}
.ot-letter-right:hover span:after {
-webkit-transform: rotateY(40deg);
-ms-transform: rotateY(40deg);
transform: rotateY(40deg);
}
.ot-letter-top span:before,
.ot-letter-top span:after {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ot-letter-top span:before {
-webkit-transform: scale(1,0.95) skew(-4deg,0deg);
-ms-transform: scale(1,0.95) skew(-4deg,0deg);
transform: scale(1,0.95) skew(-4deg,0deg);
}
.ot-letter-top span:after {
text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(-15deg);
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.ot-letter-top:hover span:before {
-webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
-ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
}
.ot-letter-top:hover span:after {
-webkit-transform: translateY(-0.035em) rotateX(-40deg);
-ms-transform: translateY(-0.035em) rotateX(-40deg);
transform: translateY(-0.035em) rotateX(-40deg);
}
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
-webkit-transform: scale(1,1.05) skew(4deg,0deg);
-ms-transform: scale(1,1.05) skew(4deg,0deg);
transform: scale(1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom span:after {
text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}
.ot-letter-bottom:hover span:before {
-webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
-ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:after {
-webkit-transform: translateY(0.045em) rotateX(40deg);
-ms-transform: translateY(0.045em) rotateX(40deg);
transform: translateY(0.045em) rotateX(40deg);
}
@media screen and (max-width: 1190px) {
.grid li {
width: 20%;
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}
@media screen and (max-width: 945px) {
.grid li {
width: 25%;
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}
@media screen and (max-width: 760px) {
.grid li {
width: 33.3333333%;
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
@media screen and (max-width: 560px) {
.grid li {
width: 50%;
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}
@media screen and (max-width: 340px) {
.grid li {
width: 100%;
}
}

HTML
Untuk pemasangan kode HTML berikut ini, Anda hanya perlu mengganti tiap=tipa abjad yang ada sesuai dengan keinginan Anda serta beberapa kode yang perlu diganti seperli adanya link yang tercantum. Dan sekali lagi, kode HTML dan CSS yang dibagikan di artikel ini merupakan bentuk dari halaman DEMO

<div class='container'>
<div class='component'>
<ul class='grid'>
<li><div class='codrops-header'><h1>Animasi Membuka Pada Teks</h1><a class='codrops-icon codrops-icon-prev' href='http://www.panduantemplateblog.com' target='_blank'><span>Home</span></a><a class='codrops-icon codrops-icon-drop' href='http://www.panduantemplateblog.com/2014/12/membuat-efek-3d-membuka-pada-teks.html' target='_blank'><span>Tutorial</span></a><a class='codrops-icon codrops-icon-drop' href='http://panduantemplateblog.com/p/arsip-blog.html' target='_blank'><span>Articles</span></a></div></li>
<li class='ot-letter-left'><span data-letter='P'>P</span></li>
<li class='ot-letter-top'><span data-letter='A'>A</span></li>
<li class='ot-letter-right'><span data-letter='N'>N</span></li>
<li class='ot-letter-bottom'><span data-letter='D'>D</span></li>
<li class='ot-letter-left'><span data-letter='U'>U</span></li>
<li class='ot-letter-left'><span data-letter='A'>A</span></li>
<li class='ot-letter-right'><span data-letter='N'>N</span></li>
<li class='ot-letter-left'><span data-letter='T'>T</span></li>
<li class='ot-letter-top'><span data-letter='E'>E</span></li>
<li class='ot-letter-right'><span data-letter='M'>M</span></li>
<li class='ot-letter-left'><span data-letter='P'>P</span></li>
<li class='ot-letter-top'><span data-letter='L'>L</span></li>
<li class='ot-letter-left'><span data-letter='A'>A</span></li>
<li class='ot-letter-top'><span data-letter='T'>T</span></li>
<li class='ot-letter-right'><span data-letter='E'>E</span></li>
<li class='ot-letter-bottom'><span data-letter='B'>B</span></li>
<li class='ot-letter-right'><span data-letter='L'>L</span></li>
<li class='ot-letter-bottom'><span data-letter='O'>O</span></li>
<li class='ot-letter-right'><span data-letter='G'>G</span></li>
<li class='ot-letter-left'><span data-letter='.'>.</span></li>
<li class='ot-letter-top'><span data-letter='C'>C</span></li>
<li class='ot-letter-right'><span data-letter='O'>O</span></li>
<li class='ot-letter-left'><span data-letter='M'>M</span></li>
<li class='ot-letter-top'><span data-letter='1'>1</span></li>
<li class='ot-letter-left'><span data-letter='2'>2</span></li>
<li class='ot-letter-top'><span data-letter='3'>3</span></li>
<li class='ot-letter-right'><span data-letter='4'>4</span></li>
<li class='ot-letter-bottom'><span data-letter='5'>5</span></li>
<li class='ot-letter-left'><span data-letter='6'>6</span></li>
<li class='ot-letter-bottom'><span data-letter='7'>7</span></li>
<li class='ot-letter-right'><span data-letter='8'>8</span></li>
<li class='ot-letter-left'><span data-letter='9'>9</span></li>
<li class='ot-letter-top'><span data-letter='0'>0</span></li>
<li class='ot-letter-right'><span data-letter='?'>?</span></li>
<li class='ot-letter-left'><span data-letter='@'>@</span></li>
</ul>
</div>
<section class='related'>
<p>Baca juga Artikel berikut ini:</p>
<div><a href='http://www.panduantemplateblog.com/2014/02/membuat-tombol-css-sosial-media-3d.html'><h4>3D Shading Social Media with Box-Shadows</h4></a></div>
<div><a href='http://www.panduantemplateblog.com/2014/02/membuat-tombol-3d-animasi-css-di-blog.html'><h4>3D Button Animated</h4></a></div>
<span>Original by <a href='http://tympanus.net/codrops/2013/11/14/animated-opening-type/' rel='nofollow' target='_blank'>Codrops</a></span>
</section>r
</div>

Bagaimana? Cukup banyak bukan kodenya? Jika Anda berminat untuk membuat efek 3 Dimensi membuka pada teks ini, silahkan.. Sengaja saya tidak memberikan contoh per kalimat secara minimal karena semata-mata hanya untuk memberikan pemahaman dengan adanya kode-kode yang banyak tersebut agar bisa berkreasi karena menerapkan kode CSS tidak semudah menerapkan kode-kode script atau mungkin lebih sulit :)

Membuat Efek Berkilau Dengan CSS Di Blog

Membuat Efek Berkilau Dengan CSS Di Blog merupakan artikel terbaru yang saya buat setelah 2 minggu tidak melakukan update untuk blog ini. Tidak adanya update untuk blog ini dikarenakan ada kesibukan di offline yang tidak bisa dibiarkan dan harus fokus untuk dikerjakan, dan Alhamdulillah semuanya lancar dikerjakan dan akhirnya kembali ke blog ini dengan artikel membuat efek berkilau dengan CSS di blog :)

Membuat efek berkilau ini murni hanya dengan menggunakan kode CSS tanpa perlu menggunakan Script sehingga lebih memudahkan dalam pemasangannya di blog. Efek berkilau ini menggunakan efek transisi dari sebuah kode CSS yang dikombinasikan dengan penggunaan mouse-over atau efek hover yang ditimbulkan pada element jika pointer mouse diarahkan pada element tersebut

Baca juga Kumpulan efek mouse over atau Klik disini sehingga Anda menemukan efek seperti dibawah ini

Rugi kalau tidak dibaca..

DEMO Efek Berkilau

Dibwah ini adalah beberapa demo dari tampilan efek berkilau yang saya buat. Sorot pada masing-masing objek dan lihat hasilnya

Efek Berkilau Pada Teks

Jika Anda tertarik untuk membuat efek berkilau dengan CSS di blog tersebut didalam blog Anda khususnya untuk judul logo blog seperti yang terlihat pada DEMO diatas, caranya pun sangat mudah dengan menyalin kode CSS berikut ini kedalam kode template blog Anda

.mask-shine {
position:relative;
display:block;
width:150px;
height:64px;
text-align:center;
margin:0 auto;
background:none;
}
.mask-shine:after {
content: "";
position:absolute;
top:0px;
left:0px;
width:0%;
height:100%;
background:rgba(255,255,255,0.4);
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;}
.mask-shine:hover:after {
width:120%;
background-color:rgba(255,255,255,0);
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}

Untuk markup HTML dibuat seperti berikut ini:
<div class="mask-shine">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpu629IOQ9KIcfl4B0iOZC_IYAx1OfMtt1t7-C05JQJSJXBwnhp0dklTPmSE5dfhEw5YmfYnaSDY1POx6KEDGvOrh7CcA0nDYq5KM-VtJe4wWZ4fLV4xjz4rhJEVBis-6NhOLGdA26_pw/s1600/logoku.png"/>
</a>
</div>
* Ganti url gambar

Sedangkna untuk membuat efek berkilau pada teks, untuk kode CSSnya sama saja. Hanya perlu menyesuaikan beberapa value seperti lebar, tinggi, warna background, url gambar, dan letak posisi. Silahkan berkreasi :)

Cukup mudah kok untuk membuat efek berkilau dengan CSS di blog seperti yang telah saya jelaskan diatas, hanya perlu mengedit beberapa kode saja untuk merubah tampilannya. Okey, terimakasih :)

Membuat Efek Kembang Api dengan CSS

Membuat Efek Kembang Api dengan CSS - Pernah bermain kembang api? Atau pernah melihat kembang api meledak dan bertaburan di angkasa di malam hari? Pernah dong.. Biasanya pada hari perayaan seperti hari raya Idul Fitri dan Tahun Baru banyak orang yang merayakannya dengan pesta kembang api



Baca juga Menerapkan efek malam di Blog

Tampilan diatas merupakan DEMO dari efek kembang api dengan CSS yang sudah saya pasang di blog ini. Namun sayangnya, untuk membuat efek kembang api dengan CSS ini tidak hanya diperlukan kode CSS saja tapi juga menggunakan kode script. Meski panduan ini saya berikan, kemungkinan besar tidak banyak yang akan menggunakannya karena tidak ada kegunaannya jika ditampilkan di blog, meskipun itu untuk memperindah tampilan blog. Saya kira tidak ada gunanya, sama dengan efek-efek lainnya seperti turun salju, atau daun berjatuhan :)

Baca juga Efek Rontok dengan CSS

Jika ingin memasang efek kembang api dengan css ini kedalam blog Anda, silahkan saja. Namun perlu dipertimbangkan juga untuk penggunaan dan pemasangan kode yang akan bertambah di dalam template blog, jangan sampai seperti blog saya ini, sudah sangat banyak kode css, javascript dan html yang terpasang yang secara langsung juga mempengaruhi loading blog. Jika kode blognya masih sedikit, silahkan dipasang... :)

CSS
Letakkan sebelum ]]></b:skin> atau diantara <style type='text/css'> dan </style>

#stage {
position:relative;
height:400px;
background:#000;
background-image:-webkit-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYePg9wuvWDqgvxJRVf701yMP9jR_QjHYC2hbPPELSn-_afSoRddPxCBQoFO9KAJdAcIvsEWBvoZ7AE057Zpb6KRPExVEZE2UxRAY3Uiw8kIutJGg_yT8uSrz3K5QfQJ4Oe3hR9MVmH8I/s1600/efek-kembang-api-css.gif);
background-image:-moz-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: -o-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: -ms-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
}
.launcher {
position:absolute;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
background:#fc073b;
border-bottom: 3px solid #2420e1;
}
.launcher div {
position:absolute;opacity:0;
-webkit-animation-name:explosion;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:explosion;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
left:3px;
top:3px;
width:10px;
height:4px;
border-right:4px solid #2420e1;
border-radius:2px;
-webkit-transform-origin:0 0;
-moz-transform-origin: 0 0;}

HTML
Letakkan kode HTMLnya sesuai keinginan. Misalnya di sidebar melalui menu Tata Letak dengan menambahkan kolom Widget disana :)

<div id="stage">
</div>

SCRIPT
Simpan kode scriptnya sebelum </body>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
var num_launchers = 12;
var num_flares = 20;
var flare_colours = ['red', 'aqua', 'violet', 'yellow', 'white', 'blue', 'green'];
var cssIdx = document.styleSheets.length - 1;

function myRandom(from, to)
{
return from + Math.floor(Math.random() * (to-from));
}

var keyframes_template = "from { left: LEFTFROM%; top: 380px; width: 6px; height: 12px; }\n"
+ "33% { left: LEFTTOP%; top: TOPTOPpx; width: 0; height: 0; }\n"
+ " to { left: LEFTEND%; top: BOTBOTpx; width: 0; height: 0; }";

for(var i=0; i < num_launchers; i++) {
leftfrom = myRandom(15, 85);
lefttop = myRandom(30, 70);
toptop = myRandom(20, 200);
leftend = lefttop + (lefttop-leftfrom)/2;
botbot = toptop + 100;

csscode = keyframes_template;
csscode = csscode.replace(/LEFTFROM/, leftfrom);
csscode = csscode.replace(/LEFTTOP/, lefttop);
csscode = csscode.replace(/TOPTOP/, toptop);
csscode = csscode.replace(/LEFTEND/, leftend);
csscode = csscode.replace(/BOTBOT/, botbot);

try { // WebKit browsers
csscode2 = "@-webkit-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }

try { // Mozilla browsers
csscode2 = "@-moz-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }
}

for(var i=0; i < num_launchers; i++) {
var rand = myRandom(0, flare_colours.length - 1);
var rand_colour = flare_colours[rand];
var launch_delay = myRandom(0,100) / 10;

csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") {\n"
+ " -webkit-animation-name: flight_" + i + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-name: flight_" + i + ";\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);

csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") div {"
+ " border-color: " + rand_colour + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}

for(var i=0; i < num_flares; i++) {
csscode = ".launcher div:nth-child(" + num_flares + "n+" + i + ") {\n"
+ " -webkit-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ " -moz-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}

for(var i=0; i < num_launchers; i++) {
var newdiv = document.createElement("div");
newdiv.className = "launcher";
for(var j=0; j < num_flares; j++) {
newdiv.appendChild(document.createElement("div"));
}
document.getElementById("stage").appendChild(newdiv);
}
}, false);

// ]]>
</script>

Silahkan jika tertarik untuk membuat dan memasang efek kembang api dengan CSS seperti yang telah dibahas di atas. Semoga bermanfaat

Validasi Kode HTML5 & CSS Blog

Validasi Kode HTML5 & CSS Blog - Pada saat blogwalking kemarin ada sebuah artikel dari teman saya yang mengingatkan saya akan validasi kode HTML atau CSS blog. Didalam artikel teman saya tersebut dijelaskan bagaimana agar kode HTML yang tidak valid menjadi valid. Setelah membaca artikel yang ada di blognya teman tersebut, saya pun mencoba untuk mengecek kode html blog ini, apakah masih valid atau tidak. Dan ternyata hasilnya sebagai berikut

atau bisa di cek langsung di http://validator.w3.org/check?uri=http%3A%2F%2Fwww.panduantemplateblog.com%2F

Saya cek validasi kode HTML5 & CSS blog ini karena hanya ingin melihat apakah ada kode error yang sama yang seperti dijelaskan oleh +yanto cungkup didalam artikelnya hapus kode dir ltr dan ternyata setelah saya cek hasilnya; tidak ada kode HTML yang error alias kode HTML5 blog ini masih valid atau seperti yang terlihat pada gambar diatas

Baca juga Penggunaan Template Valid Pada Blog

Kenapa saat melakukan validasi kode HTML5 pada blog ini masih memiliki kode html yang valid? Padahal kalau dilihat dari sumber kode blog ini di view-source:http://www.panduantemplateblog.com, Anda semua pasti akan kaget kalau kode template blog ini (html, javascript, dan css) jumlah sangat banyak sekali. Mungkin saking banyaknya, saya beranggapan kalau tidak ada blog yang memiliki kode-kode template sebanyak blog saya ini. Belum lagi kode CSS dan javascript yang tersimpan dalam Google Drive

Baca juga Cara Edit Kode CSS di Google Drive

Jika pada kode HTML5 blog ini valid, namun pada kode CSSnya khususnya CSS3 sungguh lebih sangat mengejutkan. Dengan banyaknya kode CSS yang ada didalam template blog ini, sudah bisa ditebak kalau untuk kode CSS blog tidak valid. Bahkan sangat tidak valid seperti pada tampilan gambar berikut ini

Ternyata banyak error yang terjadi pada kode CSS template blog ini. Apakah itu membuat saya pusing dan harus memikirkannya agar valid CSS3? Tidak, saya tidak mau memikirkan mengenai validasi kode HTML & CSS blog ini karena menurut saya hal ini akan sangat tidak perlu. Valid atau tidak valid kode template blog tidak berpengaruh pada nilai SEO blog. Yang sekarang adalah lebih baik teman-teman meninggalkan komentar untuk artikel blog ini karena itu lebih penting dari segalanya :)

Dodecahedron: Pentagonal Efek Hover CSS

Dodecahedron: Pentagonal Efek Hover CSS - Entahlah apa namanya, yang pasti saat saya melakukan pencarian dengan kata kunci pentagon css dan css modern akhirnya saya temukan sebuah website yang hanya menampilkan efek hover yang sangat menakjubkan. Bahkan dari kata kunci css modern, saya juga mendapatkan script dan css yang disebut Modernizr. Dan dibeberapa forum ternyata kode Modernizr ini telah banyak dibahas juga, namun yang pastinya yang saya ketahui sumber asli dari pentagon efek hover ini berasal dari themaninblur dan menamakan efek hover ini sebagai Dodecahedron

Sumber dari Dodecahedron: Pentagonal Efek Hover CSS ini saya dapatkan dari sebuah situs yang hanya menayangkan dari efek hover tersebut dan pentagonal, saya namakan sendiri karena ada bentuk segi lima yang terdapat pada tampilannya (seperti gambar diatas). Dan disitus itu sendiri tidak terdapat panduan atau artikel yang menjelaskan cara membuat efek hover tersebut. Sehingga, karena tidak ada penjelasannya dari situs tersebut, saya pun mencuri kode dari Dodecahedron tersebut atau dari kode Modernizr

Untuk situsnya silahkan Anda buka CSS3 Dodecahedron

Dodecahedron: Pentagonal Efek Hover CSS

Jika Anda kesulitan untuk menemukan kode yang terdapat pada situs yang menayangkan tampilan langsung dari efek hover Dodecahedron dan Modernizr ini, silahkan gunakan kode yang telah saya ambil berikut ini. Saya mengambil kode ini bukan untuk tujuan komersial tapi hanya sebagai pembelajaran dengan tetap menyertakan sumber dari situs yang telah menayangkannya. Begitupun dengan kode CSS dan javascript dari kode Modernizr ini masih sesuai aslinya. Jika anda ingin menggunakan kode berikut ini, silahkan saja dan saya tidak bertanggungjawab dari penggunaan yang Anda lakukan

DEMO

Silahkan mainkan mouse Anda pada kubik segi lima ini dan keluarkan kursor mouse kearah tepi atau pinggir

KODE CSS3 DODECAHEDRON

#dodecahedron {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -90px 0 0 -70px;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform-origin: 70px 80px -100px;
 -moz-transform-origin: 70px 80px -100px;
 transform-origin: 70px 80px -100px;
}

.group {
 position: absolute;
 left: 0;
 top: 0;
 width: 166px;
 height: 156px;
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 transform-origin: 0 100%;
 -webkit-transition: -webkit-transform 1s ease-out;
 -moz-transition: -moz-transform 1s ease-out;
 transition: transform 1s ease-out;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

#group1 {
 left: -23px;
 top: -78px;
 -webkit-transform: rotateZ(-36deg) rotateX(20deg);
 -moz-transform: rotateZ(-36deg) rotateX(20deg);
 transform: rotateZ(-36deg) rotateX(20deg);
}

#dodecahedron.closed #group1 {
 -webkit-transform: rotateZ(-36deg) rotateX(63deg);
 -moz-transform: rotateZ(-36deg) rotateX(63deg);
 transform: rotateZ(-36deg) rotateX(63deg);
}

.groupB {
 left: 55px;
 top: -173px;
 -webkit-transform: rotateZ(36deg) rotateX(20deg);
 -moz-transform: rotateZ(36deg) rotateX(20deg);
 transform: rotateZ(36deg) rotateX(20deg);
}

#dodecahedron.closed .groupB {
 -webkit-transform: rotateZ(36deg) rotateX(63deg);
 -moz-transform: rotateZ(36deg) rotateX(63deg);
 transform: rotateZ(36deg) rotateX(63deg);
}

.groupC {
 left: -24px;
 top: -78px;
 -webkit-transform: rotateZ(-36deg) rotateX(20deg);
 -moz-transform: rotateZ(-36deg) rotateX(20deg);
 transform: rotateZ(-36deg) rotateX(20deg);
}

#dodecahedron.closed .groupC {
 -webkit-transform: rotateZ(-36deg) rotateX(63deg);
 -moz-transform: rotateZ(-36deg) rotateX(63deg);
 transform: rotateZ(-36deg) rotateX(63deg);
}

#group2 {
 left: 43px;
 top: 26px;
 -webkit-transform: rotateZ(-108deg) rotateX(20deg);
 -moz-transform: rotateZ(-108deg) rotateX(20deg);
 transform: rotateZ(-108deg) rotateX(20deg);
}

#dodecahedron.closed #group2 {
 -webkit-transform: rotateZ(-108deg) rotateX(63deg);
 -moz-transform: rotateZ(-108deg) rotateX(63deg);
 transform: rotateZ(-108deg) rotateX(63deg);
}

#group3 {
 left: 162px;
 top: -4px;
 -webkit-transform: rotateZ(-180deg) rotateX(20deg);
 -moz-transform: rotateZ(-180deg) rotateX(20deg);
 transform: rotateZ(-180deg) rotateX(20deg);
}

#dodecahedron.closed #group3 {
 -webkit-transform: rotateZ(-180deg) rotateX(63deg);
 -moz-transform: rotateZ(-180deg) rotateX(63deg);
 transform: rotateZ(-180deg) rotateX(63deg);
}

#group4 {
 left: 169px;
 top: -128px;
 -webkit-transform: rotateZ(-252deg) rotateX(20deg);
 -moz-transform: rotateZ(-252deg) rotateX(20deg);
 transform: rotateZ(-252deg) rotateX(20deg);
}

#dodecahedron.closed #group4 {
 -webkit-transform: rotateZ(-252deg) rotateX(63deg);
 -moz-transform: rotateZ(-252deg) rotateX(63deg);
 transform: rotateZ(-252deg) rotateX(63deg);
}

#group5 {
 left: 54px;
 top: -173px;
 -webkit-transform: rotateZ(-324deg) rotateX(20deg);
 -moz-transform: rotateZ(-324deg) rotateX(20deg);
 transform: rotateZ(-324deg) rotateX(20deg);
}

#dodecahedron.closed #group5 {
 -webkit-transform: rotateZ(-324deg) rotateX(63deg);
 -moz-transform: rotateZ(-324deg) rotateX(63deg);
 transform: rotateZ(-324deg) rotateX(63deg);
}

.pentagon {
 position: absolute;
 left: 0;
 top: 0;
 width: 166px;
 height: 156px;
 opacity: 0.67;
}

.p {
    position: absolute;
}

.p1 {
    position: absolute;
    left: 31px;
    top: 58px;
    width: 100px;
    height: 96px;
    background-color: #ff0000;
}

.p2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 59px solid #ff0000;
    border-left: 81px solid transparent;
    border-right: 81px solid transparent;
}

.p3 {
    position: absolute;
    left: 0px;
    top: 58px;
    width: 0;
    height: 0;
    border-bottom: 96px solid transparent;
    border-right: 32px solid #ff0000;
}

.p4 {
    position: absolute;
    left: 130px;
    top: 58px;
    width: 0;
    height: 0;
    border-bottom: 96px solid transparent;
    border-left: 32px solid #ff0000;
}

#pentagon2 .p1 {
 background-color: #ff6600;
}

#pentagon2 .p2 {
 border-bottom-color: #ff6600;
}

#pentagon2 .p3 {
 border-right-color: #ff6600;
}

#pentagon2 .p4 {
 border-left-color: #ff6600;
}

#pentagon3 .p1 {
 background-color: #ffcc00;
}

#pentagon3 .p2 {
 border-bottom-color: #ffcc00;
}

#pentagon3 .p3 {
 border-right-color: #ffcc00;
}

#pentagon3 .p4 {
 border-left-color: #ffcc00;
}

#pentagon4 .p1 {
 background-color: #ccff00;
}

#pentagon4 .p2 {
 border-bottom-color: #ccff00;
}

#pentagon4 .p3 {
 border-right-color: #ccff00;
}

#pentagon4 .p4 {
 border-left-color: #ccff00;
}

#pentagon5 .p1 {
 background-color: #66ff00;
}

#pentagon5 .p2 {
 border-bottom-color: #66ff00;
}

#pentagon5 .p3 {
 border-right-color: #66ff00;
}

#pentagon5 .p4 {
 border-left-color: #66ff00;
}

#pentagon6 .p1 {
 background-color: #00cc33;
}

#pentagon6 .p2 {
 border-bottom-color: #00cc33;
}

#pentagon6 .p3 {
 border-right-color: #00cc33;
}

#pentagon6 .p4 {
 border-left-color: #00cc33;
}

#pentagon7 .p1 {
 background-color: #00cc99;
}

#pentagon7 .p2 {
 border-bottom-color: #00cc99;
}

#pentagon7 .p3 {
 border-right-color: #00cc99;
}

#pentagon7 .p4 {
 border-left-color: #00cc99;
}

#pentagon8 .p1 {
 background-color: #00ccff;
}

#pentagon8 .p2 {
 border-bottom-color: #00ccff;
}

#pentagon8 .p3 {
 border-right-color: #00ccff;
}

#pentagon8 .p4 {
 border-left-color: #00ccff;
}

#pentagon9 .p1 {
 background-color: #0066ff;
}

#pentagon9 .p2 {
 border-bottom-color: #0066ff;
}

#pentagon9 .p3 {
 border-right-color: #0066ff;
}

#pentagon9 .p4 {
 border-left-color: #0066ff;
}

#pentagon10 .p1 {
 background-color: #0000ff;
}

#pentagon10 .p2 {
 border-bottom-color: #0000ff;
}

#pentagon10 .p3 {
 border-right-color: #0000ff;
}

#pentagon10 .p4 {
 border-left-color: #0000ff;
}

#pentagon11 .p1 {
 background-color: #6600ff;
}

#pentagon11 .p2 {
 border-bottom-color: #6600ff;
}

#pentagon11 .p3 {
 border-right-color: #6600ff;
}

#pentagon11 .p4 {
 border-left-color: #6600ff;
}

#pentagon12 .p1 {
 background-color: #cc00ff;
}

#pentagon12 .p2 {
 border-bottom-color: #cc00ff;
}

#pentagon12 .p3 {
 border-right-color: #cc00ff;
}

#pentagon12 .p4 {
 border-left-color: #cc00ff;
}

p {
 margin: 1em 0 0 0;
 -webkit-transform: translateZ(9999px);
 -moz-transform: translateZ(9999px);
 transform: translateZ(9999px);
 text-align: center;
}

p a:last-child {
 margin-left: 1em;
 border-left: 1px solid #4c4c4c;
 padding-left: 1em;
}

KODE HTML DODECAHEDRON

 <div id="dodecahedron">
  <div id="pentagon1" class="pentagon">
   <div class="p p1"></div>
   <div class="p p2"></div>
   <div class="p p3"></div>
   <div class="p p4"></div>
  </div> <!-- /.pentagon -->
  <div id="group1" class="group">
   <div id="pentagon2" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon3" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
     <div class="group groupC">
      <div id="pentagon4" class="pentagon">
       <div class="p p1"></div>
       <div class="p p2"></div>
       <div class="p p3"></div>
       <div class="p p4"></div>
      </div> <!-- /.pentagon -->
     </div> <!-- /.groupC -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group1 -->
  <div id="group2" class="group">
   <div id="pentagon5" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon6" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group2 -->
  <div id="group3" class="group">
   <div id="pentagon7" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon8" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group3 -->
  <div id="group4" class="group">
   <div id="pentagon9" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon10" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group4 -->
  <div id="group5" class="group">
   <div id="pentagon11" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon12" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group5 -->
 </div> <!-- /#dodecahedron -->

KODE JAVASCRIPT MODERNIZR 1

/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
 * Contains: csstransforms3d | teststyles | testprop | prefixes
 */
;window.Modernizr=function(a,b,c){function z(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(m.join(a+";")+(b||""))}function v(a){j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),n={},o={},p={},q=[],r=function(a,c,d,e){var g,i,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);g=["&shy;","<style>",a,"</style>"].join(""),k.id=h,k.innerHTML+=g,f.appendChild(k),i=c(k,a),k.parentNode.removeChild(k);return!!i},s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)};var A=function(a,c){var d=a.join(""),f=c.length;r(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);n.csstransforms3d=function(){var a=!!z(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in f.style&&(a=e.csstransforms3d);return a};for(var B in n)u(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));v(""),i=k=null,e._version=d,e._prefixes=m,e.testProp=function(a){return z([a])},e.testStyles=r;return e}(this,this.document);

KODE JAVASCRIPT MODERNIZR 2

var lastEventX = null;
var lastEventY = null;
var velocityX = 0;
var velocityY = 0;
var movementTimer = null;

$(init);

function init() {
 if (!Modernizr.csstransforms3d) {
  alert('This demo requires a browser that has 3D CSS transforms. As of December 15, 2011 that means the latest Chrome, Safari or Firefox Aurora');
 }
 
 $(document).mousemove(function(event) {
  if (movementTimer != null) {
   clearTimeout(movementTimer);
  }
  
  $('#dodecahedron').addClass('closed');
  
  movementTimer = setTimeout(function() {
   $('#dodecahedron').removeClass('closed');
  }, 1600);
  
  if (lastEventX != null) {
   var velocityX = (event.clientX - lastEventX) * 0.025;
   var velocityY = (event.clientY - lastEventY) * 0.025;
   var maxVelocity = velocityX;
   
   if (Math.abs(velocityX) < Math.abs(velocityY)) {
    maxVelocity = velocityY;
   }
   
   window.velocityX += velocityX;
   window.velocityY += velocityY;
  }
  
  lastEventX = event.clientX;
  lastEventY = event.clientY;
 });
 
 var body = document.getElementsByTagName('body')[0];
 body.addEventListener('touchmove', touchMove, false);
 body.addEventListener('touchstart', touchStart, false);
 body.addEventListener('touchend', touchEnd, false);

 setTimeout(function() {
  $(document).mousemove(hideInstructions);
  body.addEventListener('touchmove', hideInstructions, false);
  
  function hideInstructions() {
   $('#instructions').animate({opacity: 0}, 500, function() {
    $(this).remove();
   });
  }
 }, 2000);

 draw();
}

function draw() {
 var FRICTION = 0.96;
 var MIN_VELOCITY = 0.01;
 
 var dodecahedron = $('#dodecahedron');
 
 if (dodecahedron.data('angleX') == null) {
  dodecahedron.data('angleX', 0);
  dodecahedron.data('angleY', 0);
 }
 
 var angleX = dodecahedron.data('angleX');
 var angleY = dodecahedron.data('angleY');
 
 angleX = (angleX + velocityX) % 360;
 dodecahedron.data('angleX', angleX);
 velocityX *= FRICTION;
 if (Math.abs(velocityX) < MIN_VELOCITY) {
  velocityX = 0;
 }

 angleY = (angleY + velocityY) % 360;
 dodecahedron.data('angleY', angleY);
 velocityY *= FRICTION;
 if (Math.abs(velocityY) < MIN_VELOCITY) {
  velocityY = 0;
 }

 dodecahedron
  .css('-webkit-transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')
  .css('-moz-transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')
  .css('transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')

 setTimeout(draw, 25);
}

function touchStart(event) {
 event.preventDefault();
}

function touchEnd(event) {
 event.preventDefault();
}

function touchMove(event) {
 event.preventDefault();

 if (lastEventX != null) {
  var velocityX = (event.touches[0].pageX - lastEventX) * 0.025;
  var velocityY = (event.touches[0].pageY - lastEventY) * 0.025;
  var maxVelocity = velocityX;
  
  if (Math.abs(velocityX) < Math.abs(velocityY)) {
   maxVelocity = velocityY;
  }
  
  window.velocityX = window.velocityX + velocityX;
  window.velocityY = window.velocityY + velocityY;
 }
 
 lastEventX = event.touches[0].pageX;
 lastEventY = event.touches[0].pageY;
}

Untuk cara penggunaannya salin kode CSS diatas kedalam template blog dan untuk penggunaan kode javascript, saya sarankan lebih baik di simpan di Google Drive dan letakkan kode javascript tersebut sebelum kode </head>

Maaf, saya tidak bisa menjelaskan secara langsung penggunaan dari Dodecahedron: Pentagonal Efek Hover CSS ini. Toh manfaat dari efek hover ini tidak begitu penting untuk blog, Namun jika Anda ingin memasangnya, silahkan gunakan saja dan jangan lupa pasang kode jQuery jika di template blog belum tersedia