সিএসএস৩ (CSS3)-এর মাধ্যমে একটি ইমেজের প্রতিফলন (Reflection) তৈরি করা সম্ভব, যা ওয়েবসাইটের ডিজাইনে ভিজ্যুয়াল ইফেক্ট যোগ করতে ব্যবহৃত হয়। ইমেজ রিফ্লেকশন তৈরির জন্য সাধারণত -webkit-box-reflect প্রপার্টি ব্যবহার করা হয়। এটি মূলত ক্রোম এবং সাফারি ব্রাউজারে সমর্থিত।
-webkit-box-reflect প্রপার্টি
-webkit-box-reflect প্রপার্টির মাধ্যমে একটি ইমেজের নিচে, উপর, বামে বা ডানে প্রতিফলন তৈরি করা যায়। এর মাধ্যমে প্রতিফলনের অবস্থান এবং দূরত্ব নির্ধারণ করা যায়।
সিনট্যাক্স:
-webkit-box-reflect: direction offset reflection-mask;
- direction: প্রতিফলনের অবস্থান (উদাহরণ:
above,below,left,right)। - offset: মূল ইমেজ থেকে প্রতিফলনের দূরত্ব (পিক্সেল বা শতাংশে)।
- reflection-mask: প্রতিফলনে গ্রেডিয়েন্ট মাস্ক যোগ করতে ব্যবহার হয় (ঐচ্ছিক)।
উদাহরণ: একটি সাধারণ ইমেজ রিফ্লেকশন তৈরি
নিম্নলিখিত উদাহরণে একটি ইমেজের নিচে প্রতিফলন দেখানো হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Image Reflection</title>
<style>
.image {
width: 300px;
height: auto;
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<h1>CSS3 Image Reflection</h1>
<img class="image" src="example.jpg" alt="Example Image">
</body>
</html>
ব্যাখ্যা:
-webkit-box-reflect: below 10px;: ইমেজের নিচে প্রতিফলন তৈরি করে।linear-gradient(transparent, rgba(0, 0, 0, 0.5));: প্রতিফলনের জন্য ধীরে ধীরে ফেডিং ইফেক্ট তৈরি করে।
প্রতিফলনের কাস্টমাইজেশন
আপনার ডিজাইন অনুযায়ী প্রতিফলনকে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, ফেডিং ইফেক্ট, দূরত্ব বা প্রতিফলনের দিক পরিবর্তন করা সম্ভব:
.image {
width: 300px;
height: auto;
-webkit-box-reflect: left 15px linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3));
}
সীমাবদ্ধতা
-webkit-box-reflectপ্রপার্টি শুধুমাত্র WebKit-বেসড ব্রাউজারে কাজ করে, যেমন গুগল ক্রোম এবং সাফারি।- এটি ক্রস-ব্রাউজার সমর্থন যোগ করার জন্য যথেষ্ট নয়। তাই বিকল্প ভিজ্যুয়াল ইফেক্ট বা জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করা যেতে পারে।
সিএসএস৩ ইমেজ রিফ্লেকশন ডিজাইনকে আরও আকর্ষণীয় করতে সক্ষম। এটি ব্যবহারে ব্রাউজার সমর্থনের কথা মাথায় রেখে ডিজাইন তৈরি করুন।
Content added By
Read more
