کدهای آماده برای افکت بلور (Blur Effect) و تار کردن پس‌زمینه مودال‌ها

رفیق برنامه‌نویس، تا حالا شده بخوای یه مودال بزاری وسط صفحه و دلت بخواد بک‌گراندش یه حال دیگه داشته باشه؟ منظورم اون افکت بلور خفنیه که تمرکز کاربر رو میاره روی مودال و همه چیزای دیگه رو محو می‌کنه. اگه دنبال کدهای آماده و راهکارهای ناب برای این کار هستی، دقیقاً جای درستی اومدی. این مقاله قراره دستت رو بگیره و از صفر تا صد پیاده‌سازی یه افکت بلور حرفه‌ای برای پس‌زمینه مودال‌ها رو بهت یاد بده، طوری که هم شیک باشه و هم پرفورمنسش رو هوا نره. راستی، برای پیدا کردن کلی اسنیپت و ابزارهای برنامه‌نویسی کاربردی، حتماً یه سر به فروشگاه ابزارهای ما بزن. از دستش نده، چون حسابی به دردت می‌خوره!

چرا بلور برای مودال‌ها اینقدر مهمه؟

اصلاً چرا باید برای پس‌زمینه مودال‌ها از افکت بلور استفاده کنیم؟ دلیل اصلیش برمی‌گرده به تجربه کاربری (UX) و چگونگی هدایت چشم کاربر. وقتی یه مودال رو روی صفحه باز می‌کنی، می‌خوای تمام توجه کاربر روی محتوای اون مودال باشه، نه روی چیزای دیگه تو پس‌زمینه. بلور دقیقاً همین کارو می‌کنه. با یه کم تار کردن پس‌زمینه، به صورت بصری یه لایه عمق ایجاد می‌کنی که باعث میشه مودال برجسته‌تر دیده بشه.

• افزایش فوکوس: بلور باعث میشه عوامل حواس‌پرتی تو پس‌زمینه کاهش پیدا کنه و کاربر فقط روی مودال تمرکز کنه.
• زیبایی بصری: یه طراحی مدرن و شیک به رابط کاربری میده که حس حرفه‌ای بودن رو القا می‌کنه.
• ایجاد سلسله مراتب: به کاربر می‌فهمونه که محتوای مودال در حال حاضر مهم‌ترین بخش صفحه است.
• بافت و عمق: کمک می‌کنه رابط کاربری تخت و بی‌روح نباشه و حس عمق و بعد بهش بده.

روش‌های پیاده‌سازی افکت بلور: از ساده تا پیشرفته

برای اعمال افکت بلور روی پس‌زمینه مودال، چند تا روش مختلف وجود داره که هر کدوم مزایا و معایب خودشون رو دارن. از ساده‌ترین و پرکاربردترین روش (CSS filter) شروع می‌کنیم و بعد میریم سراغ گزینه‌های دیگه.

1. بلور با CSS خالص (Background-filter) – قهرمان میدان!

راحت‌ترین، پرفورمنس‌ترین و مدرن‌ترین روش برای ایجاد افکت بلور، استفاده از ویژگی backdrop-filter در CSS هست. این ویژگی بهت اجازه میده فیلترهای گرافیکی (مثل بلور، روشنایی، کنتراست) رو روی منطقه‌ای که پشت یک عنصر قرار گرفته اعمال کنی. یعنی محتوای خود عنصر تحت تأثیر قرار نمی‌گیره، فقط چیزی که زیرشه!

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* یه لایه تیرگی نیمه شفاف */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* مطمئن شو که روی بقیه عناصر قرار میگیره */
    
    /* 📌 جادوی اصلی اینجاست: بلور کردن پس‌زمینه */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); /* برای مرورگرهای WebKit */
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 1001; /* مودال باید روی بک‌دراپ باشه */
    max-width: 90%;
    width: 500px;
    box-sizing: border-box;
}
    

همین! به همین سادگی با دو خط کد backdrop-filter و پیشوند -webkit-backdrop-filter (که برای پشتیبانی بهتر تو مرورگرهای بر پایه WebKit مثل سافاری لازمه) تونستی یه افکت بلور خفن ایجاد کنی.

مزایا و معایب backdrop-filter:

