צורות מורכבות

סקירה כללית

כדי לחתוך אלמנטים לצורות מורכבות וגמישות כמו משיכות מכחול או טקסטורות אורגניות, משתמשים ב-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);
  }
}