আপনার ব্লগকে সাজান বিজয়ের রংয়ে, সার্চ বক্স

আসসালামু আলাইকুম।
আজ ১৫-ই ডিসেম্বর। আগামীকাল ১৬-ই ডিসেম্বর। আমাদের বিজয় দিবস। এই দিন পাকিস্তানী বাহিনী হার মানতে বাধ্য হয়েছিলো যৌথ বাহিনীর কাছে। বিজয়ের আগাম শুভেচ্ছা রইলো সকলের উদ্দেশ্যে। বিজয়ের মাসে আমরা চারিদিকে দেখি লাল-সবুজের সমাহার। লাল সবুজের রংয়ে শ্রদ্ধা জানাই সেই বীরদের যারা এই লাল সবুজের পতাকার জন্য প্রাণ দিয়েছিলো।

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

ডেমো: http://gamersworld24.blogspot.com
কোড:
<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shbox {
background: radial-gradient(red, green);
border-radius: 60px 1px 60px 1px;
box-shadow: 2px 3px 4px #000000;
padding: 20px 10px;
width: 100%;
}
#shbox:hover {
background: linear-gradient(green, red, green);
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="এখানে লিখে এন্টার চাপুন" size="15" type="text" /></center>
</form>
২। সিম্পলের মধ্যে খুব সুন্দর। এই সার্চ বক্সটিরও ডিজাইনার তাওসিফ তুরাবি। আমি এখানেও এডিট করেছি। সাইডবার বা টিউনের উপরে যেখানেই ব্যবহার করুন ওয়াডথ নিজে নিজেই সেরকম হয়ে যাবে। মোবাইল ভিউ সুন্দর। এটা একটু সিম্পল সার্চ বক্স।
ডেমো: http://www.grplusbd.cf/
হোভার ইফেক্ট সহ: (মাউস ধরলে রং বদলাবে)
<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shbox {
background: linear-gradient(#008C00, red, #008C00);
border-radius: 25px;
border-shadow: 4px 2px 2px 9px #000000;
padding: 20px 10px;
width: 98%;
}
#shbox:hover {
background: linear-gradient(red, #008C00, red);
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;
}
input:focus::-moz-placeholder {
color: transparent;
}
#shbox input {
outline: none;
}
#shbox input[type="text"] {
background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-radius: 12px;
border-style: solid;
border-color: transparent;
font: bold 12px siyam rupali;
color: black;
width: 90%;
padding: 8px 15px 8px 30px;
}
</style>
<form action="/search" id="shbox" method="get">
<center><input name="q" placeholder="সার্চ করতে কি-ওয়ার্ড লিখে এন্টার চাপুন..." size="15" type="text" /></center></form>
হোভার ছাড়া:
<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shbox {
background: linear-gradient(#008C00, red, #008C00);
border-radius: 25px;
border-shadow: 4px 2px 2px 9px #000000;
padding: 20px 10px;
width: 98%;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#shbox input {
outline: none;
}
#shbox input[type="text"] {
background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-radius: 12px;
border-style: solid;
border-color: transparent;
font: bold 12px siyam rupali;
color: black;
width: 90%;
padding: 8px 15px 8px 30px;
}
</style>
<form action="/search" id="shbox" method="get">
<center><input name="q" placeholder="সার্চ করতে কি-ওয়ার্ড লিখে এন্টার চাপুন..." size="15" type="text" /></center></form>
আশা করি ভালো লেগেছে।

শেয়ার করুন

লেখকঃ

আমি দুইটি করে হাত, পা কান, চোখ বিশিষ্ট একজন মানুষ। নাম তাহমিদ হাসান মুত্তাকী। আমি একজন মুসলিম। বাংলাদেশের অধিবাসী। বয়স ১৫ বছর। নবম শ্রেণিতে পড়ি।। গ্রিন রেঞ্জারস+ এর প্রতিষ্ঠাতাদের একজন। আমাকে ফেসবুকে পেতে এখানে যান।

Image result for facebook.icon 30x30   Image result for Google Plus.icon 30x30

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