• پرفورمنس عالی: چون مرورگر این کار رو مستقیم روی GPU انجام میده، خیلی سریع و روونه.
• پیاده‌سازی ساده: فقط با چند خط CSS کار راه میفته.
• محتوای خود عنصر تحت تأثیر نیست: فقط زیرش بلور میشه.

• پشتیبانی مرورگر: اکثر مرورگرهای مدرن پشتیبانیش می‌کنن، ولی مرورگرهای قدیمی‌تر ممکنه مشکل داشته باشن. (جدول زیر رو ببین).

2. بلور با JavaScript و Fallback (برای مرورگرهای قدیمی)

اگه نگران پشتیبانی backdrop-filter تو مرورگرهای قدیمی هستی، می‌تونی از راه‌حل‌های جاوااسکریپتی یا ترکیبی استفاده کنی. روش معمول اینه که با JS چک کنی ببین مرورگر از backdrop-filter پشتیبانی می‌کنه یا نه. اگه نکرد، یه fallback (راه‌حل جایگزین) رو اجرا کنی.

یکی از روش‌های قدیمی‌تر اینه که کل محتوای پشت مودال رو با CSS filter: blur() بلور کنی. اما مشکل این روش اینه که چون عنصر بلورشده، کل محتوای صفحه رو شامل میشه، پرفورمنسش خوب نیست و حتی ممکنه محتوای خود مودال هم تحت تأثیر قرار بگیره مگه اینکه مراقب باشی.

function supportsBackdropFilter() {
    return CSS.supports('backdrop-filter', 'blur(1px)') || CSS.supports('-webkit-backdrop-filter', 'blur(1px)');
}

function openModal() {
    const modalBackdrop = document.getElementById('modalBackdrop');
    const body = document.body;

    modalBackdrop.style.display = 'flex';
    body.style.overflow = 'hidden'; // جلوگیری از اسکرول صفحه اصلی

    if (!supportsBackdropFilter()) {
        body.classList.add('blurred-background-fallback'); // Fallback برای کل صفحه
        console.log('Backdrop filter not supported, using fallback.');
    } else {
        console.log('Backdrop filter supported.');
    }
}

function closeModal() {
    const modalBackdrop = document.getElementById('modalBackdrop');
    const body = document.body;

    modalBackdrop.style.display = 'none';
    body.style.overflow = ''; 

    if (!supportsBackdropFilter()) {
        body.classList.remove('blurred-background-fallback');
    }
}

// برای تست، یه دکمه در HTML بذار:
// <button onclick="openModal()">باز کردن مودال</button>
// <div id="modalBackdrop" class="modal-backdrop" style="display: none;">
//     <div class="modal-content">
//         <h2>این یه موداله!</h2>
//         <p>محتوای جذاب مودال شما اینجا قرار می‌گیره.</p>
//         <button onclick="closeModal()">بستن</button>
//     </div>
// </div>
    

