21 Style Efek Link Download dan Demo Keren
Tahap Persiapan :
Download file yang ada pada link diatas, file tersebut berisi html, css style dan file javascript yang akan ditambahkan di blog Anda.
Tahap Pertama :
Buka file component.css yang telah di download dan masuk ke HTML editor Template Blog, kemudian copy dan salin tag element nav sebelum tag ]]></b:skin>, seperti berikut :
nav a { position: relative; display: inline-block; margin: 15px 25px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; } nav a:hover, nav a:focus { outline: none; }
Selanjutnya pilih link style yang akan digunakan dan tambahkan sebelum tag ]]></b:skin> seperti cara diatas. Disini penulis menggunakan contoh link efek cl-effect-2, seperti berikut :
Pada link css diatas menggunakan element hover transtition ditambahkan dengan element transform sehingga memberi efek 3D. Langkah berikutnya menambahkan fungsi javascript dibawah tepat diatas tag </head>, seperti berikut :
/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */ .cl-effect-2 a { line-height: 44px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } .cl-effect-2 a span { position: relative; display: inline-block; padding: 0 14px; background: #2195de; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .csstransforms3d .cl-effect-2 a span::before { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #0965a0; content: attr(data-hover); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; } .cl-effect-2 a:hover span, .cl-effect-2 a:focus span { -webkit-transform: rotateX(90deg) translateY(-22px); -moz-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px); } .csstransforms3d .cl-effect-2 a:hover span::before, .csstransforms3d .cl-effect-2 a:focus span::before { background: #28a2ee; }
Pada link css diatas menggunakan element hover transtition ditambahkan dengan element transform sehingga memberi efek 3D. Langkah berikutnya menambahkan fungsi javascript dibawah tepat diatas tag </head>, seperti berikut :
<script src="https://dl.dropboxusercontent.com/s/h1iozk0zvkpi8tm/modernizr.custom.js"></script>
Catatan, file javascript yang di download telah di hosting seperti diatas untuk menghemat ruang editor blog Anda.
Tahap Kedua :
Setelah memastikan tahap diatas telah benar waktunya untuk menambahkan Style Link ke posting, pada tahap ini buat lah posting baru untuk menguji link. So, setiap kali Anda membuat posting yang membutuhkan tombol link download dan demo gunakan tag HTML pada file index.html. Penulis menggunakan tag HTML untuk class cl-effect-2 untuk menindaklanjuti langkah sebelumnya :
<nav class="cl-effect-2"> <a href="#"><span data-hover="Demo">Demo</span></a> <a href="#"><span data-hover="Download">Download</span></a> </nav>
Untuk effect transform 3d tidak bisa berjalan di IE10 dan nama element .nav bisa Anda ganti dengan nama yang lain bila di style template Anda telah ada element dengan nama tersebut.
Akhir kata semoga koleksi dari Codrops ini memberikan inspirasi baru buat kita semua, dan jika Anda menyukai posting kali ini please klik like and share.
Akhir kata semoga koleksi dari Codrops ini memberikan inspirasi baru buat kita semua, dan jika Anda menyukai posting kali ini please klik like and share.
Keren nih, akan saya aplikasikan di blog saya mas :)
ReplyDeletegan sorry nih sebelumnya kalo keluar dari topik, tapi ane boleh minta template ente gk?
ReplyDeleteWew, kok begitu sih :v
Deletemantap ni gan,,,
ReplyDeletewuih, keren mas gan, tombol downloadnya,,, mau coba praktekin dulu diblog sya
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete