החלת אפקטים על תמונות באמצעות מאפיין המסכה של 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 ב-Unbounce.