Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Google Material Design এর নীতির ওপর ভিত্তি করে তৈরি। এর একটি গুরুত্বপূর্ণ ফিচার হল Shadow Effect। Shadow Effect ওয়েব ডিজাইনে একটি উপাদানকে ভাসমান (floating) বা আলাদা প্রদর্শন করতে সাহায্য করে, যা ইউজারদের জন্য একটি প্রাকৃতিক এবং আধুনিক অভিজ্ঞতা তৈরি করে।
Shadow Effect উপাদানের নিচে ছায়া তৈরি করে, যা সেই উপাদানটিকে স্ক্রীনের উপর ভাসমান মনে হয়। এটি একটি ওয়েবসাইটের ভিজ্যুয়াল এফেক্টকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
এখানে Materialize CSS-এ Shadow Effect কিভাবে ব্যবহার করা যায় তা বিস্তারিতভাবে আলোচনা করা হলো।
Materialize CSS-এ Shadow Effect
Materialize CSS বেশ কিছু ক্লাস সরবরাহ করে যা বিভিন্ন ধরনের Shadow Effect তৈরি করতে সহায়ক। Shadow Effect তৈরির জন্য z-depth ক্লাস ব্যবহার করা হয়। এই ক্লাসটি উপাদানের নিচে একটি ছায়া তৈরি করে, এবং এর গভীরতা (depth) বাড়ানো বা কমানো যায়।
১. Shadow Effect ব্যবহার করা
Materialize CSS-এ Shadow Effect তৈরি করতে z-depth ক্লাস ব্যবহার করা হয়। এই ক্লাসটি উপাদানের নিচে ছায়া যোগ করবে এবং ছায়ার গভীরতা নির্ধারণ করবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Effect Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Card with Shadow Effect -->
<div class="card z-depth-4">
<div class="card-content">
<span class="card-title">Card Title</span>
<p>This is a card with shadow effect applied using z-depth-4.</p>
</div>
</div>
<!-- Materialize JS and jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
কোড ব্যাখ্যা:
- z-depth-4: এটি বাটনের বা কার্ডের নিচে গভীর ছায়া যোগ করবে। Materialize CSS-এ z-depth-1 থেকে z-depth-5 পর্যন্ত বিভিন্ন স্তরের ছায়া রয়েছে, যেখানে z-depth-1 একটি হালকা ছায়া এবং z-depth-5 গভীর এবং গা dark ় ছায়া প্রদর্শন করে।
- card: এটি একটি কার্ড তৈরি করার জন্য ব্যবহৃত ক্লাস।
২. Shadow Effect এর বিভিন্ন স্তর
Materialize CSS-এ আপনি z-depth ক্লাসের বিভিন্ন স্তর ব্যবহার করে বিভিন্ন ধরনের ছায়া তৈরি করতে পারেন। নিম্নে কিছু উদাহরণ দেওয়া হলো:
উদাহরণ:
<div class="card z-depth-1">
<div class="card-content">
<span class="card-title">Card with z-depth-1</span>
<p>This is a card with light shadow (z-depth-1).</p>
</div>
</div>
<div class="card z-depth-3">
<div class="card-content">
<span class="card-title">Card with z-depth-3</span>
<p>This is a card with medium shadow (z-depth-3).</p>
</div>
</div>
<div class="card z-depth-5">
<div class="card-content">
<span class="card-title">Card with z-depth-5</span>
<p>This is a card with deep shadow (z-depth-5).</p>
</div>
</div>
এখানে:
- z-depth-1: একটি হালকা ছায়া তৈরি করবে।
- z-depth-3: একটি মাঝারি ছায়া তৈরি করবে।
- z-depth-5: একটি গভীর ছায়া তৈরি করবে, যা উপাদানটিকে ভাসমান অনুভূতি দেবে।
৩. Shadow Effect on Buttons
Shadow Effect শুধুমাত্র কার্ড নয়, বাটনেও ব্যবহার করা যায়। উদাহরণ:
<a class="waves-effect waves-light btn z-depth-2">Click Me</a>
এখানে:
- z-depth-2: এটি বাটনের নিচে একটি মাঝারি গভীরতার ছায়া যোগ করবে।
৪. Hover Effect সহ Shadow
আপনি চাইলে hover ইফেক্টের সঙ্গে shadow ব্যবহার করতে পারেন, যেখানে মাউস হোভার করলে ছায়ার গভীরতা বাড়ে। উদাহরণ:
<style>
.hover-shadow:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
</style>
<div class="card hover-shadow">
<div class="card-content">
<span class="card-title">Hover to See Shadow</span>
<p>When you hover over this card, the shadow effect increases.</p>
</div>
</div>
এখানে:
- hover-shadow: এই ক্লাসটি মাউস হোভার করলে ছায়ার গভীরতা বাড়াবে।
উপসংহার
Shadow Effect ওয়েব ডিজাইনে একটি অত্যন্ত কার্যকরী এবং আকর্ষণীয় উপাদান। Materialize CSS এর মাধ্যমে আপনি সহজেই shadow effect তৈরি করতে পারেন এবং এটি আপনার ওয়েবসাইটের ইউজার ইন্টারফেসে একটি আধুনিক এবং ভাসমান অনুভূতি যোগ করবে। z-depth ক্লাসের মাধ্যমে আপনি ছায়ার গভীরতা কাস্টমাইজ করতে পারেন এবং ইচ্ছামতো বিভিন্ন উপাদানে এই এফেক্ট যোগ করতে পারেন। Hover effect সহ shadow ব্যবহার করে আপনি আরো ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় ডিজাইন তৈরি করতে পারবেন।
Read more
