Membuat search box dengan css3 keren - Halo, ohayo gonzaimasu! Pada posting kali ini, saya akan membahas tentang cara membuat search box dengan efek marquee. Seperti apa sih? Ok, berikut demonya :
Gimana, keren kan? anda juga bisa memodifikasi warnanya sendiri. Yuk, mulai.....
1. Login blog.
2. Tata letak.
3. Add widget -> Edit HTML.
4. Copas kode dibawah ini :
<style type="text/css">
#searchboxbytobt
{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ffffff),color-stop(1, #424242));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #ffffff #a4c3ca #83afb7;
width: 270px;
height: 35px;
padding: 10px;
overflow: hidden;
}
#search, #submit
{
float: left;
}
#search
{
padding: 5px 9px;
height: 30px;
width: 180px;
border: 1px solid #DF0101;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #FFFFFF;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
/* ----------------------- */
#submit
{
background: #000000;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #DF0101),color-stop(1, #FF0000));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #FF0000 #FF0000 #FF0000;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 60px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #ffffff;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{
background: #000000;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #B40404),color-stop(1, #FE2E2E));
}
#submit:active
{
background: #0000ff;
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
border: none;
}
/* ----------------------- */
#search::-webkit-input-placeholder {
color: #0000ff;
font-style: italic;
}
#search:-moz-placeholder {
color: #0000FF;
font-style: italic;
}
#search.placeholder {
color: #0000FF !important;
font-style: italic;
}
#search:focus
{
border-color: #ffffff;
background: #ffffff;
outline: none;
}
</style>
<br />
<form action="/search" id="searchboxbytobt" method="get">
<input id="search" name="q" placeholder="Type here" type="text" />
<input id="submit" type="submit" value="Search" />
</form>
<div style="display: none;">
powered by <a href="http://infoiki.blogspot.com/">Infoiki</a></div>
Keterangan :
1. Kode yang berwarna biru :
-Kode yang pertama, untuk menentukan tinggi kolom search.
-Kode yang kedua, untuk menentukan lebar kolom search.
-Kode yang ketiga, adalah warna garis tepi kolom search. Ganti saja #DF0101 (biru), dengan warna lain.
-Kode keempat, adalah jenis font pada kolom search. Ganti saja trebhucet MS, dengan jenis font yang lain.
-Kode kelima, adalah warna backround kolom search, jika mouse mengeklik kolom search tersebut. Ganti saja #FFFFFF (putih), dengan warna yang lain.
2. Kode yang berwarna kuning adalah teks yang ada di search box.
5. Langkah terakhir, save & lihat hasilnya.
