সিএসএস ইমেজ স্প্রিরিট - Css Image Sprite



ওয়েব সাইটে অনেক বেশী image ব্যবহার করলে যেমন সার্ভার রিকোয়েস্ট এর সংখ্যা বেড়ে যায় তেমনি ব্যান্ডওয়াইডথ খরচও বেশী হয়। তাই সার্ভার রিকোয়েস্ট এর সংখ্যা কমানো এবং ব্যান্ডওয়াইডথ বাঁচানোর জন্য Image Sprite ব্যবহার করা হয়। Image Sprite ব্যবহার করে সার্ভার রিকোয়েস্ট এর সংখ্যা কমানো যায় এবং উল্লেখযোগ্য পরিমানে ব্যান্ডওয়াইডথ বাঁচান যায়।


css image sprite demo property

ওপরের ছবি বা image টি থেকে আমরা Image Sprite এর মাধ্যমে নিচের অংশটুকু ব্যবহার করেছি।

css image sprite demo property


Image Sprite কি ?

ওয়েব সাইটে অনেকগুলো ইমেজ ব্যবহার না করে কতগুলো ইমেজ মিলিয়ে একটি বড় ইমেজ তৈরি করে তা থেকে প্রয়োজনীয় অংশ ব্যবহার করাই হল Image Sprite. অর্থাৎ একটি বড় ইমেজের শুধুমাত্র প্রয়োজনীয় অংশগুলো ব্যবহার করার পদ্ধতিই হল Image Sprite.


সাধারন উদাহরণ

সিএসএস ব্যবহার করে আমরা একটি বড় image এর শুধুমাত্র প্রয়োজনীয় অংশটুকুই ব্যবহার করতে পারি।

৩ টি ভিন্ন ভিন্ন image ব্যবহার করার পরিবর্তে আমরা demo.gif নামে একটি image ব্যবহার করেছি। demo.gif নামে image এর কোন অংশ প্রদর্শিত হবে তা নির্ধারণ করতে নীচের কোডগুলো দেখুন।

কোড দেখুন

img.window{
width:50px;
height:48px;
background:url(demo.gif) 0 0;
}


ব্যাখ্যা -
<img class="window" src="trns.gif"/> - src এট্রিবিউটের মান খালি হতে পারে না তাই একটি ছোট transparent image নির্ধারণ করা হয়েছে।

width:50px;height:48px; - আমারা যে ছবি বা image টি ব্যবহার করেছি তার অংশ নির্দিষ্ট করতে এই width এবং height প্রপার্টি ব্যবহার করেছি।

background:url(demo.gif) 0 0; - ব্যাকগ্রাউন্ডে ছবি এবং ছবিটির অবস্থান নির্ধারণ করার জন্য এই কোড ব্যবহার করা হয়েছে। url এর মাধ্যমে ছবিটির লোকেশন এবং বাম দিকে 0px এবং ওপরের দিকে 0px এর মাধ্যমে অবস্থান নির্ধারণ করা হয়েছে।


Navigation List

সিএসএস Image Sprite প্রপার্টি ব্যবহার করে নেভিগেসন বার তৈরি করা যায়। একটি নেভিগেসন বার তৈরি করার জন্য আমাদের এইচটিএমএল লিস্ট ব্যবহার করতে হবে কারন এগুলো হল কতগুলো লিংক এবং এগুলো backgroung image সমর্থন বা support করে। এর সাথে আমরা " nav.gif " নামে একটি Sprite image ব্যবহার করেছি।

কোড দেখুন

#demo{position:relative;}
#demo li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#demo li, #demo a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('nav.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('nav.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('nav.gif') -91px 0;}


ব্যাখ্যা -

#demo{position:relative;} - পজিসন প্রপার্টির মান relative নির্ধারণ করা হয়েছে যাতে এর মাঝে absolute পজিসন নির্ধারণ করা যায়।

#demo li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - মার্জিন এবং প্যাডিং প্রপার্টির মান 0px নির্ধারণ করা হয়েছে, লিস্ট স্টাইল সরিয়ে বা remove করা হয়েছে এবং সকল লিস্ট আইটেমের অবস্থান বা position নির্ধারণ করা absolute position.

#demo li, #demo a{height:45px;display:block;} - সব গুলো image এর height নির্ধারণ করা হয়েছে 45px.

এখন প্রতিটি নির্দিষ্ট অংশের জন্য স্টাইল এবং অবস্থান নির্ধারণ করব -

#home{left:0px;width:46px;} - যে কোন অবস্থাতেই অবস্থান বা position নির্ধারণ করা হয়েছে বাম দিকে এবং width নির্ধারণ করা হয়েছে 46px.

#home{background:url(nav.gif) 0 0;} - background image এবং এর অবস্থান নির্ধারণ করা হয়েছে।

#prev{left:63px;width:43px;} - বাম দিক থেকে 63px দূরে অবস্থান এবং প্রস্থ বা width নির্ধারণ করা হয়েছে 43px.

#prev{background:url('nav.gif') -47px 0;} - বাম দিক থেকে 47px দূরে background image নির্ধারণ করা হয়েছে।

#next{left:129px;width:43px;} - বাম দিক থেকে 129px দূরে অবস্থান এবং width নির্ধারণ করা হয়েছে 43px.

#next{background:url('nav.gif') no-repeat -91px 0;} - ডান দিক থেকে 91px দূরে background image নির্ধারণ করা হয়েছে অর্থাৎ #home width 46px + 1px line divider + #prev width 43px + 1px line divider


Image Sprites - Hover

এখন আমরা এই নেভিগেসন বারে hover effect সংযুক্ত করার জন্য " nav_hover.gif " নামে একটি ছবি ব্যবহার করেছি। এই ছবিটিতে মোট ৬ টি ছবি আছে, ৩ টি নেভিগেসন এবং ৩ টি hover effect এর জন্য।

css image sprite demo property

এটি পুরো একটি ছবি, ৬ টি ভিন্ন ছবি নয়। এর ফলে mouse hover এর সময় কোন দেরি বা delay হবে না। hover effect এর জন্য নীচের কোড গুলো দেখুন : -

কোড দেখুন

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


ব্যাখ্যা -

#home a:hover{background: transparent url(nav_hover.gif) 0 -45px;} - সবগুলো hover image এর জন্য আমরা একই অবস্থান বা position এর background image নির্ধারণ করেছি, মাত্র 45px







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.