.blurred-background-fallback {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

/* نکته مهم: این حالت میتونه عملکرد ضعیفی داشته باشه و محتوای مودال هم بلور کنه */
/* برای جلوگیری از بلور شدن مودال، باید مودال بیرون از body بلور شده باشه یا از فیلتر منفی استفاده کنی */
/* یا کلا این روشو برای بک‌فیلتر ترجیح بدی و از اینفیلتر برای هر چیزی استفاده کنی */
    

همین‌طور که گفتم، استفاده از filter: blur() روی کل body، بهترین راه‌حل نیست چون ممکنه پرفورمنس رو پایین بیاره و حتی روی محتوای مودال هم اثر بذاره مگر اینکه حواست به z-indexها و ساختار HTML باشه.

جدول مقایسه پشتیبانی مرورگرها برای Backdrop-Filter:

3. بلور با SVG فیلترها (پیشرفته و کنترل‌پذیرتر)

اگه دنبال کنترل دقیق‌تر روی افکت بلور هستی یا می‌خوای افکت‌های پیچیده‌تری رو پیاده کنی، SVG Filters یه گزینه عالیه. با SVG می‌تونی فیلتر بلور (Gaussian blur) رو تعریف کنی و بعد با CSS اون فیلتر رو روی عناصر HTML اعمال کنی. این روش کمی پیچیده‌تره ولی انعطاف‌پذیری زیادی بهت میده.

<svg style="position: absolute; width: 0; height: 0;">
    <defs>
        <filter id="blur-modal-bg">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
    </defs>
</svg>
    

این کد SVG رو باید اول فایل HTMLت (مثلاً بعد از <body>) قرار بدی. stdDeviation مقدار تاری رو مشخص می‌کنه.

.modal-backdrop.svg-blur {
    /* فقط برای مرورگرهایی که backdrop-filter ندارن */
    filter: url(#blur-modal-bg);
    -webkit-filter: url(#blur-modal-bg);
}
    

بعد می‌تونی با جاوااسکریپت و همون منطق قبلی، اگه backdrop-filter پشتیبانی نشد، کلاس .svg-blur رو به .modal-backdrop اضافه کنی. این روش هم برای کدهای CSS پیشرفته‌تر و هم برای کنترل دقیق‌تر روی انیمیشن‌های فیلتر خیلی کارآمده.

گام به گام: پیاده‌سازی کامل بلور پس‌زمینه برای مودال

حالا که با روش‌ها آشنا شدی، بیا یه مودال کامل رو با افکت بلور از صفر پیاده‌سازی کنیم. این روش بهترین پرفورمنس رو داره و از backdrop-filter استفاده می‌کنه.

1. ساختار HTML پایه

اول یه دکمه برای باز کردن مودال و خود مودال رو داخل HTML تعریف می‌کنیم. مودال شامل یک لایه پس‌زمینه (backdrop) و محتوای اصلی مودال (content) میشه.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>افکت بلور مودال</title>
    <link rel="stylesheet" href="style.css"> <!-- فایل CSS رو اینجا لینک کن -->
</head>
<body>
    <div class="page-content">
        <h1>صفحه اصلی ما</h1>
        <p>اینجا یه عالمه متن و محتوای جذاب داریم.</p>
        <button id="openModalBtn">باز کردن مودال بلور</button>
        <p>متن بیشتر برای اینکه بلور شدن رو بهتر ببینی...</p>
        <img src="https://picsum.photos/800/600?random=1" alt="پس‌زمینه" style="width: 100%; max-width: 600px; display: block; margin: 20px auto; border-radius: 8px;">
        <p>می‌دونی چی میگم؟</p>
    </div>

    <!-- ساختار مودال -->
    <div id="myModal" class="modal-backdrop">
        <div class="modal-content">
            <h2>خوش اومدی رفیق!</h2>
            <p>این یه مودال با پس‌زمینه تار شده است. چطوره؟</p>
            <button class="close-modal-btn">بستن مودال</button>
            <p style="margin-top: 20px; font-size: 0.9em; color: #666;">سوالی داری؟ می‌تونی با ما تماس بگیری: <a href="tel:09202232789" style="color: #007bff; text-decoration: none;">09202232789</a></p>
        </div>
    </div>

    <script src="script.js"></script> <!-- فایل JavaScript رو اینجا لینک کن -->
</body>
</html>
    

2. استایل‌دهی CSS اصلی (style.css)

حالا وقتشه که به مودال و پس‌زمینه‌اش جون بدیم. یادت باشه، modal-backdrop باید کل صفحه رو بگیره و روی اون بلور رو اعمال کنیم. کدهای وردپرس هم می‌تونن از همین اصول پیروی کنن.

body {
    font-family: 'Vazirmatn', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: right; /* برای راست‌چین */
    background-color: #f4f7f9;
    color: #333;
}

.page-content {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

h1, h2, h3 {
    color: #1a2a47;
}

button {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

button:hover {
    background-color: #0056b3;
}

/* 📌 استایل‌های مودال */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* لایه تیرگی */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0; /* برای انیمیشن محو شدن اولیه */
    visibility: hidden; /* پنهان بودن در حالت اولیه */
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* 💥 هسته بلور پس‌زمینه 💥 */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); /* برای سازگاری */
}

.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 1001; /* باید بالاتر از بک‌دراپ باشه */
    max-width: 90%;
    width: 550px;
    box-sizing: border-box;
    transform: translateY(-20px); /* برای انیمیشن ورود */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-align: right;
}

.modal-backdrop.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.close-modal-btn {
    background-color: #dc3545;
    margin-top: 25px;
}

.close-modal-btn:hover {
    background-color: #c82333;
}

/* 📱💻📺 رسپانسیو بودن */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        padding: 20px;
    }
    .modal-backdrop {
        backdrop-filter: blur(5px); /* بلور کمتر برای موبایل */
        -webkit-backdrop-filter: blur(5px);
    }
    .page-content {
        margin: 15px auto;
        padding: 15px;
    }
}
    

