Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

কুইক টিপঃ UI ডিজাইনের সাথে মিল রেখে স্ক্রোলবার স্টাইলিং করা

by
Length:LongLanguages:

Bengali (বাংলা) translation by Arnab Wahid (you can also view the original English article)

এখানে আমরা আপনাকে দেখাবো কিভাবে UI স্টাইলের সাথে ম্যাচিং স্ক্রোলবার ডিজাইন করতে হয়। WebKit ব্রাউজার, সিএসএস ও jQuery Fallback আমরা এখানে নিজেদের কাজের প্রেক্ষিতে খতিয়ে দেখবো।

শর্টকাট খুঁজছেন কি?

ওয়েবসাইটের কোন কম্পোনেন্ট স্টাইলিং করতে এনভাটো থেকে ওয়েব কম্পোনেট কিনে নিয়ে ব্যবহার করতে পারেন। অনেক প্রফেশনালরা অনেক রকম কম্পোনেন্ট আগে থেকেই বানিয়ে মার্কেটে বিক্রয়ের জন্য তুলে রেখেছে।

Web component services on Envato Studio

ব্রাউজার বিষয়ে একটি ছোট নোট

Webkit বেইজড ব্রাউজার বলতে সাধারণত আমরা গুগম ক্রোম বা অ্যাপলের সাফারি ব্রাউজারকে বুঝাই। এরাই ডেস্কটপ ব্রাউজার মার্কেটের ৪০% স্থান দখল করে আছে। অ্যাপল iPad এ সব সময় WebKit ব্যবহার হয়, সে যেই ব্রাউজারই এতে ব্যবহার করা হোক না কেন। অ্যান্ড্রয়েড ও ক্রোমবুকে গুগল ক্রোম ব্যবহার করা হয়।

এসবের উপর ভিত্তি করে বলা যায় না স্ক্রোলবার ডিজাইনের ভবিষ্যৎ অনেক উজ্জ্বল!


১ম ধাপঃ স্ক্রোলবার সহ একটি সিম্পল পেজ

স্টাইলিং শুরু করার আগে আমাদের একটি ফাংশনাল ডেমো দরকার, এই ডেমোতে একটি স্ক্রোলবার রয়েছে। আসেন চেক করিঃ

  • কন্টেন্ট ভিজিবল উইন্ডো এরিয়া থেকে বেশি হলে স্ক্রোলবার দেখা যায় ( ডানে স্ক্রোলবারটি দেখা যাচ্ছে)।
  • textarea তে পর্যাপ্ত কন্টেন্ট থাকায় স্ক্রোলবার ভিজিবল হয়ে আছে।
  • অন্য একটি পেইজ ডিসপ্লে হওয়ার জন্য iframe ব্যবহার করা হয়েছে ।
  • div বা অন্য সকল ব্লক ইলিমেন্টে overflow প্রপার্টি ব্যবহার করা হয়েছে।

এই ডেমোর জন্য আমরা এখন লাস্ট অপশনে চলে যাবো। মার্কআপটি দেখতে এমন হবেঃ

এটি ডামি কন্টেন্ট পুর্ণ একটি div। ইনিশিয়াল সিএসএস ডিজাইন রয়েছে, যা দিয়ে ডাইমেনশন ও ভার্টিকেল ও হরাইজন্টাল স্ক্রোলবারের ট্রিগার সেট করা হয়েছে।

আপনি এখানে সিমিলার কিছুই দেখতে পাবেনঃ


২য়  ধাপঃ একটি Webkit ব্রাউজার স্টার্ট করা

আগে (কয়েকবছর) সিএসএস সুডো ইলিমেন্টের ব্যবহার WebKit এ নিয়ে আসা হয়, যেন পেজ থিমের সাথে মিলিয়ে স্টাইলিং করা সম্ভব হয়ে ওঠে।

আসেন ডিজাইন শুরু করি, -webkit- প্রপার্টি ব্যবহার করে কাস্টম স্ক্রোলবারের প্রপার্টি বসাই। বেসিক সিএসএস প্রপার্টি ব্যবহার করলে স্টাইলিং বুঝতে ও ব্যবহার করতে সহজ হয়ে যাবে।

pseudoইলিমেন্ট যখন ব্যবহার হবে, তখন WebKit বন্ধ হয়ে বিল্টইন স্ক্রোলবার ডিজাইন লোড করবে, এই ব্যাপারে পড়তে সিএসএস ডকুমেন্টেশন পড়তে পারেন। - Surfin' Safari

