החלת אפקטים על תמונות באמצעות המאפיין mask-image ב-CSS

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

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

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

מסכה עם תמונה

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

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

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

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

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

מסכה עם SVG

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

.container img {
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

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

בתרחיש הנפוץ ביותר של הוספת מסכה לתמונה, אפשר פשוט לכלול את התמונה בקובץ ה-SVG. הגישה הראשונה היא Baseline Newly available, כולל התמונה ב-SVG, נתמכת בדפדפנים ישנים יותר שתומכים בגרסה עם הקידומת -webkit.

מסכה עם שינוי הדרגתי

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

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

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

מספר מסכות

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

לדוגמה, יש דפוס של משחק דמקה בדפוסים עם מעברי צבע ב-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;

אפשר ליצור אפקטים נהדרים על ידי החלת דפוסי פס מדורג על תמונות. כדי לבדוק כמה וריאציות אחרות, אפשר ליצור ענף (fork) של הקוד הבא ב-CodePen.

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