טקסט עם צל – text-shadow

משך זמן קריאה: 3 דקות

מאפיין CSS שחביב עלי במיוחד הוא box-shadow. אפשר לעשות איתו מגוון של דברים והוא נצרב לי בזכרון עם התחלת ההתאהבות שלי ב CSS. אז כמובן כשלאה ורו הקדישה בסדנה שלה (בכנס סמאשניג מאגזין אוקספורד 2014) – זמן לטיפול ב text-shadow מאפיין שהוא חבר של box-shadow כמובן שגם הוא התחבב עלי. לצערי לא יצא לי לממש את אהבתי עד לפרויקט שנכנס אלי לא מזמן 🙂

קצת על text-shadow

text-shadow:2px 2px 10px black;
  • הערך הראשון הוא המרחק על ציר ה X
  • הערך הראשון הוא המרחק על ציר ה Y
  • הערך השלישי הוא אחוז הטשטוש
  • הערך האחרון הוא צבע
  • ניתן לשלב כמה text-shadow ביחד באותה הגדרה ע"י הפרדה של פסיק.

ההבדלים בין box-shadow ל text-shadow:

  • התמיכה שלו בדפדפנים לא נרחבת כמו box-shadow (לא נתמך ב ie8 ie9)
  • ב text-shadow אין שליטה על הפריסה (כמו למשל שימוש בפריסה שלילית ליצירת box-shadow בכיוון אחד)
  • text-shadowנמצא כמו שכבה מתחת לטקסט. box-shadow נמצא מסביב לאלמנט, לא תחתיו.
    הכי קל להבין את ההבדל, כשהטקסט/האלמנט שקופים. להלן שתי תמונות. הראשונה מדגימה text-shadow והשניה מדגימה box-shadow.
    בתמונה הראשונה, בחלק העליון אנחנו רואים את הצל כשהוא מוטל על טקסט אפור, ובחלק התחתון – כשהוא מוטל על טקסט שקוף. ניתן לראות כי כשהטקסט מקבל שקיפות אזי נראה את כל ה-text-shadow מתחתיו:
    text-shadow

 

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

  • אין אפשרות של inset

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

 

בעיצוב הייתה כותרת שנראתה ככה:

כניסה למערכת - תמונת דוגמה

בפוטושופ ניתן בקלות לבחור בעיצוב של inner-shadow, ובלי בעיות הצל הוא פנימי. אבל ב-CSS העניין איננו כה פשוט. אם רוצים צל פנימי על אוביקט (לא טקסט – אלא אלמנט HTML-י), ניתן להגדיר לו box-shadow: 1px 1px 1px  inset. ההגדרה של inset מכילה את הצל פנימה. דוגמה לזה אפשר לראות ב-codepen המוטמע בהמשך הפוסט, בשורה של "inset box shadow"

כל זה טוב ויפה עבור box-shadow, אבל כמו שכתבתי קודם, text-shadow לא מקבל את ההגדרה של inset. אז מה עושים? כמובן שפונים אל גוגל הכל יודע 🙂

בהתחלה מצאתי פתרון שמדמה צל פנימי בשימוש ב background-clip: text. אבל הוא טוב רק אם הטקסט שלי שקוף – ובמקרה שלי הוא לא….(אפשר לראות דוגמה פה– לקראת סוף המאמר. גם פה ניתן לראות פתרון דומה שמתבסס על העובדה שהטקסט כמעט שקוף מה שיוצר את האשליה של צל פנימי).

הפתרון האחרון שנתקלתי בו – ובו בחרתי להשתמש בסופו של דבר – היה שימוש ב 2 פסאודו אלמנטים לטקסט (עוד אחד ממאפייני CSS האהובים עלי – אבל זה כבר לפוסט אחר…). בפתרון הזה הטקסט לא היה שקוף (אחד הצרכים שלי) והאשליה של הצל הפנימי ניתנת על יד  before ו-after שה-content שלהם הוא המלל של הטקסט. שניהם מקבלים צבע לבן בשקיפות של 0.1, כשה before מוזח פיקסל אחד ימינה ולמעלה, וה-after  מוזח שני פיקסלים ימינה ולמעלה.

ומה יותר טוב ממראה עיניים? ב codepen המצורף ניתן לראות:

  • בשורה הראשונה דוגמה ללמה box-shadow לא מתאים לצל על טקסט – הוא מוכל על כל ה DIV ולא על המלל בלבד.
  • השונה השניה היא שימוש פשוט של text-shadow שנותן קצת תחושה של blur על הטקסט.
  • השורה השלישית היא שימוש באותם ערכים של text-shadow כמו בשורה הקודמת רק הפעם צבע הכיתוב בשחור עם שקיפות של 0.3 – מה שיוצר את האשליה של הצל הפנימי.
  • והשורה האחרונה – צל פנימי בשימוש עם before ו after.

 

See the Pen exgLb by Rachel Bratt Tannenbaum (@rachelbt) on CodePen.

כמה כלים ליצירה אוטומטית של text-shadow:

ולסיום – אמנם לא בעניין text-shadow אבל לגמרי בעניין טיפול בטקסטים בעזרת CSS – כמה לינקים להדרכות לאפקטים על טקסט (בעיקר כותרות ולא טקסט "רץ"):