Membuat Menu Cantik Effect Sonar - Hanyalah Berbagi Informasi

Membuat Menu Cantik Effect Sonar




Membuat Menu Cantik Effect Sonar - Kali ini saya akan berbagi satu efek tautan yang menurut saya sangat indah dengan menggunakan bantuan CSS. Idenya adalah dengan menggunakan pulsate-elemen yang nantinya akan menciptakan efek halus dan modern layaknya sonar. Dalam contoh ini kita menggunakan transisi hover, sehingga effect sonar-nya akan terasa hidup.

Tampilannya bisa dilihat seperti dibawah ini :

Membuat Menu Cantik Effect Sonar

Dan untuk lebih jelasnya bisa lihat disini Live Demo
Baca juga : Cara Menggunakan Google Font pada Blog
Untuk menggunakannya buat tag HTML dengan menyertakan tag anchors, sebagai contoh seperti dibawah ini :

HTML
<center>
<ul class="sonarmenu">
<li><a href="http://hanyalah-demo-saja.blogspot.co.id/2016/04/demo-css3-sonar-menu.html">Home</a></li>
<li><a href="http://hanyalah-demo-saja.blogspot.co.id/2016/04/demo-css3-sonar-menu.html">Tools</a></li>
<li><a href="http://www.hanyalah.com">CSS</a></li>
<li><a href="http://hanyalah-demo-saja.blogspot.co.id/2016/04/demo-css3-sonar-menu.html">Download</a></li>
<li><a href="http://hanyalah-demo-saja.blogspot.co.id/2016/04/demo-css3-sonar-menu.html">Sitemap</a></li>
</ul>
</center>

Dalam kasus dibawah ini saya menggunakan jenis huruf dari Google Fonts, sehingga saya menyertakan link eksternal font css.

<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400' rel='stylesheet' type='text/css'>

Berikutnya gunakan / copy kode CSS dibawah ini di CSS Selector blog anda :

<style>
ul.sonarmenu{ 
 list-style: none;
}
ul.sonarmenu li{
 display: inline;
}

ul.sonarmenu a{
 position: relative;
 display: inline-block;
 color: black; /* font color */
 text-decoration: none;
 margin: 10px 20px;
 text-transform: none;
 font-family: 'Dancing Script', sans-serif; /* font style (uses Google fonts) */
 font-size: 32px; /* font size */
 letter-spacing: 2px; /* letter spacing */
 border-bottom: 2px solid transparent; /* Bottom border style */
}
ul.sonarmenu a:hover, ul.sonarmenu a:focus{
 outline: none;
 border-bottom: 2px solid #EEE; /* Bottom border style on hover */
}
ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
 position: absolute;
 top: 50%;
 left: 50%;
 width: 70px; /* width of outer circle */
 height: 70px; /* height of outer circle */
 border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
 border-radius: 50%;
 content: '';
 opacity: 0;
 -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
 -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
 transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* inner circle specific CSS */
 width: 60px; /* width of inner circle */
 height: 60px; /* width of inner circle */
 border-width: 6px;
 -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
 -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
 transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
 -webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
 -moz-animation: pulsate 1.2s infinite;
 -ms-animation: pulsate 1.2s infinite;
 animation: pulsate 1.2s infinite;
}

/* ### Keyframe animations ### */

@-webkit-keyframes pulsate{
  30%{
 opacity: 1;
 -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }
 100%{
 opacity: 0.3;
 -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
 }
}

@-moz-keyframes pulsate{
  30%{
 opacity: 1;
 -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }
 100%{
 opacity: 0.3;
 -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
 }
}

@-ms-keyframes pulsate{
  30%{
 opacity: 1;
 -ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }
 100%{
 opacity: 0.3;
 -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
 }
}

@-keyframes pulsate{
  30%{
 opacity: 1;
 transform: translateX(-50%) translateY(-50%) scale(1);
  }

 100%{
 opacity: 0.3;
 transform: translateX(-50%) translateY(-50%) scale(0.5);
 }
}

</style>

Lihat kembali disini untuk Live Demo

Demikian artikel singkat tentang Membuat Menu Cantik Effect Sonar, jika bermanfaat maka silahkan klik tautan social share dibawah ini.

Credit :
dynamicdrive.com

Membuat Menu Cantik Effect Sonar Membuat Menu Cantik Effect Sonar Reviewed by Om Rudi on April 18, 2016 Rating: 5

Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.