3. منطق JavaScript برای نمایش/پنهان کردن (script.js)

حالا وقتشه با جاوااسکریپت به دکمه‌ها و مودال جون بدیم تا کار کنن. می‌تونی کدهای JS مفید دیگه رو هم از سایت ما ببینی.

document.addEventListener('DOMContentLoaded', () => {
    const openModalBtn = document.getElementById('openModalBtn');
    const myModal = document.getElementById('myModal');
    const closeModalBtn = document.querySelector('.close-modal-btn');
    const body = document.body;

    // تابع برای باز کردن مودال
    openModalBtn.addEventListener('click', () => {
        myModal.classList.add('show');
        body.style.overflow = 'hidden'; // جلوگیری از اسکرول صفحه اصلی
    });

    // تابع برای بستن مودال
    const closeModal = () => {
        myModal.classList.remove('show');
        body.style.overflow = ''; // فعال کردن مجدد اسکرول صفحه اصلی
    };

    closeModalBtn.addEventListener('click', closeModal);

    // بستن مودال با کلیک روی پس‌زمینه (نه روی محتوای مودال)
    myModal.addEventListener('click', (e) => {
        if (e.target === myModal) {
            closeModal();
        }
    });

    // بستن مودال با کلید Escape
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && myModal.classList.contains('show')) {
            closeModal();
        }
    });
});
    

4. بهینه‌سازی و نکات حرفه‌ای

حتی بهترین کد هم می‌تونه بهتر بشه. این نکات بهت کمک می‌کنه یه مودال پرفورمنس بالا و کاربرپسند داشته باشی:

• Hardware Acceleration: ویژگی backdrop-filter به صورت خودکار از GPU استفاده می‌کنه که باعث میشه انیمیشن‌ها و افکت بلور خیلی روون‌تر باشن. این یه مزیت بزرگ نسبت به استفاده از filter: blur() روی کل صفحه است.
• پشتیبانی مرورگر: همیشه با Can I use… چک کن که چه مرورگرهایی از ویژگی‌هات پشتیبانی می‌کنن. اگه نیاز به پشتیبانی گسترده‌تر داشتی، حتماً از @supports در CSS یا منطق جاوااسکریپت برای Fallback استفاده کن.
• Accessibility (دسترسی‌پذیری):
  • وقتی مودال باز میشه، aria-modal="true" و role="dialog" رو به عنصر مودالت اضافه کن.
  • مطمئن شو که کاربر می‌تونه با کلید Tab فقط بین عناصر داخل مودال جابه‌جا بشه (Trap Focus).
  • امکان بستن مودال با کلید Escape رو حتماً فراهم کن.
• رسپانسیو بودن: همونطور که تو کد CSS دیدی، برای موبایل می‌تونی میزان بلور رو کمتر کنی تا حس بهتری بده. مطمئن شو که مودالت تو اندازه‌های مختلف صفحه نمایش خوب دیده میشه و محتواش بهم نمی‌ریزه. کدهای HTML باید طوری باشه که منعطف باشه.

چالش‌ها و راه‌حل‌ها در پیاده‌سازی بلور

معمولاً تو هر پیاده‌سازی یه چالش‌هایی پیش میاد. بیا چندتا از رایج‌ترینشون رو بررسی کنیم:

مشکل 1: عدم پشتیبانی مرورگرهای قدیمی

سناریو: کاربر با یه مرورگر قدیمی وارد سایت میشه و افکت بلور رو نمی‌بینه.

راه‌حل: همونطور که بالاتر اشاره شد، می‌تونی از Fallback استفاده کنی.

