משחקים עם הצללות טקסט והתכונה text-shadow

התכונה text-shadow ב-CSS מוסיפה הצללה לטקסט. היא מקבלת רשימה של הצללות המופרדות בפסיק, אשר מתווספות לטקסט ולדקורציה שלו. כל הצללה מתוארת על ידי קומבינציה של offset X ו-Y, רדיוס טשטוש וצבע.

text-shadow: /* offset-x | offset-y | blur-radius | color */

אם לפרט מעט יותר – כל הצללה מוגדרת על ידי שניים או שלושה ערכים ולאחריהם ערך הצבע (אופציונלי). שני הערכים הראשונים הם offset-x ו-offset-y. הערך השלישי אופציונלי ומגדיר את רדיוס הטשטוש, ולאחריו הצבע.

אם מופיעה יותר מרשימה אחת של הצללות, הן מתווספות אחת על גבי השנייה, כאשר הרשימה הראשונה היא העליונה בציר ה-Z.

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

דפוסי text-shadow נפוצים

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

1. הצללת drop עדינה

השימוש הנפוץ ביותר. הצללה רכה עם offset שמרימה את הטקסט מהדף ומשפרת קריאות על רקעים עמוסים.

.drop-shadow {
    color: #2c2c2c;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

2. Emboss / Letterpress

הצללה בהירה של 1px מתחת לטקסט כהה יוצרת מראה מובלט. לעומת זאת, הצללה כהה של 1px מעל טקסט בהיר יוצרת אפקט של ״חריטה״. האפקט עובד רק כשצבע הטקסט וצבע ההצללה מכוונים לרקע הספציפי, לכן כשמשתמשים בזה על רקע אחר יש להתאים את שלושת הערכים יחד.

/* Emboss: slightly darker text on light background */
.emboss {
    background: #c8c4bc;
    color: #a8a49c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Engrave: slightly lighter text on dark background */
.engrave {
    background: #3a3a3a;
    color: #555;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6),
                 0  1px 0 rgba(255, 255, 255, 0.12);
}

3. קו מתאר / Stroke קשיח

מספר הצללות עם blur אפסי ב-offset קטן בכל כיוון יוצרות קו מתאר מוצק סביב הטקסט – תחליף אמין ל--webkit-text-stroke.

.outline {
    color: white;
    text-shadow:
        -2px -2px 0 #1a1a2e,
         2px -2px 0 #1a1a2e,
        -2px  2px 0 #1a1a2e,
         2px  2px 0 #1a1a2e,
         0   -2px 0 #1a1a2e,
         0    2px 0 #1a1a2e,
        -2px  0   0 #1a1a2e,
         2px  0   0 #1a1a2e;
}

4. טקסט גוף קריא

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

.readable-body {
    color: #3a3a3a;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

מגרש משחקים אינטראקטיבי ל-text-shadow

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

.neon {
    background: #0a0a12;
    color: #00fff5;
    font-family: 'Monoton', cursive;
    text-shadow:
        0 0 15px #00fff5,
        0 0 30px #00fff5,
        0 0 60px rgba(0, 255, 245, 0.4),
        0 0 90px rgba(0, 255, 245, 0.2),
        0 0 120px rgba(0, 180, 255, 0.1);
    animation: neon-flicker 4s ease-in-out infinite;
}

.retro-3d {
    background: #fef0e1;
    color: #e84040;
    font-family: 'Dela Gothic One', sans-serif;
    text-shadow:
        3px 3px 0 #c0392b,
        6px 6px 0 #d35400,
        9px 9px 0 #e67e22,
        12px 12px 0 #f39c12,
        15px 15px 0 #f1c40f,
        18px 18px 0 #e74c3c;
}

.glitch {
    background: #0d0d0d;
    color: #fff;
    font-family: 'Space Mono', monospace;
    text-shadow:
        -5px 0 0 #ff006e,
         5px 0 0 #00f5d4;
    animation: glitch-shift 0.4s steps(2) infinite;
}

.letterpress {
    background: #a89b8c;
    color: #8a7d6e;
    font-family: 'Tinos', serif;
    letter-spacing: 4px;
    text-shadow:
        0 -3px 1px rgba(255, 255, 255, 0.15),
        0  3px 3px rgba(0, 0, 0, 0.35);
}

.rainbow {
    background: #1a1a2e;
    color: #fff;
    font-family: 'Righteous', sans-serif;
    text-shadow:
        3px 3px 2px rgba(255, 0, 0, 0.7),
        6px 6px 4px rgba(255, 127, 0, 0.7),
        8px 8px 6px rgba(255, 255, 0, 0.7),
        11px 11px 8px rgba(0, 200, 80, 0.7),
        14px 14px 10px rgba(0, 127, 255, 0.7),
        17px 17px 12px rgba(75, 0, 130, 0.7),
        20px 20px 14px rgba(148, 0, 211, 0.7);
}

.frosted {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Heebo', sans-serif;
    text-shadow:
        0 0 30px rgba(255, 255, 255, 0.6),
        0 0 60px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
}

.fire {
    background: #1c1c1c;
    color: #ffd54f;
    font-family: 'Dela Gothic One', sans-serif;
    text-shadow:
        0 0 6px #ffd54f,
        0 -6px 10px #ffab00,
        0 -14px 20px #ff6d00,
        0 -20px 30px #dd2c00,
        0 -26px 40px rgba(100, 0, 0, 0.6),
        0 -40px 60px rgba(80, 80, 80, 0.3),
        0 -60px 80px rgba(60, 60, 60, 0.15);
}

.blueprint {
    background: #0a1628;
    background-image:
        linear-gradient(rgba(65, 145, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 145, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    color: #4191ff;
    font-family: 'Space Mono', monospace;
    text-shadow:
        2px 0 0 rgba(65, 145, 255, 0.4),
       -2px 0 0 rgba(65, 145, 255, 0.4),
        0 2px 0 rgba(65, 145, 255, 0.4),
        0 -2px 0 rgba(65, 145, 255, 0.4);
}

.long-shadow {
    background: #2ecc71;
    color: #fff;
    font-family: 'Dela Gothic One', sans-serif;
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.29),
        2px 2px 0 rgba(0, 0, 0, 0.28),
        /* ... layers continue diagonally ... */
        30px 30px 0 rgba(0, 0, 0, 0.00);
}

.cosmic {
    background: radial-gradient(ellipse at center, #1a0533, #0a0118);
    color: #e8d5f5;
    font-family: 'Righteous', sans-serif;
    text-shadow:
        8px 0 0 #9b59b6,
        0 8px 0 #f1c40f,
       -8px 0 0 #1abc9c;
    animation: cosmic-orbit 3s linear infinite;
}

.typewriter {
    background: #f5f0e8;
    color: #1a1a1a;
    font-family: 'Space Mono', monospace;
    text-shadow:
        2px 0 0 rgba(26, 26, 26, 0.6),
        0 2px 1px rgba(26, 26, 26, 0.3),
        1px 1px 4px rgba(26, 26, 26, 0.15);
}

.chrome {
    background: linear-gradient(160deg, #2c3e50, #1a1a2e);
    color: #d0d0d0;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 6px;
    text-shadow:
        0 -3px 0 rgba(255, 255, 255, 0.3),
        0 3px 0 rgba(0, 0, 0, 0.4),
        0 -4px 2px rgba(255, 255, 255, 0.15),
        0 4px 4px rgba(0, 0, 0, 0.5),
        0 8px 12px rgba(0, 0, 0, 0.3);
}

.pulse {
    background: #0e0e1a;
    color: #ff6b9d;
    font-family: 'Righteous', sans-serif;
    text-shadow:
        0 0 8px #ff6b9d,
        0 0 15px #ff6b9d,
        0 0 30px rgba(255, 107, 157, 0.5),
        0 0 45px rgba(255, 107, 157, 0.2);
    animation: pulse-glow 2s ease-in-out infinite;
}

.electric {
    background: #05050f;
    color: #e0f0ff;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 4px;
    text-shadow:
        2px 0 3px #00d4ff,
        -1px 1px 6px #0088ff,
        0 0 12px rgba(0, 150, 255, 0.3);
    animation: electric-spark 1s steps(3) infinite;
}

.duotone {
    background: #f5f5f0;
    color: #1a1a1a;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    text-shadow:
        -5px -5px 0 #e84393,
         5px  5px 0 #0984e3;
}

עוד דוגמאות text-shadow

.plaster {
    background-color: #8a7e70;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255, 255, 255, 0.50) 0 2px 4px;
    letter-spacing: 12px;
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
}

.california {
    background: #1a0a0a;
    color: tomato;
    text-shadow:
        0 0 10px orangered,
        0 0 20px firebrick,
        0 0 40px maroon,
        0 0 80px darkred;
    filter: saturate(60%);
    animation: flicker steps(100) 3s 3s infinite;
    font-family: 'Marck Script', cursive;
}

@keyframes flicker {
    50% {
        color: white;
        filter: saturate(200%) hue-rotate(20deg);
    }
}

.caricature {
    background: #e82850;
    color: white;
    font-family: 'Dela Gothic One', sans-serif;
    letter-spacing: 5px;
    text-shadow:
        0 -4px 0 #212121, 0 4px 0 #212121,
        -4px 0 0 #212121, 4px 0 0 #212121,
        -4px -4px 0 #212121, 4px -4px 0 #212121,
        -4px 4px 0 #212121, 4px 4px 0 #212121,
        -4px 9px 0 #212121, 0 9px 0 #212121, 4px 9px 0 #212121,
        0 19px 1px rgba(0, 0, 0, .1),
        0 4px 2px rgba(0, 0, 0, .3),
        0 12px 4px rgba(0, 0, 0, .2),
        0 9px 9px rgba(0, 0, 0, .25),
        0 24px 24px rgba(0, 0, 0, .2),
        0 36px 36px rgba(0, 0, 0, .15);
}

.moving-shadow {
    background: #2a2a3a;
    color: #ffd54f;
    font-family: 'Dela Gothic One', sans-serif;
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.7),
        5px 5px 1px #ff6b00,
        6px 6px 2px rgba(0, 0, 0, 0.7),
        10px 10px 1px #e84040,
        11px 11px 2px rgba(0, 0, 0, 0.7),
        15px 15px 1px #9b59b6,
        16px 16px 2px rgba(0, 0, 0, 0.7);
    animation: text-snake 1s infinite alternate;
}

@keyframes text-snake {
    from {
        text-shadow:
            1px 1px 2px rgba(0, 0, 0, 0.7),
            5px 5px 1px #ff6b00,
            6px 6px 2px rgba(0, 0, 0, 0.7),
            10px 10px 1px #e84040,
            11px 11px 2px rgba(0, 0, 0, 0.7),
            15px 15px 1px #9b59b6,
            16px 16px 2px rgba(0, 0, 0, 0.7);
    }
    to {
        text-shadow:
            -1px 1px 2px rgba(0, 0, 0, 0.7),
            -5px 5px 1px #ff6b00,
            -6px 6px 2px rgba(0, 0, 0, 0.7),
            -10px 10px 1px #e84040,
            -11px 11px 2px rgba(0, 0, 0, 0.7),
            -15px 15px 1px #9b59b6,
            -16px 16px 2px rgba(0, 0, 0, 0.7);
    }
}

לסיכום

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

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

איזו הצללה הכי אהבתם? ספרו לנו בתגובות, ואם ישנן הצללות מגניבות שיצרתם, שתפו אותנו גם כן בתגובות ואולי אוסיף אותן לפוסט…