দ্য ' ইমেজ sprites ” এমন একটি কৌশল যেখানে একটি বড় ইমেজ তৈরি করা হয় যা একাধিক একক ছবি নিয়ে গঠিত। এবং বড় ইমেজ যে কোনো অংশ নকশা প্রয়োজনীয়তা আপেক্ষিক প্রদর্শিত হতে পারে. এটি বিকাশকারীদেরকে দৃশ্যমান আকর্ষণীয় উপাদানগুলি মসৃণভাবে তৈরি করতে সহায়তা করে। ইমেজ স্প্রাইটগুলি আইকন, বোতাম এবং অন্যান্য গ্রাফিকাল উপাদানগুলির জন্য ব্যবহার করা যেতে পারে। এই নিবন্ধটি CSS-এ ইমেজ স্প্রাইট ব্যবহার করার ধাপে ধাপে পদ্ধতি প্রদর্শন করে।
I কিভাবে ব্যবহার করবেন CSS এ ম্যাজ স্প্রিটস?
CSS-এ, ডেভেলপাররা একটি ওয়েবপেজের লোডিং টাইম কম/কমানোর জন্য ইমেজ স্প্রাইট ব্যবহার করে। এটি HTTP অনুরোধগুলি হ্রাস করতে সাহায্য করে, দ্রুত লোডিং নিশ্চিত করে এবং ব্যবহারকারীর অভিজ্ঞতার ফ্যাক্টরকে উন্নত করে। উদাহরণস্বরূপ, নীচের উদাহরণ দেখুন:
উদাহরণ: তালিকা আইটেমে ইমেজ স্প্রাইট ব্যবহার করা
এই উদাহরণে, একটি অর্ডার করা তালিকা তৈরি করা হয় এবং প্রতিটি তালিকা আইটেমে, স্প্রাইট চিত্রের অংশটি স্ক্রিনে প্রদর্শিত হয়।
পূর্বশর্ত:
ইমেজ স্প্রাইট থেকে নির্দিষ্ট ইমেজ পেতে যে ইমেজ স্প্রাইট ব্যবহার করা হচ্ছে তার মাত্রা বিশেষভাবে গুরুত্বপূর্ণ। উদাহরণস্বরূপ, যে চিত্রটির একটি মাত্রা আছে ' 937×156 'নীচে দেখানো হয়েছে:
উপরের প্রদর্শিত চিত্রের কিছু অংশ প্রদর্শন করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:
ধাপ 1: তালিকা আইটেম তৈরি
নিচের কোড স্নিপেটে যেমন দেখা যায়, ওয়েবপেজে ক্রমহীন তালিকা তৈরি করা হয়েছে:
< উল >খালি: < যে আইডি = 'খালি' > যে >
অর্ধেক: < যে আইডি = 'অর্ধেক' > যে >
সম্পূর্ণ: < যে আইডি = 'সম্পূর্ণ' > যে >
উল >
উপরের কোড স্নিপেটের বিবরণ:
-
- প্রথমে, ব্যবহার করুন '
- এর পরে, 'এর আইডি বরাদ্দ করুন খালি ', ' অর্ধেক ' এবং ' সম্পূর্ণ তিনটি তালিকা আইটেম জন্য. এগুলি পরে বড় চিত্রের অংশ প্রদর্শনের জন্য ব্যবহার করা হয়।
- প্রথমে, ব্যবহার করুন '
ধাপ 2: প্রথম চিত্র প্রদর্শন করা হচ্ছে
ওয়েব পেজে শূন্য হৃদয় প্রদর্শনের জন্য যা ইমেজ স্প্রাইটের প্রথম চিত্র। ব্যবহার ' খালি আইডি এবং নিম্নলিখিত কোড সন্নিবেশ করান:
#খালি {প্রস্থ: 157px;
উচ্চতা: 150px;
ব্যাকগ্রাউন্ড: url ( .. / sprite.jpg ) 0 0 ;
}
কোডের উপরের লাইনে:
-
- প্রথমে সেট করুন ' প্রস্থ ' এবং ' উচ্চতা ” যে ছবিটি ডেভেলপার ওয়েব পেজে প্রদর্শন করতে চায়।
- এই বৈশিষ্ট্যগুলি 'এর মানগুলিতে বরাদ্দ করা হয়েছে 157px ' এবং ' 150px ” উপরে প্রদত্ত উদাহরণ অনুসারে, তবে সেগুলি বিভিন্ন মাত্রার চিত্রের সাথে আপেক্ষিক হতে পারে।
- এর পরে, 'এর পথ সরবরাহ করুন পরী 'প্রতিমূর্তি' পটভূমি 'সম্পত্তি। এখন, 'এর দিক নির্ধারণ করুন 0 ' এবং ' 0 ” এবং এটি ইমেজ স্প্রাইটের প্রথম অংশ প্রদর্শন করে।
কোডের উপরের লাইনটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:
উপরের স্ন্যাপশটটি দেখায় যে ইমেজ স্প্রাইট থেকে প্রথম ছবিটি ওয়েবপেজে প্রদর্শিত হয়।
ধাপ 3: মধ্যম এবং শেষ চিত্র প্রদর্শন করা
ইমেজ স্প্রাইট থেকে মধ্যম এবং শেষ ছবির অংশ প্রদর্শনের জন্য, নিম্নলিখিত CSS বৈশিষ্ট্যগুলি সন্নিবেশ করান:
#অর্ধেক {প্রস্থ: 157px;
উচ্চতা: 150px;
ব্যাকগ্রাউন্ড: url ( .. / sprite.jpg ) -462px 0px
}
#সম্পূর্ণ {
প্রস্থ: 157px;
উচ্চতা: 150px;
ব্যাকগ্রাউন্ড: url ( .. / sprite.jpg ) -770px 0px
}
উপরের কোড স্নিপেটের বিবরণ:
-
- প্রথমে, নির্বাচন করুন ' অর্ধেক ” আইডি এবং একই CSS বৈশিষ্ট্য সন্নিবেশ করান যা উপরের ধাপে ব্যবহার করা হয়েছে।
- ইমেজ স্প্রাইট থেকে মাঝের ছবি প্রদর্শন করতে, দিক পরিবর্তন করুন বা বাম দিক থেকে প্যাডিং বরাদ্দ করুন। উদাহরণস্বরূপ, বাম দিক থেকে দিকটি 'এ সেট করা হয়েছে ঋণাত্মক 462px ”
- একইভাবে, বাম থেকে দিকনির্দেশ সেট করে শেষ চিত্রটি প্রদর্শন করুন “ -770px ”
উপরের CSS বৈশিষ্ট্যগুলি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:
উপরের স্ন্যাপশটটি দেখায় যে ইমেজ স্প্রাইট থেকে তিনটি ছবি ওয়েবপেজে প্রদর্শিত হয়েছে।
উপসংহার
দ্য ' ইমেজ sprites ” হল একটি একক বৃহৎ ছবি যা কোলাজ বৈশিষ্ট্যের মতোই একাধিক ছোট ছবি দিয়ে তৈরি। এবং বড় ইমেজের যেকোনো অংশ যা একটি ছোট ইমেজকে প্রতিনিধিত্ব করে তা প্রদর্শিত হতে পারে। ব্যবহার করে প্রয়োজনীয়তা অনুযায়ী ' পটভূমি CSS দ্বারা প্রদত্ত সম্পত্তি। ইমেজ স্প্রাইট থেকে নির্দিষ্ট ইমেজ প্রদর্শন করতে, প্রথমে ইমেজের প্রস্থ এবং উচ্চতা সেট করুন। এর পরে, ইমেজ স্প্রাইট থেকে চিত্রের শুধুমাত্র অংশ প্রদর্শন করতে দিকনির্দেশের মানগুলি ব্যবহার করুন।