অস্থির একটা সার্চ বক্স বানালাম। (অস্থির কিনা জানিনা...)
তবে এটা ফুল রেস্পন্সিভ।
ফন্ট বড় দেখাবে না, মোবাইল ভার্সন সাপোর্ট করবে।
সামান্য হোভার ইফেক্ট আছে।
বেকাতেরা ডিজাইন না ঠিক ... তবে রেডিয়াস করে দিয়েছি।
রঙের জন্য নাম "রেইনবো সার্চ বক্স"
মুলত ব্লগারের জন্নই কোড করা, তবে অন্য প্ল্যাটফর্মে চালানো যাবে।
Demo
তবে এটা ফুল রেস্পন্সিভ।
ফন্ট বড় দেখাবে না, মোবাইল ভার্সন সাপোর্ট করবে।
সামান্য হোভার ইফেক্ট আছে।
বেকাতেরা ডিজাইন না ঠিক ... তবে রেডিয়াস করে দিয়েছি।
রঙের জন্য নাম "রেইনবো সার্চ বক্স"
মুলত ব্লগারের জন্নই কোড করা, তবে অন্য প্ল্যাটফর্মে চালানো যাবে।
Demo
<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shbox {
background: linear-gradient(red, orange, yellow, green, blue, violet);
border-radius: 60px 1px 60px 1px;
box-shadow: 2px 3px 4px #000000;
padding: 20px 10px;
width: 100%;
}
#shbox:hover {
background: linear-gradient(red, orange, yellow, green, blue, violet);
border-radius: 55px 1px 55px 1px;
box-shadow: 2px 3px 4px #000000;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
font-family: siyam rupali;
}
input:focus::-moz-placeholder {
color: transparent;
}
#shbox input {
outline: none;
}
#shbox input[type="text"] {
background: white;
border-radius: 60px 1px 60px 1px;
border-color: transparent;
box-shadow: 0 -1px 0 #000;
font: bold 1.4vw siyam rupali;
color: black;
width: 80%;
padding: 8px 15px 8px 30px;
}
#shbox:hover input[type="text"] {
background: white;
border-radius: 55px 1px 55px 1px;
border-color: transparent;
box-shadow: 0 -1px 0 #000;
font: bold 1.4vw siyam rupali;
color: black;
padding: 8px 15px 8px 30px;
}
</style>
<form action="/search" id="shbox" method="get">
<center><input name="q" placeholder="Type here and press Enter..." size="15" type="text" /></center>
</form>