স্ক্রল বার: রংধনু থুক্কু রেইনবো

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

তো অনেকেরই, যারা এই পোস্ট পড়ছেন, তাদের হয় ব্লগ কিংবা ওয়েবসাইট আছে।
তো সকলেই চায় ওয়েবসাইট ইউনিক করে তুলতে।

ইউনিক করতে জাভা স্ক্রিপ্ট আর সিএসএস এর আসলেই কোন তুলনা নেই।

তবে ছোট খাট জিনিসের আপগ্রেডের দিকে কেউ তাকায় না, যেমন স্ক্রল বার।

তো আমি, বয়স মাত্র ১৫। এখনো তেমন ডিজাইনিং শিখে নিতে পারি নাই। কেননা আমি সবই অনলাইনে শিখি, কোথাও কোর্স নেইনি। তাই আমার কাজ গুলো দয়া করে আপ্রিসিয়েট করবেন।

আমার আরও কিছু স্ক্রল বারের ডিজাইন আছে। আগে আমার সবচেয়ে পছন্দেরটা আপনাদের দেবো।



এর নাম "রেইনবো"
আগে বলি, ফায়ারফক্সসহ কিছু ব্রাউজারে কাজ করবে ন। ক্রোমে ভালোমত কাজ করবে।
ডেমো দেখুন এই লিঙ্কে।

নিচের কোড কেবল আপনার সাইট বা ব্লগের সিএসএস এ পেস্ট করে দিন। এজন্য ]]>

কোডটি সার্চ দিয়ে তার উপরে পেস্ট করলেই চলবে।

কোডঃ

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #000000;
    -webkit-border-radius: 5px 1px 10px 9px;
    border-radius: 10px 1px 10px 1px;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px 1px 10px 9px;
    background: linear-gradient(violet,blue,green,yellow,orange,red);
    -webkit-box-shadow: inset 0 0 6px #000000;
}
::-webkit-scrollbar-thumb:window-inactive {
background: linear-gradient(violet,blue,green,yellow,orange,red);
}