আরও কিছু pseudo ইলিমেন্ট

সিএসএস বসানোর পর এই পরিবর্তন দেখা যাবে (শুধু Webkit ব্রাউজারে)।

Internet Explorer এর আলাদা নিজস্ব স্ক্রোলবার স্টাইল রয়েছে!

আসলে IE ব্রাউজারেই কাস্টম স্ক্রোলবার স্টাইলিং সাপোর্ট এসেছিলো, যেটা সিএসএসের মাধ্যমে করা হয়। IE 5.5 এর আমল থেকেই সেটা শুরু হয়েছিল। কিন্তু এই উপায়ে শুধু কালার চেঞ্জ করা সম্ভব।

এই প্রপার্টিগুলা আজকের দিনেও ব্যবহার করা যায়। আসেন এটা IE 9 এ টেস্ট করে দেখিঃ

যেমন দেখা জায়ঃ


৩য় ধাপঃ Non-Webkit ব্রাউজারের জন্য Fallback

WebKit নিয়ে অনেক হল। আসেন দেখি ফায়ারফক্স ও অপেরার মত ব্রাউজারের জন্য কি কি ফলব্যাক রয়েছে, যেমন jScrollPane। এই jQuery প্লাগিন কেভিন লাক এর বানানো, আর এটি দিয়েওই আমরা ফলব্যাকের কাজ করব।

কেভিনের ওয়েবসাইটে অনেক ভালো উদাহরণ রয়েছে এটি ব্যবহার করার। বেসিক ইউজের জন্য আগে আমাদের jQuery ডাউনলোড করতে হবে, এরপর এই প্লাগিন ইন্সটল করে নিতে হবেঃ

jquery.jscrollpane.css ওপেন করে নিম্নোক্ত লাইনগুলো এডিট করে স্টাইল মিলিয়ে নিন, কালার ভ্যালু বসান (প্রতি ফাইলের জন্য আলাদা আলাদা ভ্যালুও বসিয়ে নিতে পারেন।), থিমের স্টাইলের সাথে ডিজাইন ম্যাচ করে নিন।

ফায়ারফক্সে  কেমন দেখা যাবে তার স্ক্রিনশটঃ


পরিশেষ

Gmail ও Google+( সহ আরও অনেক ) ওয়েবঅ্যাপে এইসব সলিউশন ব্যবহার করা হয়। এগুলার ডিজাইন থেকে আমরা অনুপ্রাণিত হতে পারি।

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


আরও কিছু রিসোর্স

Customizable Scrollbars বাই Envato Market

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

১। Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars ব্যবহার করা অনেক সহজ, এটি একটি jQueryপ্লাগিন। এটি দিয়ে কাস্টম স্ক্রোল ইলিমেন্ট তৈরি করা যায়।

অনেক থিমের প্রিসেট আগে থেকেই এতে দেয়া আছে, অথবা আপনি নিজের ডিজাইনও করে নিতে পারেন সিম্পল সিএসএস দিয়ে।

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themeable responsive scrollbar jQuery plugin

২। Fancy Scrollbar - WordPress

"Fancy Scrollbar - WordPress" প্লাগিন দিয়ে ওয়ার্ডপ্রেস সাইটের জন্য কাস্টম স্ক্রোলবার বানানো যায়। এতে বহুরকম কাস্টমাইজেশন অপশন আছে। আপনি এতে কালার, ইফেক্ট, ডিলে, রেইল স্ট্রিপ ও প্যারামিটার সহ অনেক কিছু কাস্টমইজ করতে পারবেন।

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

৩। Awesome Custom Scrollbar

Awesome Custom Scrollbar একটি হাইলি কাস্টমাইজেবল স্ক্রোলবাল jQuery প্লাগিন। এটি দিয়ে সাইটে কাস্টল স্ক্রোলবার এমবেড করা যায়। এতে শর্টকোড সাপোর্ট রয়েছে, যা দিয়ে এমনকি থিম ফাইলও কাস্টমাইজ করা যায়।

Awesome Custom Scrollbar
Awesome Custom Scrollbar

৪। DZS Scroller

DZS Scroller দিয়ে সহজে স্ক্রোলবার কাস্টম ডিজাইন করা যায়। এতে ৩টি স্কিন আগে থেকেই সাথে দেয়া থাকে। এতে হভার, ফেড ও ডিলে অপশন রয়েছে। এটি iPhone/iPad স্ক্রোল সাপোর্ট করে।

DZS Scroller
DZS Scroller

৫। CSS3 Scrollbar Styles

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

CSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.