משחקים עם התכונה background-clip ב CSS

התכונה background-clip מאפשרת לנו לשלוט עד כמה תמונת הרקע (או צבע הרקע) תתפרש מעבר ל-padding או לתוכן של אלמנט מסוים.

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

.element {
    background-clip: padding-box;
}

הערכים האפשריים לתכונה background-clip

• border-box – ערך ברירת המחדל. הרקע נמתח עד לקצה החיצוני של גבול האלמנט (border).
• padding-box – מגביל את הרקע עד לקצה ה-padding של האלמנט. אזור ה-border נשאר ללא רקע.
• content-box – מגביל את הרקע לאזור התוכן (Content Box). גם ה-padding וגם ה-border נשארים ללא רקע.
• text – מציג את הרקע רק בתוך צורת הטקסט. כדי לחשוף אותו דרך האותיות צריך להשתמש ב--webkit-text-fill-color: transparent.

Box areas of an element – קרדיט – Codrops.com

שלושת הערכים הראשונים מתייחסים ישירות לשלושת האזורים של ה-CSS Box Model שמוצגים למעלה. הערך text שונה – הוא מציג את הרקע רק בתוך צורת הטקסט עצמו. בואו נראה את כולם בפעולה.

ערכי Box Model: border-box, padding-box, content-box

בכל אחת מהדוגמאות הבאות ההגדרה זהה: div עם רקע כחול, padding נדיב ומסגרת זהובה חצי-שקופה. הדבר היחיד שמשתנה הוא ערך ה-background-clip. שימו לב איך זה משפיע על האזור שבו הכחול מופיע.

border-box (ברירת מחדל)

הרקע הכחול נמתח עד לקצה החיצוני של המסגרת. שימו לב לגוון המעורב במסגרת – זהו הרקע הכחול שמשתלב דרך הזהב החצי-שקוף.

padding-box

הרקע עוצר בקצה ה-padding. המסגרת החצי-שקופה מציגה כעת את צבעה הזהוב האמיתי מכיוון שאין כחול מתחתיה.

content-box

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

content-box עם margin: 0

כמו בדוגמה הקודמת, אך עם margin: 0 על הפסקה. האזור הכחול מצטמצם מכיוון ששולי ברירת המחדל של הפסקה השפיעו על גודל ה-content box.

מגרש משחקים אינטראקטיבי

עברו בין שלושת ערכי ה-box model ושנו את ה-padding ורוחב ה-border בזמן אמת:

הערך text

הערך text מציג את הרקע בתוך צורת הטקסט. בעבר היה צורך בקידומת -webkit-, אך כיום background-clip: text ללא קידומת נתמך ב-Chrome, Firefox, Safari ו-Edge. בגרסאות ישנות יותר עדיין אפשר לכלול את הקידומת:

background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

ההגדרה -webkit-text-fill-color: transparent הופכת את מילוי הטקסט לשקוף, כך שהרקע נראה דרך האותיות.

בדפדפנים ישנים ייתכן שתצטרכו להשתמש ב-display: inline-block על האלמנט כדי שהאפקט יוצג כראוי. גרסאות מודרניות של Chrome, Firefox ו-Safari מטפלות בזה גם על אלמנטים מסוג block.

תמונה דרך טקסט

שימו לב לדוגמה הבאה:

ה-CSS בו השתמשנו הוא:

.image-mask {
    background-size: cover;
    background-image: url('https://savvy.co.il/wp-content/themes/thesis/images/clip2.jpg');
    background-position: center;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: 900 134px 'Heebo', sans-serif;
}

ה-HTML כאן פשוט מאוד ומסתכם במבנה הבא:

<div class="image-mask">סאבי בלוג</div>

הערך text בתכונה -webkit-background-clip מציג את הרקע בתוך צורת הטקסט, בזמן שמילוי הטקסט עצמו מוגדר כשקוף (transparent) באמצעות התכונה -webkit-text-fill-color.

רקע קבוע דרך טקסט

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