• CSS @supports: می‌تونی تو CSS بررسی کنی که آیا مرورگر از backdrop-filter پشتیبانی می‌کنه یا نه. اگه نکرد، یه background-color ساده یا یه لایه تیرگی بدون بلور رو نشون بدی.
• JavaScript Feature Detection: با JS تشخیص بدی و یه کلاس خاص رو به body یا خود modal-backdrop اضافه کنی و تو CSS بر اساس اون کلاس، استایل Fallback رو اعمال کنی.

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6); /* Fallback پیش فرض */
}

@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.4); /* شفافیت کمتر وقتی بلور هست */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}
    

مشکل 2: افت پرفورمنس

سناریو: صفحه کند میشه یا انیمیشن‌ها لگ دارن.

راه‌حل:

• استفاده از backdrop-filter: این روش به دلیل استفاده از GPU، بهترین پرفورمنس رو داره.
• مقدار بلور رو کم کن: بلورهای خیلی زیاد (مثلاً blur(20px)) می‌تونن سنگین باشن. معمولاً blur(5px) تا blur(10px) کافیه و خوب کار می‌کنه.
• فقط در صورت نیاز اعمال کن: بلور رو فقط وقتی مودال بازه فعال کن و بعد از بسته شدن، بردارش. این کار با کلاس‌های .show و .hide تو CSS انجام میشه.

مشکل 3: محتوای مودال هم بلور میشه!

سناریو: مودال باز میشه، ولی محتوای داخل خود مودال (متن، دکمه‌ها) هم تار به نظر میرسه.

راه‌حل: این مشکل معمولاً وقتی پیش میاد که از filter: blur() روی عنصر والد (Parent) استفاده می‌کنی و عنصر فرزند (Child) که همون محتوای مودال باشه، هم تحت تاثیر قرار میگیره.

• استفاده از backdrop-filter: با backdrop-filter این مشکل رو نداری، چون فقط روی چیزی که *پشت* عنصر قرار گرفته اعمال میشه.
• جداسازی عناصر: اگه مجبوری از filter استفاده کنی، مطمئن شو که مودال (یعنی .modal-content) یه عنصر کاملاً جدا از عنصر بلور شده (.modal-backdrop) باشه و فقط روی اون بک‌دراپ بلور رو اعمال کنی، نه روی یه عنصر والد مشترک. همچنین z-index مودال باید بالاتر از بک‌دراپ باشه.

مشکل 4: بلور روی تصاویر یا ویدیوها

سناریو: وقتی پس‌زمینه تصویر یا ویدیو داره، بلور کردنش ممکنه بیش از حد سنگین بشه یا ظاهر عجیبی پیدا کنه.

راه‌حل:

• لایه میانی: می‌تونی یه div خالی رو به عنوان بک‌دراپ بین تصویر/ویدیو پس‌زمینه و مودال اصلی قرار بدی و فقط روی این div میانی، backdrop-filter رو اعمال کنی.
• بلور کمتر: برای تصاویر و ویدیوهای شلوغ، ممکنه بلور کمتر (مثلاً blur(3px)) نتیجه بهتری بده.

مشکل 5: مسائل رسپانسیو (در اندازه‌های متفاوت صفحه نمایش)

سناریو: مودال تو موبایل زیادی بزرگ میشه، محتواش خوب دیده نمیشه، یا بلور تو صفحات کوچک حس خوبی نمیده.

راه‌حل:

• Media Queries: با استفاده از @media کوئری‌ها، می‌تونی استایل‌های خاصی رو برای مودال و بک‌دراپ تو اندازه‌های مختلف صفحه نمایش اعمال کنی. مثلاً برای موبایل width: 95% برای مودال و بلور کمتر برای بک‌دراپ.
• واحد‌های منعطف: از واحدهای نسبی مثل %، vw، vh و rem به جای px استفاده کن تا المان‌ها به خوبی با اندازه صفحه تطبیق پیدا کنن.

عیب‌یابی سریع (Troubleshooting)

اگه افکت بلور درست کار نمی‌کنه یا مشکلی داره، این بخش بهت کمک می‌کنه سریع دلیلشو پیدا کنی:

نتیجه‌گیری

