החלת אפקטים על תמונות באמצעות מאפיין המסכה של 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() כדי להעביר תמונה. אזור תמונת המסכה שלך צריך להיות שקוף או שקוף למחצה.

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

בדוגמה הזו, השתמשתי גם במאפיין 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;

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

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

צילום של Julio Rionaldo ב-UnFlood.