() translation by (you can also view the original English article)
কখনো বিস্মিত হয়েছেন কি কিভাবে চেকবক্স এবং রেডিও বাটন স্টাইল করা যায়, JavaScript ছাড়াই? CSS3 কে ধন্যবাদ দিন তবেই পারবেন! এখানে আমরা যা বানাতে যাচ্ছিঃ
আপনি যদি আপনার UI এর উপাদানগুলোতে ব্যবহারের জন্য কিছু গ্রাফিক্স খুজে থাকেন, দেখতে পারেন UI কিটস যা পাওয়া যাচ্ছে এনভাটো এলিমেন্টস এ। অথবা, এক কাপ কফি হাতে নিয়ে এই টিউটোরিয়ালটি শুরু করুন!
১। প্রক্রিয়াটি বোঝা
প্রস্তাবিত পাঠঃ ৩০টি CSS সিলেক্টর যা আপনাকে অবশ্যই মনে রাখতে হবে
তাদের জন্য যারা ইতিমধ্যে CSS যোগ্যতা নিয়ে দ্বিধাহীন বোধ করেন এবং শুধু সঠিক পথে একটু বেগ চান, এখানে পুরো টিউটোরিয়ালের সবচাইতে গুরুত্বপূর্ণ CSS লাইনটিঃ
1 |
input[type="checkbox"]:checked + label { |
2 |
|
3 |
}
|
এখন, তাদের জন্য যারা মনে করেন তাদের আরো দিকনির্দেশনা প্রয়োজন, ভয় নেই, পড়তে থাকুন!
ঠিক আছে, টপিকে ফিরে আসা যাক। আমরা ঠিক এখন কি করতে যাচ্ছি? বেশ, CSS3'র ছিমছাম সামান্য :checked সুডো সিলেক্টরের জন্য, একটি এলিমেন্ট চেকড (অথবা আনচেকড) অবস্থায় আছে কিনা আমরা তার উপর ভিত্তি করে টার্গেট করতে সক্ষম হচ্ছি। আমরা CSS2.1 থেকে সংলগ্ন সহোদর + সিলেক্টরটি ব্যবহার করতে পারি এলিমেন্টটিকে দেখানো চেকবক্স বা রেডিও তে সরাসরি টার্গেট করতে, যা আমাদের ক্ষেত্রে লেবেল হিসেবে আছে।
২। আমাদের HTML ঠিকঠাক করা
এখন, আমরা আমাদের HTML এবং CSS ফাইল (অথবা আপনি যেভাবে পছন্দ করেন) তৈরির মাধ্যমে চলা শুরু করব। আমি অনুমান করছি কিভাবে করতে হয় আপনি তা জানেন, তাই আমরা এটিতে ঢুকছি না।
আপনাকে আপনার নিজের পথে যেতে দেওয়ার উদ্দেশ্যে, আমি এই কৌশলটি শুধুমাত্র একটি চেকবক্সে প্রদর্শন করব, কিন্তু রেডিও বাটনের জন্যও প্রণালিটি একই, এবং এটি সোর্সে অন্তর্ভুক্ত করা আছে।
ঠিক আছে, আসলেই শুরু করা যাক চলুন, করব কি? আমরা আমাদের চেকবক্স ইনপুট দিয়ে শুরু করব, যা একটি লেবেল দ্বারা অনুসৃত।
1 |
<input type="checkbox" /> |
2 |
<label>Styled Check Box</label> |
এখন, যদি আপনি <label> এলিমেন্ট সম্পর্কে বেশি কিছু না জেনে থাকেন, আপনাকে অবশ্যই ইনপুট এবং লেবেলের মধ্যে সংযোগ স্থাপন করাতে হবে যাতে আপনি অনুক্রমে লেবেল এর মাধ্যমে ইনপুটের সাথে ইন্টারেক্ট করতে পারেন। এটি সম্পন্ন করতে ব্যবহার হয়, for=" " এবং ইনপুটের ID টি।
1 |
<input type="checkbox" id="c1" name="cc" /> |
2 |
<label for="c1">Check Box 1</label> |
আমি লেবেল এর ভিতরে <span> ও যোগ করব, যা অন্য কিছুর চেয়ে বেশি ব্যক্তিগত পছন্দ, কিন্তু এই সবকিছুই তৃতীয় ধাপে আরো পরিষ্কার হবে।
৩। আমরা যে জন্য এখানে এসেছিঃ CSS
আনন্দের শুরু এখান থেকেই। প্রথমে আমরা যা করব, যা এই পুরো টিউটোরিয়ালের মূল ভিত্তি, তা হল প্রকৃত চেকবক্সটি আড়াল করা।
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
এখন এটি হয়ে গেছে, আমরা এখন লেবেল স্টাইল করতে পারি, কিন্তু আরো সুস্পষ্টভাবে বললে লেবেলের ভিতরের স্পেন। আমি এইভাবেই করি যাতে চেকবক্সের সঠিক অবস্থানের উপর আমার নিজের আরো ভালো নিয়ন্ত্রণ থাকে। এটি ছাড়া আপনি খুব সম্ভবত লেবেল এ সরাসরি একটি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন, এবং এটির পজিশনিং করা সেক্ষেত্রে কঠিন হতে পারে।
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
background:url(check_radio_sheet.png) left top no-repeat; |
9 |
}
|
ঠিক আছে, আমাকে এটি ঝটপট ব্যাখ্যা করতে দিন। সবার আগে, ব্যাকগ্রাউন্ড লক্ষ করুন। আমার একটি ছোট স্প্রাইট শিট আছে এটির জন্য, তাই আমাকে যা করতে হবে তা হল এই স্পেনের জন্য ব্যাকগ্রাউন্ড পজিশন সেট করা। শিটের মধ্যে প্রতিটা "sprite" এ স্পেন নিজে সঠিক প্রস্থ এবং উচ্চতা সম্পন্ন, যা প্রতিটার অবস্থান সংজ্ঞায়িত করতে সাহায্য করে।
আমার নিজের স্টাইলিং এ, এখানে CSS এর বাকি অংশ।
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
৪। এটি কার্যকর করা
এখানে খুব বেশি কাজ বাকি নেই, তাই চলুন এটি শেষ করা যাক। শেষে যা করতে হবে তা হল ইনপুটটি চেকড হলে এলিমেন্ট এর জন্য একটি অবস্থান প্রদান করতে হবে, এবং ইচ্ছিকভাবে হোভারের জন্যও। এটি খুবই সহজ, এক নজর দেখে নিন!
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
13 |
input[type="checkbox"]:checked + label span { |
14 |
background:url(check_radio_sheet.png) -19px top no-repeat; |
15 |
}
|
খেয়াল করবেন স্প্রাইট শিট ব্যবহারের কারনে, আমাকে শুধু ব্যাকগ্রাউন্ড পজিশন পরিবর্তন করতে হবে। লক্ষ করুন, যখন আপনি একটি চেকবক্স/রেডিও বাটন "চেক" করবেন তখনকার জন্য আমাকে শুধু লেবেলের স্পেন টাকে স্টাইল করতে হবে, আমি আগেই CSS3 এর :checked সুডো সিলেক্টরটি ব্যবহার করেছিলাম।
ব্রাউজার সাপোর্টের উপর কুইক নোট
সুডো সিলেক্টরদের সব ব্রাউজারেই অসাধারন সমর্থন রয়েছ, কিন্তু সাধারণ বিচারকার্য স্থগিত রাখার আদেশ প্রয়োগ, এবং পিছু হটা চমৎকারভাবে ক্ষমাপূর্ণঃ
পুরানো ব্রাউজারগুলো একটি সমস্যা - :checked এর সমর্থন এক্ষেত্রে অপরিষ্কার। উদাহরন হিসেবে, মোবাইল সাফারি প্রি iOS 6 এ এটি সাপোর্ট করে না।
উপসংহার
ঠিক আছে, আমরা এটি করে ফেলেছি, তাই না? চলুন এটিকে শুধু ডাবল চেক করি তবে। প্রথমে HTML :
1 |
<input type="checkbox" id="c1" name="cc" /> |
2 |
<label for="c1"><span></span>Check Box 1</label> |
আপনারটি কি একই রকম দেখাচ্ছে? <span> টি যোগ করতে ভুলবেন না যেন! যখন আপনি নিজে নিজে পরীক্ষা চালাবেন, আমি সম্পুর্নভাবে সাজেস্ট করব এটি করার জন্য একটি নতুন এবং ভিন্ন পথ খুজে বের করতে। আমি দেখতে পছন্দ করব এটাকে আরো ফলপ্রদ করতে আপনি কি করেছেন। এখন CSS এর জন্যঃ
1 |
input[type="checkbox"] { |
2 |
display:none; |
3 |
}
|
4 |
input[type="checkbox"] + label span { |
5 |
display:inline-block; |
6 |
width:19px; |
7 |
height:19px; |
8 |
margin:-2px 10px 0 0; |
9 |
vertical-align:middle; |
10 |
background:url(check_radio_sheet.png) left top no-repeat; |
11 |
cursor:pointer; |
12 |
}
|
13 |
input[type="checkbox"]:checked + label span { |
14 |
background:url(check_radio_sheet.png) -19px top no-repeat; |
15 |
}
|
সব উপস্থিত আছে কি? পারফেক্ট। মনে রাখবেন যে এখানের অনেক স্টাইলিং আমার তৈরি ডেমো ফাইলগুলি স্টাইল করার জন্য নির্দিষ্ট। আমি আপনাকে উৎসাহিত করছি নিজে নিজে করার জন্য, এবং প্লেসমেন্ট ও প্রেজেন্টেশন নিয়ে এক্সপেরিমেন্ট করার জন্য।
শেষে, সবচাইতে গুরুত্বপূর্ণ জিনিস যা আপনি গ্রহন করবেন তা হল আমি খুব উপরের দিকে একদম প্রথম যে CSS এর লাইনটি লিখেছিলামঃ
1 |
input[type="checkbox"]:checked + label { |
2 |
|
3 |
}
|
এটি ব্যবহার করে, আপনি সম্পুর্ন ভিন্ন ধরনের জিনিস তৈরি করতে পারবেন। চেকবক্স এবং রেডিও বাটনের বাইরেও :checked ফর্ম এ ব্যবহার সম্ভব, কিন্তু আমি সেটা আপনার নিজে নিজে এক্সপেরিমেন্টের জন্য রেখে দিলাম। এখানে কিছু জিনিস যা নিয়ে আপনি এক্সপেরিমেন্ট করতে পারেনঃ
- রেটিনা স্ক্রিনগুলোর জন্য একটি দ্বিগুণ স্প্রাইটশিট যোগ করুন
- বিটম্যাপ এর পরিবর্তে SVG ব্যবহার করুন
আশা করি আপনি এই শর্ট আর্টিকেলটি উপভোগ করেছেন এবং আপনি এটিকে শিখতে পেরেছেন এবং আপনি এটির আরো বিস্তৃত অথবা আরো উন্নত ব্যবহার করবেন।
