Material Design Lite (MDL) হল একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL ব্যবহারকারীদের জন্য এমন একটি সিস্টেম প্রদান করে, যা তাদের ওয়েবসাইটে responsive images এবং videos সহজে ইন্টিগ্রেট করতে সহায়তা করে। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL ব্যবহার করে responsive images এবং videos যুক্ত করা যায়, যাতে সেগুলি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়।
Responsive Images তৈরি করা
Responsive images এমন ছবি যা ব্যবহারকারীর ডিভাইসের স্ক্রীন সাইজ অনুযায়ী নিজেকে অ্যাডজাস্ট করে। MDL-এর সাহায্যে আপনি সহজে রেসপন্সিভ ইমেজ তৈরি করতে পারেন, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সমানভাবে ভালোভাবে প্রদর্শিত হবে।
MDL এর মাধ্যমে Responsive Image
MDL এ responsive images তৈরির জন্য img-fluid ক্লাস ব্যবহার করা হয়, যা ছবির আকারের সাথে স্ক্রীনের রেজোলিউশন অনুযায়ী ছবিকে অ্যাডজাস্ট করে।
উদাহরণ: Responsive Image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Responsive Image -->
<img src="https://via.placeholder.com/600x400" alt="Responsive Image" class="mdl-shadow--2dp" style="width: 100%; max-width: 600px;">
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- style="width: 100%; max-width: 600px;": এটি ছবির আকারকে রেসপন্সিভ করার জন্য ব্যবহৃত হয়, যাতে ছবিটি পেজের প্রস্থ অনুযায়ী স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে।
- mdl-shadow--2dp: এটি ছবির চারপাশে একটি শ্যাডো যোগ করে, যা Material Design এর একটি স্টাইলিশ ফিচার।
- img-fluid: MDL এই ক্লাসটির মাধ্যমে ছবির আকার এবং স্ক্রীনের রেজোলিউশনের উপর ভিত্তি করে ছবির আকার পরিবর্তন করতে সাহায্য করে।
এটি একটি responsive image তৈরি করবে, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে উপযুক্ত আকারে প্রদর্শিত হবে।
Responsive Videos ব্যবহার করা
MDL এর মাধ্যমে আপনি সহজেই responsive videos তৈরি করতে পারেন, যা স্ক্রীন সাইজের উপর ভিত্তি করে অটো আকার পরিবর্তন করে। সাধারণত, YouTube বা Vimeo ভিডিওগুলির মতো iframe ভিডিও অ্যাডজাস্ট করা হয়।
MDL এ Responsive Video তৈরি করা
MDL ব্যবহার করে responsive video তৈরি করার জন্য, আপনি ভিডিওর iframe ট্যাগের মধ্যে সিএসএস ক্লাস যুক্ত করতে পারেন।
উদাহরণ: Responsive Video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Video Example</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Responsive Video -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__media">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- mdl-grid: MDL এর গ্রিড সিস্টেম ব্যবহার করা হয়েছে, যা ভিডিওর আকার কাস্টমাইজ করতে সাহায্য করে।
- mdl-cell mdl-cell--12-col: এটি ভিডিও সেলকে পুরো প্রস্থে প্রসারিত করতে ব্যবহৃত হয়।
- iframe: এখানে ভিডিও কনটেন্টের জন্য YouTube এর একটি iframe ব্যবহার করা হয়েছে, যা ভিডিওটি আপনার পেজে এম্বেড করে।
- width="100%": এটি ভিডিওটির প্রস্থকে 100% করে দেবে, যা পেজের আকারের সাথে মিলে যাবে।
এটি একটি responsive video তৈরি করবে, যেখানে ভিডিওটি স্ক্রীনের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে।
MDL এ Responsive Images এবং Videos এর অন্যান্য বৈশিষ্ট্য
১. Image Gallery তৈরি করা
MDL ব্যবহার করে আপনি একটি responsive image gallery তৈরি করতে পারেন, যেখানে একাধিক ছবির পাশাপাশি একটি বৃহত্তর (lightbox) ইফেক্টও থাকতে পারে।
উদাহরণ: Image Gallery
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<img src="https://via.placeholder.com/400x300" alt="Image 1" class="mdl-shadow--2dp" style="width: 100%;">
</div>
<div class="mdl-cell mdl-cell--4-col">
<img src="https://via.placeholder.com/400x300" alt="Image 2" class="mdl-shadow--2dp" style="width: 100%;">
</div>
<div class="mdl-cell mdl-cell--4-col">
<img src="https://via.placeholder.com/400x300" alt="Image 3" class="mdl-shadow--2dp" style="width: 100%;">
</div>
</div>
এটি responsive image gallery তৈরি করবে, যেখানে ছবিগুলি স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী রিসাইজ হবে।
২. Responsive Video Player
MDL ব্যবহার করে আপনি একটি responsive video player তৈরি করতে পারেন, যা মোবাইল এবং ট্যাবলেট ডিভাইসে সঠিকভাবে প্রদর্শিত হবে। আপনি Vimeo বা YouTube ভিডিও এম্বেড করতে পারবেন।
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" width="100%" height="315" allowfullscreen></iframe>
এটি একটি responsive video player তৈরি করবে, যা ইউটিউব ভিডিও সরাসরি এম্বেড করবে এবং স্ক্রীন সাইজ অনুযায়ী আকার পরিবর্তন করবে।
সারাংশ
Material Design Lite (MDL) এর মাধ্যমে responsive images এবং videos তৈরি করা খুবই সহজ এবং কার্যকরী। MDL এর সাহায্যে আপনি ছবি এবং ভিডিওগুলোকে স্ক্রীন সাইজের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট করতে পারবেন। MDL এর responsive grid system এবং CSS classes ব্যবহার করে আপনি ওয়েবসাইটে ইন্টারঅ্যাকটিভ এবং মোবাইল-ফ্রেন্ডলি কন্টেন্ট প্রদর্শন করতে পারবেন, যা বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হবে। MDL এর এই বৈশিষ্ট্যগুলো আপনাকে একটি আধুনিক, রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব ডিজাইন তৈরি করতে সহায়তা করবে।
Read more
