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

התכונה text-shadow ב CSS מוסיפה הצללה לטקסט. היא מקבלת רשימה של הצללות המופרדות בפסיק ואלו מתווספות לטקסט ולדקורציה של אותו טקסט. כל הצללה מתוארת על ידי קומבינציה של הֶסֵּט X ו Y מהאלמנט (במילים אחרות offset), רדיוס טשטוש (blur radius), וצבע.

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

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

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

באפשרותכם להשתמש בכפתור הכיבוי וההדלקה מצד ימין בכדי לראות את הטקסט ללא הצללות. (לא זמין במובייל).

דוגמאות לשימוש בתכונה text-shadow

.olympics {
    background: #2096f3;
}

.olympics div {
    text-shadow: -1px -1px 0px #2196f3, 2px 2px 0px #2196f3, 4px 4px 0px #0d47a1;
    color: white;
    font-size: 60px;
}

.plaster {
    background: #cbcbcb;
}

.plaster div {
    background-color: #7c7c7c;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255, 255, 255, 0.4) 0px 3px 3px;
    font-size: 3em;
    letter-spacing: 8px;
}

.california {
    background: #2c2c2c;
}

.california div {
    color: tomato;
    display: block;
    text-shadow: 0 0 10px orangered, 0 0 20px firebrick, 0 0 40px maroon, 0 0 80px darkred;
    will-change: filter, color;
    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);
    }
}

.elephant {
    background: #a79f95;
}

.elephant div {
    text-shadow: 0 3px 0 #b2a98f, 0 7px 10px rgba(0, 0, 0, 0.15), 0 6px 2px rgba(0, 0, 0, 0.1), 0 34px 30px rgba(0, 0, 0, 0.1);
    color: white;
    font-weight: 400;
    font-size: 26px;
    max-width: 240px;
}

.caricature {
    background: #fc3053;
}

.caricature div {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 -4px 0 #212121, 0 -4px 0 #212121, 0 4px 0 #212121, 0 4px 0 #212121, -4px 0 0 #212121, 4px 0 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 0 4px 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);
    color: white;
    letter-spacing: 5px;
    font-family: 'Heebo', sans-serif;
    font-style: italic;
}

.pacifiers {
    background: #ece5da;
}

.pacifiers div {
    text-shadow: 0 8px 9px #c4b59d, 0 -2px 1px #fff;
    color: #f1f1f1;
}

.movingShadow {
    background: #acacac;
}

.movingShadow div {
    color: yellow;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7),
    5px 5px 1px orange,
    6px 6px 2px rgba(0, 0, 0, 0.7),
    10px 10px 1px red,
    11px 11px 2px rgba(0, 0, 0, 0.7),
    15px 15px 1px purple,
    16px 16px 2px rgba(0, 0, 0, 0.7);
    -webkit-animation: text-snake 1s infinite alternate;
    -moz-animation: text-snake 1s infinite alternate;
    -ms-animation: text-snake 1s infinite alternate;
    animation: text-snake 1s infinite alternate;
    font-size: 90px;
    font-family: 'Heebo', sans-serif;
}

@keyframes text-snake {
    from {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7),
        5px 5px 1px orange,
        6px 6px 2px rgba(0, 0, 0, 0.7),
        10px 10px 1px red,
        11px 11px 2px rgba(0, 0, 0, 0.7),
        15px 15px 1px purple,
        16px 16px 2px rgba(0, 0, 0, 0.7);
    }
    to {
        text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.7),
        -5px 5px 1px orange,
        -6px 6px 2px rgba(0, 0, 0, 0.7),
        -10px 10px 1px red,
        -11px 11px 2px rgba(0, 0, 0, 0.7),
        -15px 15px 1px purple,
        -16px 16px 2px rgba(0, 0, 0, 0.7);
    }
}

.university {
    background: #22224c;
}

.university div {
    text-shadow: 0 0 2px azure, 0 0 0 aqua, 0 0 40px dodgerblue, 0 0 60px blue;
    filter: saturate(60%);
    font-weight: 300;
    color: azure;
}

.forests {
    background: #eecccb;
}

.forests div {
    text-shadow: 0 1px 0 #e4adad, 0 2px 0 #e1a6a6, 0 3px 0 #df9e9e, 0 4px 0 #dc9696, 0 5px 0 #da8f8f, 0 6px 0 #d78787, 0 7px 0 #d58080, 0 8px 0 #d27878, 0 0 5px rgba(237, 154, 154, 0.05), 0 -1px 3px rgba(237, 154, 154, 0.2), 0 9px 9px rgba(237, 154, 154, 0.5), 0 12px 12px rgba(237, 154, 154, 0.5), 0 15px 15px rgba(237, 154, 154, 0.5);
    color: #ffffff;
    font-family: 'Marck Script', cursive;
    direction: ltr;
    font-size: 1.5em;
}

.green {
    background: #629552;
}

.green div {
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2), 0 -5px 35px rgba(255, 255, 255, 0.3);
    font-family: 'Heebo', sans-serif;
    font-size: 3em;
}

.terror {
    background-color: #fa691a;
    background-image: linear-gradient(135deg, #384138 0%, #686c6b 50%);
}

.terror div {
    color: #292e2d;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .2), 1px 1px 0 rgba(0, 0, 0, .25), 3px 3px 3px rgba(0, 0, 0, .25), 10px 10px 20px rgba(0, 0, 0, .5), 20px 40px 40px rgba(0, 0, 0, .5);
    font-family: 'Tinos', serif;
    font-size: 1.2em;
}

.seventies {
    background: #d5d5d5;
}

.seventies div {
    letter-spacing: 0.01em;
    text-shadow: 4px 4px 0 #ebebeb, 5px 5px 0 rgba(0, 0, 0, 0.3);
    font-family: 'Miriam Libre', sans-serif;
    font-weight: 300;
}

.israel {
    background: #69a3be;
}

.israel div {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
    color: white;
    font-family: 'Tinos', serif;
    letter-spacing: 5px;
}

.board {
    background: #eeeeee;
}

.board div {
    color: white;
    text-shadow: 1px 1px 0 #c8c8c8, 5px 5px 0 #ffd217, 10px 10px 0 #5ac7ff, 15px 15px 0 #ffd217, 20px 20px 0 #5ac7ff;
    font-size: 2.7em;
    position: relative;
    top: -15px;
    font-family: 'Heebo', sans-serif;
    letter-spacing: -4px;
}

לסיכום

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

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