CSS দিয়ে Invert (নেগেটিভ) ইফেক্ট সেট করা

ওভারভিউ

Invert ইফেক্ট এলিমেন্টের রঙগুলকে তাদের কালার স্পেকট্রামের বিপরীত মানে রূপান্তর করে, একটি নেগেটিভ ফটোগ্রাফের মতো ফলাফল দেয়। লিগ্যাসি 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 পদ্ধতি (সর্ব ব্রাউজার)

১. পূর্ণ ইনভার্ট

.invert-full { filter: invert(100%); }

২. আংশিক ইনভার্ট

.invert-partial { filter: invert(50%); }

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

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

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

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

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

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

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

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

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

• ডার্ক মোডে লাইট ইমেজ অডজাস্ট
• ফটো নেগেটিভ ইফেক্ট
• হোভার/ফোকাস স্টেট ফিডব্যাক
• হাই কন্ট্রাস্ট মোড সিমুলেশন
• ক্রিয়েটিভ ডিজাইন (নাইট ভিশন, থার্মাল ক্যামেরা লুক)

সতর্কতা

• টেক্সট ইনভার্ট করলে পাঠযোগ্যতা কমতে পারে (WCAG কন্ট্রাস্ট রেশিও চেক করুন)।
• PNG ট্রান্সপারেন্সি (আলফা) ইনভার্ট হয় না।
• পারফরম্যান্স: জটিল পেজে GPU মেমরি ব্যবহার বাড়ে।