CSS দিয়ে গ্রেস্কেল (Grayscale) ইফেক্ট সেট করা

ওভারভিউ

Grayscale ইফেক্ট একটি এলিমেন্টের সকল রঙকে ২৫৬ শেডের স্লেটি (Gray) রঙে রূপান্তর করে। লিগ্যাসি IE-এ filter: Gray ব্যবহার হত, আধুনিক CSS-এ filter: grayscale() ফাংশন ব্যবহার করা হয়।

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

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

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

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

১. পূর্ণ গ্রেস্কেল (100%)

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

২. আংশিক গ্রেস্কেল (0% - 100%)

.grayscale-partial {
    filter: grayscale(50%); /* অর্ধেক রঙ, অর্ধেক গ্রে */
}

৩. হোভারে রঙ ফিরে আনা (রঙিন থেকে গ্রে)

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

৪. গ্রেস্কেল + অন্যান্য ফিল্টার কম্বিনেশন

.grayscale-high-contrast {
    filter: grayscale(100%) contrast(150%);
}

.grayscale-sepia {
    filter: grayscale(100%) sepia(30%);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
    .demo { width: 200px; margin: 10px; transition: filter 0.4s ease; }
    .gray-full { filter: grayscale(100%); }
    .gray-50 { filter: grayscale(50%); }
    .gray-hover:hover { filter: grayscale(0%); }
    
    .text-gray { 
        display: inline-block; 
        font-family: Arial Black; 
        font-size: 24px; 
        color: #e74c3c; 
        padding: 10px;
        transition: filter 0.4s;
    }
    .text-gray:hover { filter: grayscale(100%); }
</style>
</head>
<body>
    <h2>Grayscale Effect Demo (Modern CSS)</h2>
    
    <img src="colorful-photo.jpg" alt="Original" class="demo">
    <img src="colorful-photo.jpg" alt="100% Grayscale" class="demo gray-full">
    <img src="colorful-photo.jpg" alt="50% Grayscale" class="demo gray-50">
    <img src="colorful-photo.jpg" alt="Hover to Color" class="demo gray-hover">
    
    <p>Text Grayscale (Hover):</p>
    <div class="text-gray">CSS Tutorials - Grayscale</div>
</body>
</html>

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

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

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

• filter: grayscale(): Chrome 18+, Firefox 35+, Safari 6+, Edge 12+, Opera 15+
• IE: সাপোর্ট করে না (লিগ্যাসি filter: Gray শুধু IE 4-9-এ)
• Mobile: সব আধুনিক মোবাইল ব্রাউজার সাপোর্ট করে
• Prefix: পুরানো ভার্সনে -webkit-filter: grayscale() দরকার ছিল (আমি প্রifix-ফ্রি সাপোর্ট হয়েছে)

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

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

সতর্কতা

• লিগ্যাসি filter: Gray প্রোডাকশনে ব্যবহার করবেন না।
• টেক্সটে ১০০% গ্রেস্কেল প্রয়োগ করলে পাঠযোগ্যতা কমে যেতে পারে (কন্ট্রাস্ট চেক করুন)।
• ফিল্টার GPU-এ রেন্ডার হয় - অতিরিক্ত কম্পোজিটর লেয়ার তৈরি করতে পারে।
• ব্যাকগ্রাউন্ড ইমেজে background-blend-mode: luminosity ব্যবহার করুন (ফিল্টার ছাড়াই)।