mask-image — הדרך האלגנטית לגרום לרקע להיעלם בעדינות

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

מושג אחד שצריך בדרך: גרדיאנט (gradient) הוא מעבר צבע הדרגתי — למשל משחור מלא לשקוף לגמרי. ב-CSS מייצרים אותו עם פונקציות כמו linear-gradient (מעבר בקו ישר) ו-radial-gradient (מעבר מעגלי מנקודת מרכז החוצה).

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

הפתרון הנכון: mask-image — מסכה. במקום לצייר משהו מעל, אומרים לדפדפן איפה האלמנט עצמו שקוף:

.hero-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(
    ellipse 90% 70% at 50% 30%,
    black 40%, transparent 100%
  );
}

(שתי שורות ה-linear-gradient העליונות הן טריק ידוע לציור רשת: כל אחת מציירת קו דק אחד שחוזר על עצמו כל 72 פיקסלים — אחת לקווים אופקיים ואחת לאנכיים.)

חוקי המסכה פשוטים: איפה שהמסכה שחורה — האלמנט נראה; איפה שהיא שקופה — הוא נעלם; ובאמצע — חצי-שקוף. בלי שכבות נוספות, ועובד מעל כל רקע.

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