روش ایجاد افکت بلور یکنواخت در مرورگرهای مختلف

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

در واقع برای داشتن افکتی مشابه در همه مرورگرها باید چندین خاصیت CSS را به صورت ترکیبی به کار ببریم. این خواص ممکن است در هر مرورگر نام خاصی داشته باشند و یا برخی از آنها به صورت کلی توسط مرورگر پشتیبانی نشود.

برای مثال، خاصیت backdrop-filter یکی از راه‌های کاربردی بالفعل برای این کار است؛ اما لازم است بدانید که همه مرورگرها این خاصیت را به طور مستقیم پشتیبانی نمی‌کنند و باید از پیش‌پردازنده‌هایی برای حل این مشکل استفاده کنید.

یکی از راهکارهای دیگر استفاده از یک لایه شفاف با رنگ سفید و اعمال بلور به آن است. این روش به ساده‌سازی کار کمک می‌کند و در عین حال توانایی ایجاد افکت بلور مطلوبی را دارد.

در ادامه به توضیح و بررسی یک قطعه کد برای پیاده‌سازی این افکت در پروژه‌های خود می‌پردازیم.

قطعه کد نمونه

<style>
  .blur-background {
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 1;
  }
</style>

<div class="blur-background">
  <div class="overlay"></div>
  <!-- محتوای زمینه -->
</div>

توضیح خط به خط کد