-->

K.E ^_~ Yang lagi galau ini penawarnya link

Link dengan efek tembakan laser

CSS3 memang mengagumkan!!

Itulah yang terucap saat menemukan (baca: mencontek) trik ini. Saat baca-baca kumpulan snippet di http://css-tricks.com tepatnya di bagian footer, saya melihat link yang cukup unik. Saat pointer mouse melewati link ini, maka pancaran cahaya seperti laser terlihat berkelebat menembak ke arah kanan. Entahlah, link apa ini namanya.

Penasaran dengan itu, langsung deh coba coba bereksperimen sambil sesekali melirik situs css-tricks :D

Hasilnya, seperti yang ada di bagian bawah posting ini

Buat kerangka html seperti di bawah:


<div class="jaketanbenanget">
 <div class="tembak">
   <a href="#">Tembaakkkk dor dor dor<span></span></a>
 </div>
</div>


Beri sedikit sentuhan tampilan dengan CSS



.jaketanbenanget {
 background: black;
 width: 500px;
 height: 50px;
 padding: 20px
}
.tembak {
 position:relative;
}
.tembak a {
 text-decoration: none;
 color: white;
}
.tembak a>span {
 position:absolute;
 background: black;
 bottom:0;
 left: 0;
 width:100%;
 height:1px;
 background:-webkit-gradient(linear,0% 50%,100% 50%,color-stop(0%,#ffffff),color-stop(5%,#ffffff),color-stop(5%,rgba(255,255,255,0.25)),color-stop(100%,rgba(255,255,255,0)));
 background:-webkit-linear-gradient(left,#ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
 background:-moz-linear-gradient(left,#ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
 background:-o-linear-gradient(left,#ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
 background:linear-gradient(left,#ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
 background-position:100% 0;
 -webkit-background-size:200% 100%;
 -moz-background-size:200% 100%;
 -o-background-size:200% 100%;
 background-size:200% 100%;
 -webkit-transition:background 0s linear;
 -moz-transition:background 0s linear;
 -o-transition:background 0s linear;
 transition:background 0s linear;
}

.tembak a:hover>span {
 background-position:-100% 0;
 -webkit-transition:background 0.4s;
 -moz-transition:background 0.4s;
 -o-transition:background 0.4s;
 transition:background 0.4s;
}


DEMO (**lewatkan kursor pada link demo untuk melihat efek laser)

comment 2 komentar

  1. mantep nih...
    templatenya bgus ni, boleh minta ga..??
    :-bd *mantap
    :)
    Salam kenal dari saya

    BalasHapus
    Balasan
    1. Untuk template sayangnya tidak untuk dipake umum. khusus saya buat untuk blog ini. jadi jawabnya tidak boleh =D

      salam kenal juga mas

      Hapus

Catatan:
Seluruh komentar yang masuk akan dimoderasi terlebih dahulu. Komentar yang berbau spam, kasar, menghina, seluruhnya yang bersifat menghancurkan bukan membangun tidak akan ditampilkan. Silahkan bertanya dan memberi pendapat dengan sopan dan sesuai aturan.

Anda diperbolehkan mempublikasikan ulang artikel ini, dengan syarat:
1. Mintalah izin dengan cara berkomentar di bawah artikel ini
2. Wajib menyertakan link ke artikel ini dan menyertakan nama penulis

 
© Klikedukasi 2008 - 2013 | Design by Panembahan Satyapradana | 170p3x