החלת אפקטים על תמונות באמצעות מאפיין המסכה של CSS'

שימוש במסכות CSS מאפשר לכם להשתמש בתמונה כשכבת מסכה. פירוש הדבר הוא שאפשר להשתמש בתמונה, ב-SVG או בפס כהה כמסכה כדי ליצור אפקטים מעניינים בלי עורך תמונות.

Rachel Andrew

כשחותכים רכיב באמצעות המאפיין clip-path, האזור שנחתך הופך לבלתי גלוי. אם במקום זאת רוצים להפוך חלק מהתמונה לא שקוף או להחיל עליה אפקט אחר, צריך להשתמש במסכה. בפוסט הזה נסביר איך להשתמש במאפיין mask-image ב-CSS, שמאפשר לציין תמונה לשימוש כשכבת מסכה. כך יהיו לכם שלוש אפשרויות. אפשר להשתמש בקובץ תמונה כמסכה, בקובץ SVG או בפס צבעים.

תאימות דפדפן

ברוב הדפדפנים יש תמיכה חלקית בלבד במאפיין הסטנדרטי של אנונימיזציה ב-CSS. כדי להשיג את התאימות הטובה ביותר לדפדפנים, צריך להשתמש בתחילית -webkit- בנוסף למאפיין הרגיל. מידע מלא על תמיכה בדפדפנים זמין במאמר האם אפשר להשתמש במסכות CSS?

תמיכת הדפדפנים בשימוש במאפיין עם הקידומת טובה, אבל כשמשתמשים במיסוך כדי להפוך טקסט מעל תמונה למודיעין, צריך להחליט מה יקרה אם המיסוך לא יהיה זמין. כדאי להשתמש בשאילתות תכונות כדי לזהות תמיכה ב-mask-image או ב--webkit-mask-image ולספק חלופה קריאה לפני שמוסיפים את הגרסה המטושטשת.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

שימוש בתמונה כמסכה

המאפיין mask-image פועל באופן דומה למאפיין background-image. משתמשים בערך url() כדי להעביר תמונה. לתמונה של המסכה צריך להיות אזור שקוף או אזור שקוף למחצה.

אזור שקוף לגמרי יגרום לחלק מהתמונה שמתחת לאזור הזה להיות בלתי נראה. עם זאת, שימוש באזור שקוף למחצה יאפשר לחלק מהתמונה המקורית להופיע. אפשר לראות את ההבדל ב-Glitch שבהמשך. התמונה הראשונה היא התמונה המקורית של הבלונים ללא מסכה. בתמונה השנייה הוחלפה מסכה עם כוכב לבן על רקע שקוף לגמרי. בתמונה השלישית מוצג כוכב לבן על רקע עם שקיפיות בגוונים משתנים.

בדוגמה הזו אני משתמש גם במאפיין mask-size עם ערך cover. המאפיין הזה פועל באותו אופן כמו background-size. אפשר להשתמש במילות המפתח cover ו-contain, או לתת לרקע גודל באמצעות כל יחידת אורך חוקית או אחוז.

אפשר גם לחזור על המסכה בדיוק כמו שמחזירים תמונה ברקע, כדי להשתמש בתמונה קטנה כתבנית חוזרת.

מסקינג באמצעות SVG

במקום להשתמש בקובץ תמונה כמסכה, אפשר להשתמש ב-SVG. יש כמה דרכים לעשות זאת. האפשרות הראשונה היא להוסיף אלמנט <mask> בתוך קובץ ה-SVG ולהפנות למזהה של האלמנט הזה בנכס mask-image.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

היתרון של הגישה הזו הוא שאפשר להחיל את המסכה על כל רכיב HTML, ולא רק על תמונה. לצערנו, Firefox הוא הדפדפן היחיד שתומך בגישה הזו.

עם זאת, לא הכל אבוד. בתרחיש הנפוץ ביותר של הוספת מסכה לתמונה, אפשר לכלול את התמונה בקובץ ה-SVG.

מיסוך באמצעות שינוי הדרגתי

שימוש בפס אנכי ב-CSS כמסכה היא דרך אלגנטית ליצור אזור מוסתר בלי שתצטרכו ליצור תמונה או קובץ SVG.

שימוש בפס אנכי פשוט כמסכה יכול להבטיח שהחלק התחתון של התמונה לא יהיה כהה מדי מתחת לכותרת, למשל.

אתם יכולים להשתמש בכל אחד מסוגי ההדרגות הנתמכים ולהיות יצירתיים ככל האפשר. בדוגמה הבאה נעשה שימוש בפס גרדיאנט רדיאלי כדי ליצור מסכה עגולה שתאירה מאחורי הכיתוב.

שימוש במספר מסכות

בדומה לתמונות רקע, אפשר לציין כמה מקורות של מסכות ולשלב אותם כדי לקבל את האפקט הרצוי. האפשרות הזו שימושית במיוחד אם רוצים להשתמש בתבנית שנוצרה באמצעות מעברי צבע ב-CSS כמסכה. בדרך כלל, בתמונות כאלה נעשה שימוש בכמה תמונות רקע, ולכן אפשר לתרגם אותן בקלות למסכה.

לדוגמה, מצאתי דפוס נחמד של משחק דמקה במאמר הזה. הקוד, עם תמונות רקע, נראה כך:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

כדי להפוך את התבנית הזו, או כל תבנית אחרת שמיועדת לתמונות רקע, למסכה, צריך להחליף את המאפיינים background-* במאפייני mask הרלוונטיים, כולל המאפיינים עם הקידומת -webkit.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

אפשר ליצור אפקטים ממש יפה על ידי החלת דפוסי פס מדורג על תמונות. נסו ליצור רמיקס של Glitch ולבדוק כמה וריאציות אחרות.

בנוסף לחיתוך, מסכות CSS הן דרך להוסיף עניין לתמונות ולרכיבי HTML אחרים בלי צורך להשתמש באפליקציית גרפיקה.

תמונה של Julio Rionaldo ב-Unsplash.