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

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

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

תמונה מאת Julio Rionaldo ב-Unbounce.