ساخت افکت مایع (Liquid Effect) با CSS

افکت‌های مایع یا «liquid» در طراحی وب به اشکال نرم، شناور و در حال ترکیب اشاره دارند که معمولاً برای پس‌زمینه‌ها، دکمه‌ها یا عناصر تعاملی استفاده می‌شوند. این افکت‌ها جذابیت بصری بالا دارند و می‌توانند حس حرکت و لطافت را منتقل کنند. در این مقاله به روش‌های مختلف ساخت افکت مایع با CSS (و در صورت نیاز ترکیب با SVG) می‌پردازیم، نمونه‌های عملی، نکات بهینه‌سازی و دسترسی را نیز پوشش می‌دهیم.

روش‌های عمومی پیاده‌سازی

• افکت‌های ساده با border-radius، gradient و انیمیشن transform
• استفاده از فیلتر blur و mix-blend-mode برای ایجاد حس «ذوب شدن»
• فیلتر SVG معروف به «gooey» که نقاط جدا را به هم متصل می‌کند
• استفاده از mask/clip-path برای شکل‌دهی پیشرفته

مثال 1 — بلاب مایع ساده با CSS

/* HTML structure:
<div class="liquid">

<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
</div>

*/ .liquid { position: relative; width: 300px; height: 200px; background: linear-gradient(135deg, #1e90ff, #6a5acd); border-radius: 18px; overflow: hidden; } .blob { position: absolute; width: 120px; height: 120px; background: rgba(255,255,255,0.15); border-radius: 50%; filter: blur(18px); animation: float 6s infinite ease-in-out; mix-blend-mode: screen; } .blob:nth-child(1){ left: 10%; top: 30%; animation-delay: 0s; } .blob:nth-child(2){ left: 40%; top: 10%; animation-delay: 1.5s; } .blob:nth-child(3){ left: 70%; top: 40%; animation-delay: 3s; } @keyframes float { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.1); } 100% { transform: translateY(0) scale(1); } }

توضیح: این کد یک کانتینر با زمینه گرادیانت می‌سازد و سه عنصر دایره‌ای (blob) را با فیلتر blur و mix-blend-mode قرار می‌دهد. حرکت ساده با انیمیشن float ایجاد می‌شود تا حس شناوری و نرم بودن پدید آید. mix-blend-mode باعث می‌شود لایه‌ها هنگام همپوشانی روشن‌تر و «ذوب‌شونده» به نظر برسند.

مثال 2 — افکت «gooey» با SVG + CSS (پیشرفته)

<svg width="0" height="0">
  <filter id="goo" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
    <feColorMatrix in="blur" mode="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 18 -7" result="goo" />
    <feBlend in="SourceGraphic" in2="goo" />
  </filter>
</svg>

<div class="gooey">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

.gooey { filter: url(#goo); position: relative; width: 300px; height: 180px; background: linear-gradient(90deg,#ff7a7a,#ffd57a); border-radius: 16px; overflow: hidden; }
.dot { position: absolute; width: 80px; height: 80px; background:#fff; border-radius: 50%; animation: move 4s infinite; }
.dot:nth-child(1){ left:10%; top:50%; animation-delay:0s; }
.dot:nth-child(2){ left:40%; top:20%; animation-delay:1s; }
.dot:nth-child(3){ left:70%; top:60%; animation-delay:2s; }
@keyframes move {
  0%{ transform: translate(0,0) }
  50%{ transform: translate(0,-30px) }
  100%{ transform: translate(0,0) }
}

توضیح: در این روش از یک فیلتر SVG (feGaussianBlur + feColorMatrix) استفاده می‌شود که وقتی عناصر سفید رنگ نزدیک هم قرار می‌گیرند، لبه‌ها را به هم متصل کرده و افکت «گوئی» یا چسبناک ایجاد می‌کند. مزیت این روش ترکیب پذیری و کنترل بسیار بالا روی شدت اتصال و تاری است.

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

• برای عملکرد بهتر از transform و opacity به جای تغییر layout استفاده کنید (avoid top/left animations اگر ممکن است).
• از will-change برای اطلاع به مرورگر استفاده کنید با احتیاط — بیش از حد مصرف حافظه می‌کند.
• blur و فیلترهای SVG هزینه محاسباتی بالاتری دارند؛ برای موبایل مقدار stdDeviation یا blur را کم کنید.
• استفاده از prefers-reduced-motion برای احترام به تنظیمات کاربر (دسترس‌پذیری).

/* بهینه‌سازی برای کاهش حرکت */@media (prefers-reduced-motion: reduce) {
  .blob, .dot { animation: none; transform: none; }
  .blob { filter: blur(6px); }
}

توضیح: این قطعه کد با استفاده از media query مربوط به prefers-reduced-motion انیمیشن‌ها را غیرفعال یا کاهش می‌دهد تا کاربران حساس یا دارای حرکت محدود تجربه مناسبی داشته باشند.

نمونه جدول مقایسه‌ای: خواص کلیدی

نمونه بهبود یافته — استفاده از transform سه‌بعدی برای رندر GPU

.blob {
  will-change: transform;
  transform: translate3d(0,0,0);
  /* بقیه استایل‌ها مثل قبل */}

توضیح: translate3d و will-change می‌توانند render را به GPU واگذار کنند تا انیمیشن روان‌تر شود. اما استفاده بی‌رویه می‌تواند حافظه و زمان رندر را اشغال کند؛ بنابراین فقط برای عناصر مهم به کار ببرید.

موارد استفاده و توصیه‌های طراحی

• پس‌زمینه صفحات لندینگ برای جلب توجه بصری.
• دکمه‌ها و کارت‌ها برای القای حس تعاملی و نرم.
• لوودینگ‌های تعاملی یا آیکون‌های زنده.

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

نتیجه‌گیری و نکته‌های حرفه‌ای

افکت مایع با CSS می‌تواند از ساده تا پیچیده متغیر باشد. برای پروژه‌های سریع از ترکیب gradient + blur + mix-blend-mode استفاده کنید. برای جلوه‌های قوی‌تر و کنترل دقیق، از فیلتر SVG gooey بهره ببرید. همیشه عملکرد، دسترسی و هماهنگی رنگ را در نظر بگیرید و از prefers-reduced-motion و بهینه‌سازی GPU برای تجربه کاربری بهتر استفاده کنید.

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

ارسال