افکت گلس مورفیسم روی تصویر با CSS

گلس مورفیسم (Glassmorphism) سبک طراحی شفافی است که با استفاده از بلور، شفافیت و سایه‌ها، حس «شیشه» یا «فرو رفتگی» روی رابط کاربری ایجاد می‌کند. وقتی این افکت روی تصویر پس‌زمینه اعمال می‌شود، نتیجه ظاهری مدرن و جذاب خواهد بود — اما برای پیاده‌سازی صحیح نیاز به آگاهی از backdrop-filter، لایه‌بندی و مسائل مربوط به پشتیبانی مرورگر و کارایی داریم.

مفاهیم کلیدی

• backdrop-filter: فیلترهایی مثل blur و saturate که روی محتوای پشت عنصر اعمال می‌شوند.
• شفافیت نیمه‌تراوا: با rgba یا gradients شیشه‌ای را شبیه‌سازی می‌کنیم.
• لایه‌بندی: قرار دادن المان شیشه‌ای به صورت پوشش (overlay) روی تصویر.
• پشتیبانی مرورگر و fallback: برخی مرورگرها نیاز به -webkit-backdrop-filter یا راه‌حل جایگزین دارند.

نمونه ساده — کارت گلس مورفیسم روی تصویر

<div class="card">
  <img src="photo.jpg" alt="background" class="card-bg">
  <div class="glass">
    <h3>عنوان</h3>
    <p>متنی کوتاه روی افکت گلس.</p>
  </div>
</div>

کد HTML بالا ساختار ساده‌ای نشان می‌دهد: تصویر زمینه و یک لایه شیشه‌ای که روی تصویر قرار می‌گیرد.

/* CSS */.card{
  position: relative;
  width: 360px;
  height: 240px;
  overflow: hidden;
  border-radius: 16px;
}

.card-bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* glass overlay */.glass{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12); /* شیشه نیمه شفاف */  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  color: #fff;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%); /* Safari */}

در این CSS، کلاس .glass از backdrop-filter: blur() برای بلور کردن محتوای پشت خود استفاده می‌کند و با background: rgba() شفافیتی شبیه شیشه ایجاد می‌شود. همچنین برای Safari از پیشوند -webkit-backdrop-filter استفاده شده است.

نسخه بهینه‌تر — استفاده از pseudo-element برای کنترل بهتر

/* HTML شبیه قبل */.glass{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 18px;
  border-radius: 14px;
  color: #fff;
  overflow: hidden; /* مهم برای clip شدن افکت */}

/* pseudo overlay */.glass::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  pointer-events: none;
}

استفاده از ::before اجازه می‌دهد محتوای داخل عنصر (مثل متن و دکمه‌ها) از افکت جدا باشد و کنترل بهتری روی ترتیب لایه‌ها داشته باشیم. همچنین overflow: hidden تضمین می‌کند گوشه‌های گرد به‌درستی کار کنند.

Fallback برای مرورگرهایی که backdrop-filter پشتیبانی نمی‌کنند

/* Fallback: رنگ نیمه شفاف + بکدراپ تیره */.glass.no-backdrop{
  background: rgba(255,255,255,0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* یا استفاده از تصویر بلور شده (دقیق‌تر اما سنگین‌تر) */.glass.fallback{
  background-image: url('photo-blur.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.95;
}

در اینجا دو راه‌حل ارائه شده است: اول اعمال یک پس‌زمینه نیمه‌شفاف ساده و دوم استفاده از نسخهٔ از پیش بلور شدهٔ تصویر به عنوان پس‌زمینهٔ لایهٔ گلس. گزینهٔ دوم با هزینهٔ حجم و بارگذاری همراه است ولی خروجی یکسانی در مرورگرهای قدیمی‌تر می‌دهد.

نمونه با clip-path و شکل‌های غیرمستطیل

.glass{
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

قابلیت clip-path به شما امکان می‌دهد افکت گلس را در اشکال سفارشی قرار دهید — برای کارت‌ها یا چاشنی‌های بصری مناسب است. باید مراقب باشید که clip-path بر عملکرد و رندر تأثیر دارد.

جدول پشتیبانی و نکات فنی

نکات عملکردی و دسترسی (Accessibility)

• backdrop-filter بازده پردازشی دارد؛ روی دستگاه‌های ضعیف ممکن است افت فریم ایجاد کند. از مقادیر بلور پایین‌تر و استفاده هوشمندانه (محدود به بخش‌های کوچک) استفاده کنید.
• برای بهبود رندر، از will-change: filter یا will-change: backdrop-filter در عناصر پویا تنها هنگام نیاز استفاده کنید؛ نگهداری طولانی این ویژگی ممکن است منابع GPU را مصرف کند.
• مراقب کنتراست متن روی پس‌زمینهٔ شیشه باشید. اگر متن قابل خواندن نیست، از overlay تیره یا افزایش شفافیت استفاده کنید تا معیارهای دسترس‌پذیری AA یا AAA برآورده شود.
• در صورتی که محتوا تعاملی است، مطمئن شوید که عناصر شیشه‌ای دسترسی صفحه‌کلید و فوکوس را حفظ می‌کنند.

موارد استفاده و ایده‌ها

• کارت‌های پروفایل روی تصاویر پس‌زمینه
• پنل‌های اطلاعات در هِرو (hero) وب‌سایت
• دیالوگ‌ها و منوهای معلق که نباید کل صفحه را پوشش دهند
• طراحی اپلیکیشن‌های وب مدرن با ظاهر مینیمال و شفاف

خلاصه و بهترین شیوه‌ها

گلس مورفیسم روی تصویر می‌تواند تجربهٔ بصری بسیار دل‌نشینی خلق کند، اما باید متعادل و با توجه به پشتیبانی مرورگر و کارایی عرضه شود. از ترکیب backdrop-filter و rgba برای ساخت شیشهٔ واقعی استفاده کنید، برای Safari از -webkit-backdrop-filter بهره ببرید و همواره یک fallback مناسب در نظر داشته باشید.

اگر می‌خواهید من یک کامپوننت قابل استفادهٔ React/Vanilla آماده با کنترل fallback و گزینه‌های سفارشی‌سازی تولید کنم، کافیست بگویید تا یک مثال کامل و آمادهٔ جایگذاری بنویسم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال