CSS দিয়ে কালার স্পেকট্রামের বিপরীত মানে রঙ ম্যাপ করা (Invert Effect)

ওভারভিউ

Invert ইফেক্ট একটি এলিমেন্টের রঙগুলকে কালার স্পেকট্রামের তাদের বিপরীত (Complementary) মানে রূপান্তর করে, যেন একটি নেগেটিভ ফিল্ম বা ফটোগ্রাফিক নেগেটিভের মতো দেখায়। লিগ্যাসি IE-এ filter: Invert দিয়ে করা হত, আধুনিক CSS-এ filter: invert() ফাংশন ব্যবহার করা হয়।

লিগ্যাসি প্যারামিটার (IE Only)

লিগ্যাসি উদাহরণ (IE Only)

<html>
<head></head>
<body>
    <img src="/images/css.gif" alt="CSS Logo" style="filter: invert">
    <p>Text Example:</p>
    <div style="width: 357px; height: 50px; font-size: 30pt; font-family: Arial Black; color: red; filter: invert">
        CSS Tutorials
    </div>
</body>
</html>

আধুনিক CSS পদ্ধতি (সর্ব ব্রাউজার)

১. পূর্ণ ইনভার্ট (100%)

.invert-full {
    filter: invert(100%); /* বা invert(1) */
}

২. আংশিক ইনভার্ট (0% - 100%)

.invert-partial {
    filter: invert(50%); /* অর্ধেক ইনভার্ট */
}

৩. হোভারে ইনভার্ট

.invert-hover:hover {
    filter: invert(100%);
    transition: filter 0.3s ease;
}

পূর্ণ উদাহরণ (আধুনিক)

<!DOCTYPE html>
<html>
<head>
<style>
    .demo { width: 200px; margin: 10px; transition: filter 0.3s; }
    .invert-100 { filter: invert(100%); }
    .invert-50 { filter: invert(50%); }
    .invert-hover:hover { filter: invert(100%); }
    
    .text-invert { 
        display: inline-block; 
        font-family: Arial Black; 
        font-size: 24px; 
        color: #0066cc; 
        padding: 10px;
        transition: filter 0.3s;
    }
    .text-invert:hover { filter: invert(100%); }
</style>
</head>
<body>
    <h2>Invert Effect Demo (Modern CSS)</h2>
    
    <img src="colorful-image.jpg" alt="Original" class="demo">
    <img src="colorful-image.jpg" alt="100% Invert" class="demo invert-100">
    <img src="colorful-image.jpg" alt="50% Invert" class="demo invert-50">
    <img src="colorful-image.jpg" alt="Hover to Invert" class="demo invert-hover">
    
    <p>Text Invert (Hover):</p>
    <div class="text-invert">CSS Tutorials - Inverted</div>
</body>
</html>

Invert() ফাংশন ডিটেইলস

• সিনট্যাক্স: filter: invert(<number-percentage>)
• রেঞ্জ: 0% (কোনো পরিবর্তন নেই) থেকে 100% (পূর্ণ ইনভার্ট) পর্যন্ত।
• ডিফল্ট: 0%
• ইন্টারপোলেশন: অ্যানিমেটেবল (transition/animation-এ ব্যবহার করা যায়)।

অন্যান্য ফিল্টারসহ কম্বিনেশন

.negative-photo {
    filter: invert(100%) contrast(120%) brightness(110%);
}

.sepia-negative {
    filter: invert(100%) sepia(50%) hue-rotate(180deg);
}

.high-contrast-invert {
    filter: invert(100%) contrast(200%);
}

ব্রাউজার সাপোর্ট

• filter: invert(): Chrome 18+, Firefox 35+, Safari 6+, Edge 12+, Opera 15+
• IE: সাপোর্ট করে না (লিগ্যাসি filter: Invert শুধু IE 4-9-এ)
• Mobile: সব আধুনিক মোবাইল ব্রাউজার সাপোর্ট করে

ব্যবহারের ক্ষেত্র

• ডার্ক মোড ইমেজ অডজাস্টমেন্ট (সাদা ব্যাকগ্রাউন্ডের ছবি কালোতে)
• ফটো এডিটিং অ্যাপ (নেগেটিভ ইফেক্ট)
• হোভার/ফোকাস স্টেটে ভিজ্যুয়াল ফিডব্যাক
• অ্যাক্সেসিবিলিটি: হাই কন্ট্রাস্ট মোড সিমুলেশন
• ক্রিয়েটিভ ডিজাইন (নাইট ভিশন ইফেক্ট)

সতর্কতা

• টেক্সট ইনভার্ট করলে পাঠযোগ্যতা কমে যেতে পারে (সাদা টেক্সট কালো ব্যাকগ্রাউন্ডে ঠিক, কিন্তু রঙিন ব্যাকগ্রাউন্ডে সমস্যা)।
• পিএনজি ট্রান্সপারেন্সি ইনভার্ট হয় না (শুধু রঙিন পিক্সেল) - অ্যালফা চ্যানেল অপরিবর্তিত থাকে।
• পারফরম্যান্স: জটিল পেজে অনেক ফিল্টার GPU মেমরি ব্যবহার করে।