CSS দিয়ে X-Ray ইফেক্ট অর্জন করা

ওভারভিউ

X-Ray ইফেক্ট একটি কালুনিক CSS ফিল্টার যা এলিমেন্টকে গ্রেস্কেল (Grayscale) এ রূপান্তর করে এবং কালার ডেপথ ফ্ল্যাটেন করে, যেন একটি এক্স-রে ছবির মতো দেখায়। এটি প্রাধানিকভাবে Internet Explorer-এর প্রоприেটারি filter প্রোপার্টির মাধ্যমে সমর্থিত ছিল, আধুনিক CSS-এ filter: grayscale() ও contrast() ব্যবহার করে অনুরূপ ফলাফল পাওয়া যায়।

প্যারামিটার

উদাহরণ (লিগ্যাসি IE সিনট্যাক্স)

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

আধুনিক CSS সমতুল্য (সর্ব ব্রাউজার সাপোর্ট)

আধুনিক ব্রাউজারগুলিতে (Chrome, Firefox, Safari, Edge) стандарড filter প্রোপার্টি ব্যবহার করুন:

১. Grayscale + Contrast (X-Ray সাদৃশ্য)

.xray-effect {
    filter: grayscale(100%) contrast(200%);
    /* বা আরও דרামাটিক: */
    filter: grayscale(100%) contrast(300%) brightness(120%);
}

২. Invert + Grayscale (নেগেটিভ এক্স-রে)

.xray-negative {
    filter: grayscale(100%) invert(100%) contrast(150%);
}

৩. SVG ফিল্টার ব্যবহার (অ্যাডভান্সড)

<svg style="display:none;">
  <filter id="xray-svg">
    <feColorMatrix type="matrix" values="
      0.33 0.33 0.33 0 0
      0.33 0.33 0.33 0 0
      0.33 0.33 0.33 0 0
      0 0 0 1 0"/>
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0 1"/>
      <feFuncG type="table" tableValues="0 1"/>
      <feFuncB type="table" tableValues="0 1"/>
    </feComponentTransfer>
  </filter>
</svg>

.xray-svg { filter: url(#xray-svg); }

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

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

<!DOCTYPE html>
<html>
<head>
<style>
    .xray-demo {
        filter: grayscale(100%) contrast(250%) brightness(110%);
        transition: filter 0.3s ease;
    }
    .xray-demo:hover {
        filter: none; /* হোভারে নরমাল */
    }
    .container { padding: 20px; font-family: sans-serif; }
</style>
</head>
<body>
<div class="container">
    <h2>X-Ray Effect Demo (Modern CSS)</h2>
    <img src="logo.png" alt="Logo" class="xray-demo" width="200" />
    <p>Hover to see original</p>
    <div class="xray-demo" style="background: #333; color: #fff; padding: 20px; display: inline-block;">
        CSS Tutorials - X-Ray Style
    </div>
</div>
</body>
</html>

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

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

সতর্কতা

• লিগ্যাসি filter: Xray শুধু পুরানো IE-এ কাজ করে। প্রোডাকশনে ব্যবহার করবেন না।
• ফিল্টার GPU-এ রেন্ডার হয়, অতিরিক্ত লেয়ার তৈরি করতে পারে (পারফরম্যান্স)।
• টেক্সটে প্রয়োগ করলে পাঠযোগ্যতা কমে যেতে পারে।