أشكال معقّدة

نظرة عامة

لاقتصاص العناصر إلى أشكال معقّدة وحرة، مثل ضربات الفرشاة أو الأنسجة العضوية، استخدِم CSS Masking (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 لنسبة %50) بدلاً من وحدات البكسل المطلقة.

قناع الإضاءة مقابل قناع ألفا: تستخدم أقنعة 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);
  }
}