সিএসএস ইমেজ স্প্লাইন

ছবি স্প্ল্যাইন

ছবি স্প্ল্যাইন হচ্ছে একটি ছবিতে অন্তর্ভুক্ত ছবির সংকলন

অনেক ছবি ধারণকারী ওয়েবসাইটগুলি দীর্ঘ সময় নিয়ে লোড হতে পারে এবং অনেকগুলি সার্ভার রিকোর্ডের অনুরূপ রিকোর্ড তৈরি করে

ছবি স্প্ল্যাইন ব্যবহার করে সার্ভার রিকোর্ডের সংখ্যা কমানো যায় এবং ব্যান্ডওয়াইড সাশ্রয় করা যায়

ছবি স্প্ল্যাইন - সরল উদাহরণ

আমরা "navsprites.gif" একক ছবিকে ব্যবহার করি, না তিনটি পৃথক ছবি

নেভিগেশন চিত্র

CSS-এর মাধ্যমে, আমরা সংযুক্ত ছবির কোনও অংশকেই দেখাতে পারি

এই উদাহরণে, CSS-এ আমরা "navsprites.gif" ছবির কোনও অংশ দেখানোর নির্ধারণ করি

প্রদত্তি

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

আপনার নিজের চেষ্টা করুন

উদাহরণ ব্যাখ্যা:

  • <img id="home" src="trans.gif"> - ক্ষুদ্র স্বচ্ছ ছবি নির্ধারণ করা হয়েছে, কারণ src বৈশিষ্ট্য শূন্য হতে পারে না। এবং অস্তিত্বে দেখানো ছবি আমরা CSS-তে নির্ধারণ করেছি
  • width: 46px; height: 44px; - আমরা ব্যবহার করতে চাওয়া ছবির অংশ নির্ধারণ করা হয়েছে
  • background: url(navsprites.gif) 0 0; - পটভূমি ছবি এবং তার স্থান (left 0px, top 0px) নির্ধারণ করা হয়েছে

ছবি স্প্ল্যাইন - নেভিগেশন তালিকা

আমরা স্প্ল্যাইন ছবি ("navsprites.gif") ব্যবহার করে একটি নেভিগেশন তালিকা তৈরি করতে চাই

আমরা এইমধ্যে HTML তালিকা ব্যবহার করব, কারণ এটি লিঙ্ক হতে পারে এবং পটভূমি ছবির সহায়তা করে

প্রদত্তি

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

আপনার নিজের চেষ্টা করুন

উদাহরণ ব্যাখ্যা:

  • #navlist {position:relative;} - স্থান সম্প্রীতি সম্পর্কে সংহত করা হয়েছে, যাতে তাতে সরাসরি স্থান নির্ধারণ করা যায়
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - বাহ্যিক এবং অভ্যন্তরীণ গঠন 0 করা, list-style মুছে ফেলা, এবং সকল তালিকা আইটেমগুলি সমস্ত অবস্থানকৃত
  • #navlist li, #navlist a {height:44px;display:block;} - সকল ছবির উচ্চতা 44px

এখন প্রত্যেক বিশেষ অংশের জন্য লোকেশন এবং স্টাইল সেট করতে শুরু করুন:

  • #home {left:0px;width:46px;} - সরাসরি ডান লোকেশন, ছবির প্রস্থ 46px
  • #home {background:url(navsprites.gif) 0 0;} - ব্যাকগ্রাউন্ড ছবি এবং তার অবস্থান নির্ধারণ করুন (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - 63px পথে ডান লোকেশন করুন (#home চেইন 46px + প্রয়োজনীয় অতিরিক্ত স্পেস), চেইন প্রস্থ 43px
  • #prev {background:url('navsprites.gif') -47px 0;} - ব্যাকগ্রাউন্ড ছবিকে ডানে 47px এক্সটেন্ড করুন (#home চেইন 46px + 1px বিভাজক)
  • #next {left:129px;width:43px;} - 129px পথে ডান লোকেশন করুন (#prev শুরু 63px + #prev চেইন 43px + অতিরিক্ত স্পেস), চেইন প্রস্থ 43px
  • #next {background:url('navsprites.gif') -91px 0;} - ব্যাকগ্রাউন্ড ছবিকে ডানে 91px এক্সটেন্ড করুন (#home চেইন 46px + 1px বিভাজক + #prev চেইন 43px + 1px বিভাজক)

ইমেজ স্প্রাইট - হভার ইফেক্ট

এখন, আমরা নেভিগেশন তালিকায় হভার ইফেক্ট যোগ করতে চাই

সুঝাওয়া::hover সিলেক্টর সকল ইলেমেন্টের জন্য ব্যবহার্য, না শুধুমাত্র লিঙ্কগুলির জন্য

আমাদের নতুন ছবির ('navsprites_hover.gif') তিনটি নেভিগেশন ছবি এবং তিনটি হভার ইফেক্ট ছবি সমেত

নেভিগেশন চিত্র

কারণ এটি একটি ছবি, না ছয়টি একক ফাইল, যখন ব্যবহারকারী মাউসকে ছবিতে রাখেনলোডিং বিলম্ব থাকবে না。

আমরা মাত্র তিনটি লাইন কোড যোগ করে হভার ইফেক্ট গড়ে তোলাকৃত

প্রদত্তি

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

আপনার নিজের চেষ্টা করুন

উদাহরণ ব্যাখ্যা:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - আমরা সকল তিনটি হভার ইমেজের জন্য একই ব্যাকগ্রাউন্ড অবস্থান নির্ধারণ করি, কেবল নিচে 45 পিক্সেল