কেমন আছেন সবাই? common snippets নিয়ে আরও একটি পর্ব নিয়ে আসলাম আপনাদের জন্য। যারা নতুন বিশেষভাবে তাদের জন্য। নতুন অবস্থায় এই প্রশ্নদু’টি আমাদের সাধারণত থাকে। তো ভূমিকা শেষ করে আজকের আলোচনার প্রথম অংশে চলে যাই। ওহ্ হ্যা, ভুলেই গেছিলাম। এই সিরিজের অন্যান্য লেখাগুলো চাইলে এই লিংক থেকে পড়ে নিতে পারেন।

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

যখন এই কার্ডগুলোতে মাউস-হোভার (:hover) করা হয়, তখন ব্যাকগ্রাউন্ড ইমেজটি জুম হয়। কিন্তু কার্ডের কন্টেন্ট যেভাবে ছিল সেভাবেই থাকে। এই কাজটা সঠিক ও সহজভাবে করাটা হলো আমাদের আজকের আলোচনার প্রথম অংশ।

zoom in background image on hover without changing the content inside

 

এই উদাহরণটিতে খুবই সহজভাবে এবং সঠিকভাবে বিষয়টি করে দেখানো হয়েছে। এই উদাহরণটিতে মূলত কাজ করা হয়েছে CSS background-size নিয়ে। যথাসম্ভব সহজভাবে দেখানো হয়েছে। আশা করি বুঝতে পারবেন সবাই।

অনেকেই প্রশ্ন করতে পারেন যে, উপরের শিরোনামে এই অংশটি কেন যোগ করলাম? –

without changing the text-size inside

কারণ অনেকেই এই কাজটি করে থাকে CSS transform: scale(); দিয়ে। আমরা করেছি CSS background-size দিয়ে। আপনি যখন মাউস-হোভারে () কার্ডের মধ্যে CSS transform: scale(); বাড়িয়ে দেবেন, তখন কার্ডের মধ্যে যে কন্টেন্ট আছে, সেগুলোতেও CSS transform: scale(); এর প্রভাব পরবে। সব মিলায়ে খুব সুস্বাদু একটা খিচুড়ি হবে, কিন্তু যেটা করতে চাচ্ছিলাম সেটা হবে না। এই বিষয়টিকে আলাদাভাবে হাইলাইট করার জন্যই শিরোনামের শেষ অংশটি যোগ করা হয়।

আমাদের আজকের আলোচনার দ্বিতীয় অংশে যাবার নিচের ছবিটা আগে দেখে নেই, তাহলে আলোচনা বুঝতে সহজ হবে-

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

make an image cover full window from 50% to the right (common snippets)

যদিও আমরা আমাদের ফেসবুক পেইজে এই শিরোনামই দিয়েছিলাম, তবে এটা শুধু right সাইডেই থাকবে, এমনটা না, left এও থাকতে পারে। আর শুধু যে full window from 50% হবে তা-ও না, এটা full window from 60% বা 40% বা অন্য কোন পয়েন্ট থেকেও হতে পারে। আমরা এখানে শুধু একটি করে উদাহরণ দেখব, যেন বিষয়টির মূল ট্রিকটি আমরা ধরতে পারি এবং এ ধরণের যে কোন কাজ করতে পারি। এখন নিচের উদাহরণটি দেখি-

এই ডেমোটি ভালভাবে দেখার জন্য মূল pen এর লিংকটি ভিজিট করুন। আপনার স্ক্রিন যদি 1920px এর না হয়, তাহলে ডেভলপার মুডে যান। তারপর কাস্টম সাইজে 1920px দিয়ে নিন। তাহলে দেখতে পারবেন যে, উপরের ছবিটার সাথে হুবহু মিলে গেছে। অর্থাৎ- Bootstrap container এ দু’টি কলাম থাকবে (.col-*-6) । ডান দিকের কলামে থাকবে কন্টেন্ট। বাম দিকেরটিতে থাকবে একটি ইমেজ। এই ইমেজটি কন্টেইনারের মাঝখান থেকে বাম দিকের পুরো উইন্ডো কভার করবে।

এই উদাহরণটির একটি বিষয় খেয়াল করুন; আমি img {max-width: 100%} ব্যবহার করেছি। এটি আমরা প্রায় সবাই ব্যবহার করি ইমেজের CSS reset করার জন্য। এই রিসেটের কারণেই ইমেজ তার প্যারেন্ট এলিমেন্টের width এর মধ্যে সীমাবদ্ধ থাকে। একে ওভারকাম করতেই মূলত এই বিশেষ ইমেজটিকে figure img {max-width: none;} দিয়েছি। যার কারণে ইমেজটি তার অরিজিনাল সাইজ পেয়েছে যা PSD টেম্পলেটে ছিল।

কিন্তু …

কিন্তু যদি PSD বা এধরণের কোন পরিমাপ না থাকে! ইমেজ যদি উইন্ডো সাইজের চেয়েও অনেক বেশি বড় হয় এবং এখানে যে স্ট্রাকচার দেখানো হয়েছে তেমন কোন ডিজাইনে কাজ করতে হয়! একটি ইমেজ 50% থেকে শুরু হয়ে পুরো উইন্ডো কভার করবে, কিন্তু কোন নির্দিষ্ট পরিমাপ নেই সেই ইমেজের। আর থাকলেও সেটা উইন্ড থেকে অনেক বড়। এ ধরণের অবস্থায় আমরা ঐ ইমেজটিকে width দেব vw ইউনিট দিয়ে, পার্সেন্টেজ বা পিক্সেল দিয়ে নয়। যেমন-

যেহেতু এই উদাহরণটি স্ক্রিন সাইজের সাথে সম্পর্কিত, তাই এই লিংকে গিয়ে ফুল-স্ক্রিনে দেখুন।

 

এ বিষয়ে ভিন্ন আরেকটি উদাহরণ

আবারও আমরা একটি ছবি দেখবো যেন আলোচনা করতে সুবিধা হয়-

এই ছবিতে আমরা দেখতে পাচ্ছি যে, একটি স্লাইডার শুরু হয়েছে Bootstrap container এর ভেতর। কিন্তু container থেকে বের হয়ে উইন্ডো অতিক্রম করেছে।

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

 

এই উদাহরণটিও যেহেতু স্ক্রিন সাইজের সাথে সম্পর্কিত, তাই এই লিংকে গিয়ে ফুল-স্ক্রিনে দেখুন।

common snippets সিরিজের আজকের পর্বটা কি একটু বেশি বড় হয়ে গেল? হয়ত, কি আর করা, আস্তে ধীরে পড়তে থাকেন। ভাল থাকেন সবাই।

আচ্ছা কেউ কি এরুম করতে পারেন? 

মন্তব্য

মন্তব্য