Glassmorphism ظاهری شبیه سطح شیشه‌ای با شفافیت، محوشدگی زمینه و مرز قابل تشخیص می‌سازد. این سبک می‌تواند لایه‌ها را نشان دهد، اما خود افکت وظیفه خوانایی یا تعامل را انجام نمی‌دهد. باید معلوم باشد Card، پنل یا Navigation چه اطلاعاتی دارد و چرا بخشی از زمینه پشت آن دیده می‌شود. انتخاب صرفاً به دلیل ترند بودن، هزینه و محدودیت را توضیح نمی‌دهد. سطحی که برای متن مهم استفاده می‌شود باید در زمینه‌های واقعی قابل خواندن بماند.
برای مثال فرضی، یک Card خلاصه روی زمینه رنگی قرار می‌گیرد. اگر زمینه در زمان Scroll عوض می‌شود، رنگ نهایی پشت متن هم تغییر می‌کند. نسبت مناسب روی یک Screenshot، رفتار همه موقعیت‌ها را تضمین نمی‌کند. می‌توان بخش اطلاعات ضروری را روی سطح ثابت‌تر گذاشت و افکت را در محدوده تزئینی نگه داشت. هدف، استفاده آگاهانه از لایه است و نه شفاف کردن همه کنترل‌ها به امید ظاهر هماهنگ.
backdrop-filter با filter فرق دارد
مرجع backdrop-filter در MDN اثر روی ناحیه پشت عنصر را توضیح می‌دهد. برای دیده شدن این اثر، سطح عنصر باید کاملاً یا تا حدی شفاف باشد. filter روی خود عنصر و خروجی مربوط اثر دارد و Blur کردن کل Card می‌تواند نوشته را هم محو کند. این دو property جایگزین یکدیگر نیستند. نام شیشه‌ای به معنی یک دستور CSS واحد نیست و نتیجه از ترکیب سطح، زمینه و مرز می‌آید.
Opacity کل عنصر نیز با Alpha رنگ پس‌زمینه فرق دارد. کاهش Opacity می‌تواند نوشته و کنترل‌ها را هم کم‌رنگ کند. برای سطح نیمه‌شفاف، رنگ Background دارای Alpha معمولاً رابطه دقیق‌تری بیان می‌کند. ساختار والد و بعضی Effectها نیز می‌توانند محدوده Backdrop را تغییر دهند. اگر افکت دیده نمی‌شود، فقط مقدار Blur را زیاد نکنید؛ رابطه لایه‌ها و زمینه را بررسی کنید. شفافیت باید به همان قسمت مورد نظر محدود باشد.
متن و مرز کنترل جدا بررسی شوند
Contrast Minimum در WCAG درباره نسبت متن و پس‌زمینه توضیح دارد. سطح ترکیبی پشت متن معیار بررسی است، نه فقط کد رنگ نیمه‌شفاف. یک زمینه دارای چند رنگ یا تصویر می‌تواند ناحیه‌های متفاوت ایجاد کند. توضیح ریز قیمت یا شرط خدمت ضروری است و نباید به دلیل درجه دوم بودن، روی سطح کمContrast رها شود. بزرگ‌نمایی و تغییر طول متن هم ممکن است آن را روی بخش دیگری از زمینه قرار دهند.
Non-text Contrast تشخیص اجزای رابط و اطلاعات گرافیکی لازم را بررسی می‌کند. حاشیه یک‌پیکسلی بسیار کم‌رنگ الزاماً مرز کنترل را روشن نمی‌کند. Card تزئینی و فیلد قابل ورود داده نیاز یکسانی ندارند. Focus دکمه و Link هم باید دیده شود. مقاله Color Contrast درباره این تفکیک کمک می‌کند؛ افکت شیشه‌ای به خودی خود انطباق دسترسی‌پذیری کامل نمی‌سازد.
سطح ثابت و Fallback را از ابتدا تعریف کنید
پشتیبانی مرورگرهای فعلی بهتر شده، اما همه دستگاه‌ها و نسخه‌های قدیمی رفتار یکسان ندارند. ابتدا یک سطح ساده خوانا تعریف کنید و افکت را به عنوان بهبود اضافه کنید. اگر property پشتیبانی نشد، اطلاعات و کنترل‌ها باید باقی بمانند. @supports می‌تواند برای همین انتخاب استفاده شود، ولی نتیجه فنی پشتیبانی به معنی مناسب بودن عملکرد یا Contrast نیست. Fallback نباید یک Card تقریباً نامرئی باشد که بدون Blur معنی خود را از دست می‌دهد.
کاربر هم ممکن است سطح مات را ترجیح دهد. گزینه خاموش کردن شفافیت می‌تواند در محصولی که استفاده طولانی دارد مفید باشد. Preferenceهای سیستم، حالت Forced Colors و محدودیت حرکت باید با دامنه واقعی محصول هماهنگ شوند. کاهش حرکت با کاهش شفافیت یک گزینه واحد نیست. اگر افکت فقط زیبایی دارد، حذف آن نباید کارکرد را تغییر دهد. مقاله Design System برای تعریف حالت‌های مجاز سطح کمک می‌کند.
نمونه کامل با سطح مات جایگزین
فایل زیر را glass-demo.html ذخیره و مستقیم در مرورگر باز کنید. HTML، CSS و JavaScript لازم در همان فایل است و تصویر یا Dependency بیرونی ندارد. زمینه از Gradientهای CSS ساخته شده است. سطح پایه سفید است و در مرورگر پشتیبانی‌کننده افکت فعال می‌شود. دکمه سطح مات، آن را خاموش می‌کند و دکمه زمینه، رنگ پشت Card را تغییر می‌دهد. نمونه برای مشاهده رابطه است و هیچ نسبت Contrast اندازه‌گیری‌شده یا امتیاز عملکردی برای آن اعلام نشده است.
<!doctype html><html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>نمونه سطح شیشه‌ای</title><style>
*{box-sizing:border-box}body{margin:0;min-height:100svh;padding:2rem 1rem;display:grid;place-items:center;font:1rem/1.8 Tahoma,sans-serif;color:#111;background:radial-gradient(circle at 20% 20%,#e9b879,transparent 55%),linear-gradient(135deg,#8db5c5,#cbdcc3)}body.alternate{background:radial-gradient(circle at 80% 20%,#526c9d,transparent 55%),linear-gradient(135deg,#152338,#86b09e)}.glass{max-width:38rem;width:100%;padding:1.5rem;background:#fff;border:2px solid #111;border-radius:1rem}a{color:#111;text-decoration:underline}button{font:inherit;padding:.5rem .8rem;margin:.3rem;background:#fff;color:#111;border:2px solid #111}a:focus-visible,button:focus-visible{outline:3px solid #111;outline-offset:4px}@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}body.solid .glass{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}@media(forced-colors:active){body,body.alternate{background:Canvas;color:CanvasText}.glass,body.solid .glass{background:Canvas;color:CanvasText;border-color:CanvasText;backdrop-filter:none;-webkit-backdrop-filter:none}a,button{color:CanvasText}a:focus-visible,button:focus-visible{outline-color:Highlight}}
</style></head><body><main class="glass"><h1>خلاصه آموزشی</h1><p>افکت بخشی از ظاهر است؛ اطلاعات باید در حالت مات هم قابل خواندن بماند.</p><p><a href="#details">مشاهده توضیح</a></p><section id="details"><h2>محدوده نمونه</h2><p>این Card یک Dialog نیست و داده‌ای به سرور نمی‌فرستد.</p></section><button id="solid" type="button" aria-pressed="false">سطح مات</button><button id="background" type="button">تغییر زمینه</button><p id="status" role="status">حالت نمایشی پیش‌فرض</p></main><script>
document.getElementById('solid').onclick=event=>{const enabled=document.body.classList.toggle('solid');event.currentTarget.setAttribute('aria-pressed',String(enabled));document.getElementById('status').textContent=enabled?'سطح مات انتخاب شد.':'حالت نمایشی انتخاب شد؛ پشتیبانی مرورگر ممکن است متفاوت باشد.'};document.getElementById('background').onclick=()=>{document.body.classList.toggle('alternate');document.getElementById('status').textContent='زمینه تغییر کرد؛ رابطه متن و سطح را بررسی کنید.'};
</script></body></html>
glass کلاس Card واقعی است و متن، Link و دو دکمه در همان ساختار قرار دارند. در حالت پیش‌فرض، Opacity کل Card کم نشده و نوشته رنگ مستقل دارد. @supports رنگ نیمه‌شفاف و Blur را اعمال می‌کند. class solid سطح مات را با اولویت مناسب برمی‌گرداند و aria-pressed وضعیت انتخاب کاربر را نشان می‌دهد. تغییر زمینه برای دیدن محدودیت ترکیب رنگ است، نه برای شبیه‌سازی همه تصاویر یا همه موقعیت‌های Scroll محصول.
در Forced Colors، زمینه و Card به رنگ‌های سیستم برمی‌گردند و Filter برداشته می‌شود. Focus کنترل‌ها به صورت مستقل تعریف شده است. متن نتیجه در status تغییر می‌کند و اطلاعات اصلی حتی بدون JavaScript هم قابل خواندن است. دکمه‌ها رفتار محلی دارند و شبکه‌ای استفاده نمی‌کنند. اگر کد را برای Modal تغییر می‌دهید، مدیریت Focus و خروج به قرارداد جدا نیاز دارد؛ یک Card شیشه‌ای با Overlay، خودکار Dialog قابل دسترس نمی‌شود.
Blur بیشتر همیشه نتیجه بهتر نیست
مقدار Blur باید با اندازه ناحیه و زمینه هماهنگ باشد. مقدار خیلی کم ممکن است شلوغی را باقی بگذارد و مقدار زیاد با سطح بزرگ هزینه بیشتری ایجاد کند. هیچ عدد ثابت برای بهترین نتیجه همه دستگاه‌ها وجود ندارد. چند Card هم‌پوشان یا سطح تمام‌صفحه می‌تواند هزینه Render متفاوتی داشته باشد. اگر صفحه کند است، مسئله را با ابزار مناسب در همان مسیر بررسی کنید و فقط از روی وجود افکت درباره علت قطعی حکم ندهید.
تغییر پیوسته زمینه یا حرکت لایه پشت پنل می‌تواند هزینه و حواس‌پرتی ایجاد کند. افکت برای فهم محتوا لازم نیست اگر فقط تزئینی است. مقاله عملکرد React درباره تفکیک Render Framework و هزینه مرورگر توضیح دارد. افزودن Memoization به Component لزوماً هزینه Filter بزرگ را حل نمی‌کند. مدل بهینه‌سازی باید با همان لایه‌ای مرتبط باشد که زمان یا منابع مصرف می‌کند.
لایه‌ها وظیفه داشته باشند
شفافیت می‌تواند حضور محتوای پشت را نشان دهد، اما اگر کاربر نباید با آن محتوا تعامل کند، رفتار باید مشخص باشد. Navigation شفاف روی متن اصلی می‌تواند دیدن مرز بخش‌ها را سخت کند. در Modal، تیره یا محو کردن زمینه به تنهایی تعامل پشت را متوقف نمی‌کند. مقاله Lightbox و Dialog درباره Focus و خروج کمک می‌کند. طراحی لایه باید از نقش تعامل بیاید و CSS افکت فقط ظاهر همان تصمیم را بسازد.
z-indexهای پراکنده برای حل هر برخورد، نگهداری را سخت می‌کنند. ترتیب لایه‌ها را با نقش نام‌دار تعریف کنید و محدوده Stacking Context را بشناسید. Card تزئینی نباید روی پیام خطا یا کنترل مهم بیفتد. سایه و حاشیه هم باید با سطح و زمینه سازگار باشند. اگر چند Style هم‌زمان برای برجسته کردن یک پنل لازم شده‌اند، شاید ساختار یا Contrast پایه نیاز به اصلاح داشته باشد و اضافه کردن Effect تازه پاسخ اصلی نباشد.
محتوای واقعی، تصمیم Style را تغییر می‌دهد
متن بلند، پیام خطا و عددهای بزرگ می‌توانند Card را گسترش دهند. Height ثابت ممکن است محتوا را ببرد و اثر شیشه‌ای این مشکل را پنهان نمی‌کند. در رابط فارسی، جهت، شکست سطر و متن انگلیسی کنار عدد باید بررسی شوند. مقاله Spacing برای رابطه گروه‌ها و رشد محتوا زمینه دارد. ظاهر یک Card کوتاه در Hero را به همه فرم‌ها یا گزارش‌ها تعمیم ندهید.
برای سطح اطلاعاتی مهم، می‌توان Alpha بیشتر یا Background ثابت انتخاب کرد و افکت را محدود نگه داشت. نتیجه شاید کمتر شبیه نمونه نمایشی باشد و برای کار واقعی مناسب‌تر. این انتخاب شکست سبک نیست؛ هدف محصول خواندن و اقدام است. مقاله ترندهای طراحی درباره تفاوت روند و دستور عمومی توضیح دارد. نام Glassmorphism نباید جلوی حذف بخش نامناسب آن در یک کاربرد خاص را بگیرد.
قرارداد سطح را قابل تحویل نگه دارید
در تحویل، رنگ سطح، مرز، Blur، حالت مات و محدوده کاربرد مشخص باشند. بنویسید روی کدام زمینه‌ها استفاده مجاز است و کدام محتوا به سطح ثابت نیاز دارد. اگر گزینه کاربر وجود دارد، وضعیت آن در طراحی و کد هماهنگ باشد. Fallback و حالت‌های سیستم هم بخشی از Component هستند و بعداً به عنوان وصله اضافه نشوند. نتیجه باید بدون افکت نیز معنی و اطلاعات اصلی را نگه دارد.
شروع مناسب یک پنل کوچک با محتوای واقعی است. سطح پایه خوانا بسازید، افکت را محدود اضافه کنید و زمینه و طول متن را تغییر دهید. سپس تصمیم را با شواهد همان کاربرد نگه دارید یا حذف کنید. Glassmorphism می‌تواند زبان لایه‌بندی باشد، اما کیفیت از کنترل خوانایی، تعامل و هزینه می‌آید. تصویر نمایشی زیبا نباید جای قرارداد کامل برای شرایط واقعی محصول را بگیرد.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!