Kamis, 23 Juni 2016

Kotak Pencarian Seperti Bing ( Css3 Efek Focus )


Bing adalah mesin pencari juga seperti Google, dari tahun ke tahun tampilannya pun berbeda. Apalagi sekarang pengembangan kode selalu dilakukan, sepertinya kode ini tidak pernah habis untuk dibahas dan kali ini saya akan membahas mengenai Cara membuat kotak pencarian seperti bing dimana saat kita mengklik Input pencarian maka backgroundnya akan tertutupi oleh sebuah elemen yang akan memburamkan background jadi kita akan lebih fokus saat mengetikkan kata kunci. Contohnya seperti gambar dibawah ini

Kotak Pencarian Bing Efek Fokus

Bagaimana? anda sudah mengerti dengan maksud dari judul postingan ini? ok saya anggap mengerti. Kotak pencarian ini saya buat dengan memanfaatkan Css3 Dan Jquery beserta dengan seperangkat HTMLnya.

Contoh
Silahkan Masukan Input Atau Ketik apa saja Dan Lihat Efeknya, Bagaimana? Kalau tidak bekerja Efeknya secara lembut berarti browser anda belum mendukung CSS3 dianjurkan untuk segera Upgrade Browser. Dibawah ini source kodenya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
//ZTO Creation - Kotak Pencarian Seperti Bing
$(document).ready(function(){
$("#foc").focusin(function(){
//Menambah Kelas Fade Agar Efek buram tampil
$(".focus").addClass("fade");
});
$("#foc").focusout(function(){
//Saat Tidak mengetikan teks maka efeknya dihapus
$(".focus").removeClass("fade");
});
});
</script>
<style>
#bingkai {
width: 500px;
height: 200px;
margin: 0 auto;
position: relative;
background-image: url("https://2.bp.blogspot.com/-W-z_WNHpSOI/VtimxDyGgOI/AAAAAAAAFRY/Y_3YaDL3zyM/s1600/Hudson-Lobby.jpg");
overflow: hidden;
}
.fade {
background:rgba(0,0,0,0.5);
/* Css3 Membuat Efek Lembut */
transition:All 1.1001s ease-in;
-webkit-transition:All 1.1001s ease-in;
-moz-transition:All 1.1001s ease-in;
-o-transition:All 1.1001s ease-in;
}
.focus {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Css3 Membuat Efek Lembut */
transition:All 1.1001s ease-out;
-webkit-transition:All 1.1001s ease-out;
-moz-transition:All 1.1001s ease-out;
-o-transition:All 1.1001s ease-out;
}
#bingkai .form {
position: absolute;
margin: 0 auto;;
top: 40%;
left: 30%
}
</style>
<div id="bingkai">
<div class="focus">
<div class="form">
<form action="/search">
<input type='text' id='foc' name='q'></input>
<input type='submit' value='Cari'></input>
</form>
</div>
</div>
</div>