CSS ব্যবহার করে ওয়েব পেজের সাইজ কমানোর পদ্ধতি

যত দিন যাচ্ছে ফটোশফ এবং ফ্লাসের উপর থেকে ওয়েব ডিজাইনারদের নির্ভরশীলতা কমিয়ে আনার চেষ্টা করা হচ্ছে।একটি ওয়েব পেজকে আকর্ষণীয় করে তোলার জন্য CSS এর জুড়ি নেই। বর্তমানে CSS3 একটা নতুন মাত্রা এনে দিয়েছে ওয়েব ডিজাইনের ক্ষেত্রে। আজ আর CSS কে শুধুমাত্র ওয়েব পেজের উপাদান গুলোকে পজিসনিং করার জন্য ব্যবহার করা হয় না। শুধুমাত্র কিছু কোড যোগ করে অপাসিটি কন্ট্রোল, গ্রেডিয়েন্ট তৈরি, সাডো ইফেক্ট তৈরি, এনিমেশন সহ অসাধারণ ইফেক্ট তৈরি করা এখন আর অসম্ভব কিছু নয়।

CSS ব্যবহার করে ওয়েব পেজের সাইজ কমানোর পদ্ধতি

আমরা ইতোমধ্যেই জেনেছি যে, একটা ওয়েব পেজকে প্রথমে ফটোশফে ডিজাইন করা হয়। বিভিন্ন ধরণের রং, গ্রেডিয়েন্ট, এবং বিভিন্ন গ্রাফিক্স টেকনিক ব্যবহার করে অকর্ষণীয় করে পেজের বিভিন্ন অংশ তৈরি করা হয়। বেশির ভাগ ক্ষেত্রে আমরা এ ধরণের PSD ডিজাইন থেকে স্লাইস করে পেজের বিভিন্ন অংশকে ইমেজ উপাদান হিসেবে আলাদা করি এবং HTML এবং CSS ব্যবহার করে কোডিং করে ইমেজ গুলোকে সঠিক স্থানে স্থাপন করি । টেক্সট গুলোর সঠিক ফন্ট, সাইজ, কালার ঠিক করে দেই CSS দ্বারা। বারতি কিছু করলে নেভিগেশন বারে কিছু মাউস হোবার ইফেক্ট, ড্রপ ডাউন মেনু ইত্যাদি করেই তৈরি করে ফেলি একটা ওয়েব পেজের টেমপ্লেট।

কিন্তু একজন ভাল ওয়েব ডিজাইনারের আরো কিছু গুণাগুণ থাকে। তার মধ্যে সবচেয়ে বড় গুণ হচ্ছে, তৈরিকৃত টেমপ্লেটের সাইজ যতটা সম্ভব ছোট রাখার চেষ্টা করা। আমরা কিছু লজিক প্রয়োগ করে খুব সহজেই ওয়েব পেজের সাইজ কমিয়ে আনতে পারি। দেখা যাক লজিক গুলো

ওয়েব বাটন তৈরিতে

আমরা একটা সাইটের নেভিগেশন বার সহ বিভিন্ন স্থানে বাটন ব্যবহার করে থাকি।যেমন ডাউনলোড বাটন, লগ-ইন বাটন ইত্যাদি ।বর্তমানে CSS3 এর মাধ্যমে ফটোশফের গ্রাফিক্স এর বিভিন্ন অংশ যেমন গ্রেডিয়েন্ট, সাডো ইফেক্ট, বর্ডার ইফেক্ট, অপাসিটি ইত্যাদি ইমেজ ব্যবহার না করে সামান্য কয়েকটা CSS কোডিং যুক্ত করেই করা সম্ভব হয়। আমরা প্রথমে একটা বাটনকে ফটোশফে ডিজাইন করে এর বিভন্ন অংশে কেমন গ্রেডিয়েন্ট ব্যবহার করা হল, কি কি রঙের মিশ্রনে তৈরি করা হল, অপাসিটি কতটুকু, সাডো ইফেক্ট কেমন হল ইত্যাদির মান ফটোশফ থেকে দেখে নিয়ে CSS দিয়ে তৈরি করুন। দেখবেন অনেক সুন্দর CSS বাটন তৈরি হয়ে গেছে।

নেভিগেশন বার তৈরিতে

অনেক ক্ষেত্রে নেভিগেশন বারে ইমেজ ব্যবহার না করলে আকর্ষণীয় করা যায় না। এ ক্ষেত্রে আমরা ইমেজ ব্যবহার করব কিন্তু একটু লজিক ব্যবহার করে। মনে করুন আপনি 900px X 60px এর একটা নেভিগেশন বার তৈরি করবেন যেখানে ৯টি বাটন থাকবে ।তাহলে আপনি ৯টি 100px X 60px এর ইমেজ ব্যবহার করতে পারেন। কিন্তু এ ক্ষেত্রে আপনার নেভিগেশন বারের সাইজ অনেক বেশি হবে।আমরা এর পরিবর্তে 1px X 60px এর একটা ইমেজ ব্যবহার করে CSS এর মাধ্যমে image repeat ব্যবহার করতে পারি তাহলে নেভিগেশন বারের সাইজ আগের তুলনায় ৯০০ গুণ কম হবে। নেভিগেশন বারে হোবার ইফেক্ট এর ক্ষেত্রেও একই পদ্ধতি ব্যবহার করতে পারেন।

সাইট ব্যকগ্রাউন্ড তৈরিতে

আমরা বিভিন্ন ওয়েব সাইটের ব্যকগ্রাউন্ডে বিভিন্ন ধরণের গ্রাফিক্স, গ্রেডিয়েন্ট ইফেক্ট দেখে থাকি।বেশির ভাগ ক্ষেত্রেই এ ধরণের সাইট একটু বেশি ভারি হয়। কিন্তু আমরা একটু সচেতন হলে আমরা একই কাজ করেতে পারি সাইটকে ভারি না করেই। আমরা বাটনের মত ব্যক গ্রাউন্ডেও CSS দিয়ে গ্রেডিয়েন্ট, সাডো ইফেক্ট ইত্যাদি তৈরি করে ব্যবহার করতে পারেন। আবার image repeat লজিকও ব্যবহার করতে পারেন।

এই লজিক গুলো সাইড বার, হেডার, ফুটার সহ পেজের প্রায় প্রতিটা উপাদানেই কৌশলে প্রয়োগ করা যায়। এক বার করে দেখুন আশ করছি  যে কোন পেজের সাইজ আগের তুলনায় অনেক কম হবে।