خوشحالم که تا اینجا باهام بودی! حالا دیدی که چقدر راحت می‌تونی با چند خط کد CSS و یه کم جاوااسکریپت، یه افکت بلور شیک و پرفورمنس بالا برای پس‌زمینه مودال‌هات ایجاد کنی. این کار نه تنها به زیبایی رابط کاربریت اضافه می‌کنه، بلکه تجربه کاربری رو هم حسابی بهبود میده. یادت نره که همیشه بهترین و مدرن‌ترین روش‌ها رو انتخاب کنی و برای سازگاری با مرورگرهای قدیمی‌تر هم فکری داشته باشی.

اگه دنبال کدهای آماده و اسنیپت‌های برنامه‌نویسی بیشتری هستی، حتماً یه سر به بلاگ و بخش اسنیپت‌های ما بزن. کلی کدهای پایتون، CSS، JavaScript و HTML اونجا منتظرته. هر کدوم از این‌ها می‌تونه تو پروژه‌های بعدیت حسابی به کارت بیاد. موفق باشی رفیق!

📊 راهنمای سریع و اینفوگرافیک متنی تکنیک‌های بلور

فهرست مطالب

• ۱. چرا تار کردن پس‌زمینه مودال اهمیت دارد؟
• ۲. روش‌های اصلی ایجاد افکت بلور در وب
• ۳. کدهای آماده و نمونه‌های عملی (HTML & CSS & JS)
• ۴. پیاده‌سازی افکت بلور در سیستم‌های مدیریت محتوا
• ۵. مقایسه روش‌های تار کردن پس‌زمینه
• ۶. حل مشکلات رایج و عیب‌یابی سریع
• ۷. سوالات متداول (FAQ)

<div id=“modalOverlay” class=“modal-overlay” style=“display: none;”>
  <div class=“modal-content”>
    <span id=“closeModalBtn” class=“close-btn”>&times;</span>
    <h3 style=“margin-top: 0; color: #1e293b;”>به دنیای کدهای آماده خوش آمدید!</h3>
    <p style=“color: #475569; line-height: 1.6;”>این یک پنجره مودال مدرن با پس‌زمینه تار و افکت بلور فوق‌العاده نرم است. این طراحی کامپیوترها، تبلت‌ها و گوشی‌های همراه را به خوبی پشتیبانی می‌کند.</p>
    <button style=“padding: 10px 20px; background-color: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer; width: 100%; font-family: inherit;”>تایید و ادامه</button>
  </div>
</div>

.modal-content {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 16px;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  position: relative;
  direction: rtl;
}

.close-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #94a3b8;
  transition: color 0.2s;
}
.close-btn:hover {
  color: #ef4444;
}

openBtn.addEventListener(‘click’, () => {
  overlay.style.display = ‘flex’;
});

closeBtn.addEventListener(‘click’, () => {
  overlay.style.display = ‘none’;
});

window.addEventListener(‘click’, (e) => {
  if (e.target === overlay) {
    overlay.style.display = ‘none’;
  }
});

آیا استفاده از backdrop-filter سرعت سایت را کاهش می‌دهد؟

خیر، مرورگرهای مدرن این پردازش بصری را با کمک پردازنده گرافیکی انجام می‌دهند. بنابراین کاهش سرعتی که برای کاربر محسوس باشد اتفاق نخواهد افتاد، مگر اینکه مقدار پیکسل بلور را به شکل غیرمعمولی بزرگ (مثلاً بالای ۵۰ پیکسل) تعریف کنید.

چگونه شدت تار شدن صفحه را در کدهای CSS کنترل کنیم؟

شدت تار شدن به طور مستقیم با مقدار ورودی تابع blur() تغییر می‌کند. هرچه مقدار عددی داخل پرانتز بیشتر باشد (مثلاً blur(20px))، پس‌زمینه بیشتر تار خواهد شد.

آیا امکان ترکیب افکت بلور با تصاویر پس‌زمینه وجود دارد؟

بله، این افکت به طرز شگفت‌انگیزی روی کارت‌هایی که بر روی تصاویر پس‌زمینه رنگارنگ قرار دارند، زیبا جلوه می‌کند و ظاهر بسیار مدرن شبیه به سیستم‌عامل‌های iOS و ویندوز ۱۱ به وب‌سایت شما می‌بخشد.