ה-CSS:

.image-mask-fixed {
    background: url('image.jpg') fixed;
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: 900 134px 'Heebo', sans-serif;
}

חשיפה בריחוף על טקסט

התכונה background-clip עובדת גם עם הסלקטור :hover. כאן הטקסט מתחיל באטימות נמוכה, ובריחוף הוא נחשף בהדרגה:

ה-CSS:

.image-mask-hover {
    background: url('image.jpg') fixed;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: 900 134px 'Heebo', sans-serif;
    transition: all 3s;
    opacity: 0.3;
}

.image-mask-hover:hover {
     opacity: 1;
}

טקסט גרדיאנט מונפש

שילוב של background-clip: text עם גרדיאנט מונפש יוצר כותרות מרשימות ללא תמונות וללא JavaScript. לגישה שונה לאפקטים על טקסט, ראו את הפוסט שלי על CSS text-shadow. כאן הגרדיאנט משנה מיקום באמצעות אנימציית CSS עם @keyframes:

ה-CSS:

.animated-gradient-text {
    background: linear-gradient(
        90deg, #f7971e, #ffd200, #ff6b6b, #c471ed, #12c2e9, #f7971e
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 4s linear infinite;
    font-weight: 900;
    font-size: 48px;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

ה-background-size: 300% הגדול נותן לגרדיאנט מספיק מרחב תנועה. האנימציה מזיזה אותו על פני הטקסט ברציפות, ויוצרת אפקט נוצץ שמבוסס כולו על CSS.

טכניקות יצירתיות

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

אפקט מסגרת גרדיאנט

אני משתמש בטכניקה הזו לא מעט. כשמגדירים background-clip: padding-box על הרקע הראשי ו-background-clip: border-box על שכבת הגרדיאנט, מתקבל גרדיאנט שנראה רק דרך מסגרת שקופה – בלי אלמנטי עטיפה נוספים. כתבתי פוסט מלא על מסגרות גרדיאנט ב-CSS שמכסה את הטכניקה הזו ועוד.

ה-CSS:

.gradient-border-box {
    border: 4px solid transparent;
    padding: 24px;
    background:
        linear-gradient(var(--dark-bg), var(--dark-bg)) padding-box,
        linear-gradient(135deg, #f7971e, #ffd200, #f7971e) border-box;
}

ה-linear-gradient הראשון מוגבל ל-padding-box (המילוי האחיד). השני מוגבל ל-border-box (הגרדיאנט שנראה דרך המסגרת השקופה).

רקע מנוקד בסגנון מחברת

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

ה-CSS:

.dotted-notebook {
    padding: 32px;
    border: 2px solid rgba(255, 182, 54, 0.3);
    background:
        radial-gradient(circle, rgba(255,182,54,0.35) 1px, transparent 1px);
    background-size: 18px 18px;
    background-clip: content-box;
}

כרטיס Knockout עם שכבות רקע נפרדות

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

ה-CSS:

.knockout-card {
    border: 12px solid transparent;
    padding: 32px;
    background:
        radial-gradient(circle at 30% 40%,
            rgba(255,182,54,0.25), transparent 70%) content-box,
        linear-gradient(var(--dark-bg), var(--dark-bg)) padding-box,
        repeating-linear-gradient(
            45deg,
            #f7971e 0, #f7971e 6px,
            transparent 6px, transparent 12px
        ) border-box;
}

כל שכבה מכוונת לאזור אחר של ה-box model באמצעות background-clip. הפסים האלכסוניים החוזרים ממלאים את אזור ה-border. המילוי האחיד מכסה את אזור ה-padding ומסתיר את הפסים בתוכו. הזוהר הרדיאלי מופיע רק באזור התוכן ונותן לטקסט תחושה של זרקור חם.

שאלות נפוצות

שאלות נפוצות בנושא התכונה background-clip ב-CSS:

עד כאן. מקווה שלמדתם משהו חדש… נתראה בפוסט הבא! 🙂