Membuat Search Box keren

Posted by Panjz mackenzie Posted on Kamis, Juli 18, 2013 with 5 comments

Kotak pencarian ini membuat saya pingin berbagi,karen buat saya kotak pencarian ini enak di lihat :d
dan mungkin juga anda akan menyukainya,

DEMO

Bagai mana? anda tertarik.jika ya..silakan copy code yang ada di bawah ini :

Letakan Font-Awesome di bawah kode <head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

HTML

<div class="search"> <input class="search_box" type="checkbox" id="search_box"> <label class="icon-search" for="search_box"></label> <div class="search_form"> <form action="#"> <input type="text"><input type="submit" value="search"> </form> </div> </div>

Ket: Ganti tanda "#" dengan URL blog anda

CCS

body{
margin:10px;
text-align:center;
}
.search{
position:relative;
display: inline-block;
}
[class^=&amp;amp;quot;icon-&amp;amp;quot;]{
background: #3498db;
color:#fff;
border-radius:5px;
display:inline-block;
padding:6px 7px 7px;
font-size:18px;
text-shadow:1px 1px 2px #21638F;
box-shadow: inset 0px 0px 0px #21638F;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
cursor: pointer;
z-index:10;
position:relative;
}
[class^=&amp;amp;quot;icon-&amp;amp;quot;]:hover{
background: #5dade2;
text-shadow:0px 0px 0px #21638F;
box-shadow: inset 0px 0px 8px #21638F;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
.search_form{
background: #5dade2;
position:absolute;
z-index:0;
padding:0px 5px;
right:0;
top:15px;
overflow: hidden;
border-radius:10px;
width: 20px;
height:0px;
transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
-webkit-transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
}
.search_form form{
opacity:0;
transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
}
.search_form input{
background:#fff;
border:none;
}
.search_form input[type=&amp;amp;#39;text&amp;amp;#39;]{
border-radius:5px 0 0 5px;
width:150px;
margin:0px 1px 0px 0;
padding:0px 5px 1px;
min-height:23px;
}
.search_form input[type=&amp;amp;#39;submit&amp;amp;#39;]{
border-radius:0 5px 5px 0;
text-transform:uppercase;
font-size:11px;
padding:0px 5px;
min-height:24px;
margin:0px 0px 0px 0;
cursor: pointer;
}
.search_box{
visibility: hidden;
}
.search_box:checked~.search_form{
width: 213px;
height:24px;
padding:5px;
top:35px;
transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
-webkit-transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
}
.search_box:checked~.search_form form{
opacity:1;
transition:0.3s all ease-out 0.5s;
-webkit-transition:0.3s all ease-out 0.5s;
}

Semoga bermanfaat
Sumber kode: http://codepen.io/MakhonkoDenis

5 komentar:

Admin18 Juli 2013 pukul 10.53
Mantabs mas tutorialnya, Keren ni kolom search

Btw, tentang thumbnail di www.kangmus.com sebenarnya saya sudah upload manual gambar ke blogger tapi tetap tidak muncul juga itu thumbnail, jika berkenan saya ingin minta langsung template tsb dari mas panjz. jika boleh saya harap dapat dikirim ke email a@kangmus.cum

Terima Kasih banyak dan mohon maaf merepotkan, soalnya keren modivan mas panjz itu template.
BalasHapus
Balasan
Admin21 Juli 2013 pukul 12.04
bagus juga tutoral ini, sentuhan cukup lembut
BalasHapus
Balasan
Pap Media2 Mei 2015 pukul 22.02
keren gan http://myadif.heck.in
BalasHapus
Balasan