شکل‌های پیچیده

نمای کلی

برای برش دادن عناصر به شکل‌های پیچیده و آزاد مانند ضربه‌های قلم‌مو یا بافت‌های طبیعی، از «ماسک‌گذاری CSS» (mask-image) استفاده کنید. درحالی‌که clip-path برای شکل‌های هندسی یا مسیرهای برداری عالی است، mask-image به شما امکان می‌دهد از تصاویر (مانند PNG با شفافیت) یا SVG برای تعریف ناحیه قابل‌مشاهده یک عنصر استفاده کنید. این رویکرد گویاتر است زیرا از نیمه‌شفافی پشتیبانی می‌کند و امکان ایجاد لبه‌های نرم و بافت‌های پیچیده را فراهم می‌کند که دستیابی به آن‌ها با clip-path دشوار یا غیرممکن است.

پیاده‌سازی

برای پیاده‌سازی شکل‌های پیچیده بااستفاده از ماسک‌های CSS:

استفاده از شفافیت تصویر

می‌توانید از شفافیت تصویر به‌عنوان ماسک استفاده کنید، به‌طوری‌که قسمت‌های مات رؤیت‌پذیر و قسمت‌های شفاف پنهان باشند. این می‌تواند PNG،‏ SVG، یا تصویر دیگری با شفافیت، یا تصویر تولیدشده‌ای مثل گرادیان CSS باشد.

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

استفاده از عنصر SVG در HTML

همچنین می‌توانید به عنصر <mask> تعریف‌شده در SVG درون‌خطی در HTML صفحه‌تان ارجاع دهید. از maskContentUnits="objectBoundingBox" استفاده کنید تا ماسک به‌طور خودکار با اندازه عنصر مقیاس‌بندی شود. این به مرورگر می‌گوید که همه مختصات داخل ماسک را به‌عنوان کسری از 0 تا 1 (مانند 0.5 برای ۵۰٪) به‌جای پیکسل‌های مطلق تفسیر کند.

ماسک‌گذاری درخشندگی درمقابل آلفا: به‌طور پیش‌فرض، ماسک‌های SVG از درخشندگی (روشنایی) برای تعیین میزان تیرگی استفاده می‌کنند، به‌طوری‌که سفید آشکار می‌کند، سیاه پنهان می‌کند، و خاکستری نیمه‌شفافیت ایجاد می‌کند. اگر می‌خواهید ماسک به‌جای آن از کانال آلفا (شفافیت) شکل‌های SVG شما استفاده کند، می‌توانید mask-type: alpha; را در CSS خود یا mask-type="alpha" را مستقیماً روی عنصر SVG <mask> مشخص کنید.

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

راهبردهای جایگزین

اگر مرورگری از mask-image یا نسخه پیشوندی پشتیبانی نکند:

• عنصر برش داده نخواهد شد و به‌صورت مستطیل معمولی نمایش داده می‌شود.
• مطمئن شوید که محتوا همچنان خوانا است و چیدمان بدون ماسک (ارتقای پیش‌رو) به‌هم نمی‌ریزد.
• درصورت تمایل، از تشخیص ویژگی برای ارائه شکل جایگزین ساده‌تر با clip-path استفاده کنید.

/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}