রেইনবো সার্চ বক্স

অস্থির একটা সার্চ বক্স বানালাম। (অস্থির কিনা জানিনা...)
তবে এটা ফুল রেস্পন্সিভ।
ফন্ট বড় দেখাবে না, মোবাইল ভার্সন সাপোর্ট করবে।
সামান্য হোভার ইফেক্ট আছে।

বেকাতেরা ডিজাইন না ঠিক ...  তবে রেডিয়াস করে দিয়েছি।

রঙের জন্য নাম "রেইনবো সার্চ বক্স"

মুলত ব্লগারের জন্নই কোড করা, তবে অন্য প্ল্যাটফর্মে চালানো যাবে।

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>

শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট