افکت شیشه ای پس زمینه با CSS

افکت شیشه‌ای یا Glassmorphism یکی از ترندهای طراحی رابط کاربری است که ظاهری شفاف، مات و شبیه به شیشه را به عناصر صفحه می‌دهد. این افکت معمولاً با ترکیب شفافیت، تاری پس‌زمینه (blur)، و حاشیه‌های نیمه‌شفاف همراه است. در این مقاله به صورت عملیاتی و تکنیکی روش‌های پیاده‌سازی، بهینه‌سازی و نکات سازگاری را با مثال‌های واقعی توضیح می‌دهیم.

چه‌چیزی است و چرا محبوب؟

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

پیاده‌سازی پایه‌ای (فقط CSS و HTML)

<div class="hero">
  <div class="glass-card">
    <h2>Glass Card</h2>
    <p>This is a simple frosted glass effect using backdrop-filter.</p>
  </div>
</div>

/* CSS */.hero {
  min-height: 100vh;
  background-image: url('background.jpg');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.glass-card {
  width: 320px;
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  color: #fff;
}

توضیح: در این مثال یک کارت شیشه‌ای ساده ساخته شده است. خاصیت backdrop-filter: blur(8px) باعث تار شدن محتوای پشت کارت می‌شود. مقدار background: rgba(255,255,255,0.12) شفافیت داخلی کارت را تنظیم می‌کند و border و box-shadow برای ایجاد عمق استفاده شده‌اند. برای سافاری از پیشوند -webkit-backdrop-filter استفاده شده است.

فیل‌بک برای مرورگرهای قدیمی (Progressive Enhancement)

/* Fallback approach using @supports */.glass-card {
  /* default fallback for browsers without backdrop-filter */  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}

/* enable real blur where supported */@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .glass-card {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

توضیح: این الگو از تکنیک Progressive Enhancement استفاده می‌کند. ابتدا یک نسخهٔ قابل قبول برای همه مرورگرها با گرادیان و شفافیت تعریف می‌کنیم، سپس با @supports ویژگی واقعی تاری را فعال می‌کنیم. این روش باعث می‌شود تجربهٔ پایه برای همه حفظ شود و در مرورگرهای مدرن افکت کامل نمایش یابد.

نسخهٔ بهینه‌تر: حاشیه‌های گرادیان و گوشه‌های دقیق

.glass-card {
  position: relative;
  padding: 1.5rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

/* gradient border */.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* border thickness */  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

توضیح: در این نسخه از یک شبه‌عنصر (::before) برای ایجاد حاشیهٔ گرادیان استفاده شده که بدون تداخل با محتوای داخلی، نما و گوشه‌های کارت را زیباتر می‌کند. استفاده از ماسک‌ها باعث می‌شود حاشیه فقط در اطراف محتوا ظاهر شود.

نکات عملکردی و بهینه‌سازی

• محدود کردن ناحیه‌ای که backdrop-filter روی آن اعمال می‌شود باعث حفظ عملکرد می‌شود — افکت را فقط روی کارت‌ها یا مدال‌ها اعمال کنید، نه صفحهٔ کامل.
• مقدار blur را کم نگه دارید (مثلاً 6–12px) تا مصرف GPU کاهش یابد.
• در موبایل با سخت‌افزار ضعیف تست کنید؛ در صورت نیاز fallback ساده‌تر ارائه دهید.
• از will-change: transform یا translateZ(0) فقط در شرایط لازم استفاده کنید؛ زیاده‌روی باعث مصرف منابع می‌شود.

سازگاری مرورگر

موارد استفاده و سناریوهای کاربردی

• کارت‌های اطلاعاتی روی تصاویر هِرو (hero) برای نمایش خلاصهٔ محتوا در حالی که تصویر پشت همچنان قابل مشاهده است.
• پن‌ها یا مدال‌های بالاآوری (popover) که می‌خواهند حواس کاربر را جلب کنند بدون پنهان کردن زمینهٔ رابط.
• منوها و نوارهای ابزار شفاف در برنامه‌های وب که عمق و سلسله‌مراتب را بهتر نشان می‌دهند.

مثال کامل: کارت شیشه‌ای در یک هِرو

<div class="hero">
  <div class="glass-card">
    <h2>Welcome</h2>
    <p>A modern frosted glass UI card example.</p>
    <button>Learn more</button>
  </div>
</div>

.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('city.jpg') center/cover no-repeat;
  padding: 2rem;
}

.glass-card {
  width: 360px;
  padding: 1.5rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  color: #fff;
}

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

خلاصه و توصیه‌ها

افکت شیشه‌ای با CSS قدرت ایجاد طراحی‌های مدرن و زیبا را دارد، اما باید با توجه به عملکرد و سازگاری مرورگر پیاده‌سازی شود. از تکنیک Progressive Enhancement استفاده کنید، مقدار blur را منطقی انتخاب کنید، و در صورت لزوم برای مرورگرهای قدیمی فیل‌بک مناسب قرار دهید. ترکیب درست رنگ‌ها، پرسپکتیو و سایه‌ها باعث می‌شود افکت طبیعی‌تر و حرفه‌ای‌تر به نظر برسد.

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

ارسال