רוב אפקטי הטקסט של CSS שנראים מסובכים עשויים מנכס אחד סימן הניאון בדף נחיתה, המתאר הקשיח על כותרת המשחק, האותיות הכתומות המוערמות שנראות כמו שרוול שיא משנות ה-1970: כל אחד מהם הוא יחיד text-shadow הצהרה עם מספר שכבות מופרדות בפסיקים התחביר קצר החלק הקשה הוא לקטוף קיזוזים ולטשטש ערכים שקוראים היטב, ולזכור איזו שכבה צובעת למעלה.
מדריך זה מכסה את text-shadow דקדוק, איך עובד שכבות, המתכונים מאחורי ההשפעות הנפוצות עם הערכים המדויקים שבהם הם משתמשים, והטעויות שהופכות טקסט מוצל לקשה לקריאה או איטי לעיבוד. כל דוגמה יכולה להיבנות מחדש ב מחולל צל טקסט CSS, אשר מציג את התוצאה בשידור חי וכותב את ההצהרה עבורך.
TL;DR:
text-shadowלוקח רשימה מופרדת בפסיקים של צללים, כל אחד כתוב כoffset-x offset-y blur-radius color. הצל הראשון ברשימה מצייר למעלה אין לו ערך התפשטות ולאinsetמילת מפתח, בניגודbox-shadow. זוהר הם מספר צללים אפס היסט עם טשטוש הולך וגדל, קווי מתאר הם ארבעה צללים קשיחים של פיקסל אחד, וטקסט 3D הוא ערימה של צללים קשים כל פיקסל אחד רחוק יותר. ה Toolz מחולל צל טקסט בונה את אלה עם מחוונים ושמונה הגדרות קבועות מראש, בצד הלקוח, בחינם, ללא הרשמה.
מהו מאפיין ה-CSS Text-Shadow?
ה text-shadow property מצייר צל אחד או יותר מאחורי הגליפים של אלמנט 's text.זה מוגדר ב-W3C מודול קישוט טקסט CSS רמה 3, והערך שלו הוא או none או רשימה מופרדת בפסיקים של צללים.
לכל צל יש עד ארבעה חלקים:
| חלק | נדרש | מה שזה עושה | ערכים מותרים |
|---|---|---|---|
| היסט אופקי | כן | מזיז את הצל ימינה (חיובי) או שמאלה (שלילי) | כל אורך, למשל. 2px, -0.1em |
| היסט אנכי | כן | מזיז את הצל כלפי מטה (חיובי) או כלפי מעלה (שלילי) | כל אורך |
| רדיוס טשטוש | לא, ברירת מחדל ל 0 |
מרכך את הקצה; גדול יותר פירושו מטשטש | אפס או אורך חיובי שלילי אינו חוקי |
| צבע | לא, ברירת מחדל ל currentColor |
צבע צל, כולל שקיפות | כל צבע CSS |
הצבע יכול ללכת ראשון או אחרון. text-shadow: #000 1px 1px ו text-shadow: 1px 1px #000 האם אותו צל אם אתה משאיר את הצבע בחוץ, הצל לוקח את הטקסט ' צבע משלו, וזה רק לעתים רחוקות מה שאתה רוצה עבור צללית אבל שימושי עבור זוהר מהיר בצבע הטקסט.
צל לעולם לא משנה פריסה. זה לא דוחף אלמנטים שכנים או מגדיל את תיבת element's, כך שטשטוש גדול יכול להישפך מחוץ לקופסה ולהינתק על ידי הורה עם overflow: hidden.
במה שונה טקסט-צל מקופסה-צל?
text-shadow עוקב אחר הצורה של כל אות, בעוד box-shadow עוקב אחר המלבן של האלמנט's תיבת גבול. זה ההבדל המעשי, והוא מחליט לאיזה מהם אתה מגיע. הדקדוק שונה גם כן.
| תכונה | text-shadow |
box-shadow |
|---|---|---|
| צורת הצל | כל מתאר גליף | תיבת element's, כולל פינות מעוגלות |
| רדיוס התפשטות | לא זמין | כן, אורך רביעי |
inset מילת מפתח |
לא זמין | כן |
| שכבות מרובות | כן, מופרדים בפסיקים | כן, מופרדים בפסיקים |
| הזמנת צבע | ראשון ברשימה למעלה | ראשון ברשימה למעלה |
| צבע ברירת מחדל | currentColor |
currentColor |
| שימוש אופייני | כותרות, לוגו, קריאות על פני תמונות | קלפים, כפתורים, הגבהה |
ערך ההתפשטות החסר הוא הסיבה לכך שקווי מתאר טקסט זקוקים לארבעה צללים במקום אחד. עם box-shadow אתה יכול לכתוב 0 0 0 2px black כדי לגדל טבעת מוצקה עם טקסט אין דרך להרחיב את הגליף, אז אתה מזייף את זה על ידי קיזוז עותקים בכמה כיוונים אם אתה מעצב את המיכל ולא את המילים, ה מדריך מחולל צללים תיבת מכסה שכבות פרוסות, משובצות והגבהה.
כיצד פועלת שכבות של צללי טקסט מרובים?
הצהרה בודדת יכולה להכיל כמה צללים שתרצו, מופרדים בפסיקים, והדפדפן צובע את הראשון הקרוב ביותר לצופה הצל האחרון ברשימה יושב מאחור הטקסט עצמו תמיד מצייר מעל כולם.
הסדר הזה חשוב בכל פעם ששכבות חופפות. השווה את שתי ההצהרות הללו:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
בראשון העותק השחור הפריך נשאר חד והאובך הצהוב יושב מאחוריו בשני הזוהר הצהוב שוטף את העותק השחור ומרכך אותו אותם צללים מראה שונה.
המחולל פועל לפי אותו כלל שכבה 1 בלשוניות השכבה היא הצל הראשון בפלט, ולכן היא צובעת למעלה הוספת שכבה מוסיפה אותה לסוף הרשימה, מאחורי האחרות כדי להזיז שכבה קדימה מוחקים אותה ויוצרים אותה מחדש, או עורכים את ה-CSS שהועתק ביד.
אילו ערכים כותב מחולל Toolz?
ה מחולל צל טקסט נותן לכל שכבה חמישה פקדים וכותב הצהרה בפורמט קבוע הידיעה שהפורמט הזה עוזר כשאתה מדביק את התוצאה לתוך בסיס קוד עם מוסכמות משלו.
| שליטה | טווח | צעד | נכתב כ |
|---|---|---|---|
| היסט X | -50 פיקסלים עד 50 פיקסלים | 1 פיקסלים | Npx |
| אופסט Y | -50 פיקסלים עד 50 פיקסלים | 1 פיקסלים | Npx |
| לְטַשׁטֵשׁ | 0px עד 100px | 1 פיקסלים | Npx, כולל 0px |
| צבע | בוחר צבעים | - - | משושה בן 6 ספרות |
| אטימות | 0% עד 100% | 1% | נוסף כשתי ספרות משושה אחרי הצבע |
האטימות מקופלת לתוך הצבע כערך משושה בן 8 ספרות, בעקבות ה סימון hex של מודול צבע CSS רמה 4. שתי הספרות האחרונות הן ערוץ האלפא בסולם של 0 עד 255, כך שהכלי מכפיל את האטימות ב-255, סיבובים וממיר לשושה.
הנה איך זה מסתדר עבור כמה אטימות:
| מחוון אטימות | פעמים 255 | מעוגל | הקס אלפא | צבע לדוגמא |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229.5 | 230 | e6 |
#4466eee6 |
| 70% | 178.5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89.25 | 89 | 59 |
#00000059 |
| 25% | 63.75 | 64 | 40 |
#00000040 |
כל דפדפן נוכחי קורא hex בן 8 ספרות אם אתה חייב לתמוך בדפדפן ישן מאוד, כתוב מחדש את הצבע כ rgba() לאחר העתקה: #00000099 הופך rgba(0, 0, 0, 0.6).
הכלי מקבל רק קלט מחוון ובוחר, כך שהערכים הם פיקסלים שלמים. עבור צל שנמדד ב em, אשר משנה קנה מידה עם גודל גופן, העתק את ה-CSS והחלף את היחידות בגיליון הסגנונות שלך. א 2px קיזוז על 16px גוף טקסט הוא 0.125em.
איך יוצרים אפקט טקסט זוהר ניאון?
זוהר ניאון הוא מספר צללים עם אפס היסט, אותו צבע בהיר וטשטוש הולך וגובר כל שכבה מוסיפה הילה רחבה וקלושה יותר, ויחד הם נראים כמו דימום קל לאוויר שמסביב.
הגנרטור נפתח בהגדרה מראש של Neon Glow, מה שמייצר זאת:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
שלוש שכבות, טשטוש הכפלה בכל פעם (7, 14, 28), אטימות יורדת מ-100% ל-90% ל-70% שכבת ה-7px ההדוקה מעניקה לאותיות ליבה בהירה, ושכבת ה-28px מפזרת את הצבע החוצה על רקע כהה עם טקסט לבן זה נקרא כצינור מואר על רקע בהיר רוב האפקט נעלם, וזו הסיבה שלתצוגה המקדימה יש החלפת Light bg / Dark bg: בדוק את שניהם לפני שאתה שולח זוהר לאתר עם מתג נושא.
כדי להפוך את הזוהר לחזק יותר, להוסיף שכבה רביעית בטשטוש 56px או לחזור על שכבת 7px פעמיים חזרה על שכבה עורמת את האטימות שלה ועושה את הליבה אינטנסיבית יותר מבלי להרחיב אותו.
איך אתה מתאר טקסט עם טקסט-צל?
הנח ארבעה צללים קשים (טשטוש 0) פיקסל אחד בחוץ על כל אלכסון החפיפה שלהם מתחקה אחר הקצה של כל גליף.
ההגדרה המוגדרת מראש כותבת:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
זה עובד היטב בפיקסל אחד בשניים או שלושה פיקסלים מתחילים להופיע פערים בנקודות האמצע של עקומות וקצוות ישרים, מכיוון שארבעת העותקים מכסים רק את האלכסונים. לקו מתאר עבה יותר, הוסף עוד ארבע שכבות על הצירים הישרים (0 -2px, 2px 0, 0 2px, -2px 0) אז שמונה עותקים מקיפים כל אות.
יש אלטרנטיבה שאינה צל. -webkit-text-stroke מצייר מהלך אמיתי לאורך נתיב הגליף ונתמך על ידי דפדפנים נוכחיים למרות הקידומת שלו. הוא מרוכז בקו המתאר, כך שהוא אוכל באותיות דקות, והוא מצוין בתקן התאימות של WHATWG ולא במודול CSS. עבור קווי מתאר קטנים ופריכים בטקסט תצוגה, טריק ארבעת הצללים נשאר האפשרות הצפויה ביותר.
איך עושים טקסט 3D או extruded?
ערמו מספר צללים קשיחים באותו צבע, כל אחד אופסט פיקסל אחד בהמשך למטה וימינה כל עותק מוסיף פיקסל אחד של עומק, והעין קוראת את הערימה כצד של אות מוצקה.
ההגדרה מראש של רטרו 3D:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
שלוש שכבות כתומות בונות שחול של שלושה פיקסלים, ושכבה שחורה רביעית באטימות של 25% יושבת פיקסל אחד יותר החוצה כצל מגע שמבסס את האותיות לשחול עמוק יותר, המשיכו להוסיף שכבות כתומות עם קיזוזים 4, 5, 6 והזזו את השכבה הכהה עד הסוף שתים עשרה שכבות לשחול של 12 פיקסלים זה נורמלי לכיוון גיבור גדול.
ההגדרה מראש של הצל הארוך משתמשת באותו רעיון עם פערים ואטימות דועכת:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
הקיזוזים גדלים (1, 3, 6, 10) בעוד האטימות יורדת (20%, 15%, 10%, 6%), כך שהצל נגרר באלכסון במקום ליצור גוש מוצק.
איזה מתכון לצל טקסט מתאים לאיזה אפקט?
הנה כל שמונה ההגדרות המוגדרות מראש במחולל, עם הרעיון מאחורי כל אחת מהן כדי שתוכל להתאים אותן.
| מוגדר מראש | שכבות | קיזוזים | לְטַשׁטֵשׁ | רעיון |
|---|---|---|---|---|
| רָכִי | 1 | 0, 2 פיקסלים | 4 פיקסלים | צללית עדינה ב-35% שחור, בטוחה לרוב הכותרות |
| קשה | 1 | 2 פיקסלים, 2 פיקסלים | 0 | עותק אופסט פריך ב-60% שחור, מראה הדפסה שטוחה |
| ניאון זוהר | 3 | 0, 0 | 7, 14, 28 פיקסלים | אותו צבע, טשטוש הולך וגדל, לאור על כהה |
| רטרו 3D | 4 | 1 עד 4 פיקסלים אלכסוני | 0 | עותקים מודפסים מדורגים בתוספת צל מגע קלוש |
| מתווה | 4 | +/-1px אלכסונים | 0 | ארבעה עותקים המתחקים אחר קצה הגליף |
| הבלטה | 2 | -1px/-1px ו-1px/1px | 0 | הדגשה לבנה משמאל למעלה, גוון כהה מימין למטה |
| אש | 3 | 0, -1 / -2 / -4 פיקסלים | 4, 10, 18 פיקסלים | צהוב לכתום לאדום, עולה כלפי מעלה |
| צל ארוך | 4 | 1, 3, 6, 10 פיקסלים באלכסון | 0 | פער הולך וגדל, אטימות דועכת |
הבלטה היא זו שאנשים קראו לא נכון. זה משלב צל בהיר למעלה ולשמאל עם צל כהה למטה וימין, המחקה אור מהשמאל העליון שפוגע באותיות מורמות. החלף את שני הצבעים והטקסט נראה לחוץ בעמוד במקום זאת, אפקט הדפסת האותיות הקלאסי. שניהם עובדים רק כאשר צבע הטקסט קרוב לצבע הרקע; בטקסט בעל ניגודיות גבוהה ההדגשות נעלמות.
אש היא ההגדרה המוגדרת מראש היחידה עם קיזוזים אנכיים שליליים כל שכבה נעה יותר למעלה ונעשית מטושטשת ואדומה יותר, כך שהחום נראה עולה מהאותיות.
האם טקסט-צל פוגע בקריאה או בנגישות?
זה יכול, והסיכון גדל עם טשטוש וקיזוז צל לא משנה את יחס הניגודיות ש-WCAG מודד, אשר מחושב בין צבע הטקסט לצבע הרקע. ה WCAG 2.1 מינימום ניגודיות מבקש 4.5:1 עבור טקסט רגיל ו-3:1 עבור טקסט גדול, וזוהר לא עוזר לך לעמוד בזה על הנייר.
בפועל, צל כהה דק מאחורי טקסט בהיר על תמונה עמוסה מקל על בחירת האותיות, מכיוון שהוא מפריד בין קצוות הגליפים לתמונה זוהר כבד על טקסט קטן עושה את ההיפך: ההילה ממלאת את מוני האותיות כמו "e" ו-"a" והמילה הופכת לעיסה.
כמה קווים מנחים שמחזיקים מעמד:
- שמור על צלליות טקסט גוף עדינות. משהו כמו
0 1px 2px rgba(0, 0, 0, 0.3)הוא שפע. - שמור אפקטים מרובי שכבות עבור טקסט תצוגה גדול, בערך 32px ומעלה.
- בדוק את ההשפעה על רקע בהיר וכהה אם לאתר שלך יש החלפת נושא.
- אל תסמכו על הצל כדי להציל ניגודיות נמוכה תקן את צבע הטקסט תחילה.
- בדוק בגודל הקטן ביותר שהכותרת מגיעה אליו בטלפון, שבו הצל הוא הגדול ביותר באופן יחסי.
מה מאט את הצללת הטקסט, ומהן טעויות נפוצות?
טשטוש הוא החלק היקר כל שכבה מטושטשת צריכה להיות רסטרית ומטושטשת בכל צביעה מחדש, ואת סולמות העלות עם רדיוס טשטוש וכמות הטקסט. ה הפניה ל-MDN עבור צל טקסט מכסה את התחביר צד הביצועים פשוט לנמק: זוהר תלת שכבתי על כותרת אחת הוא זול, ואותו זוהר על כל פסקה של מאמר ארוך, שנצבע מחדש במהלך הגלילה, הוא מקור נפוץ של טלטלה על טלפונים בעלי עוצמה נמוכה.
טעויות שמופיעות שוב ושוב:
| טעות | סימפטום | לתקן |
|---|---|---|
כתיבת ערך התפשטות כמו 0 0 4px 2px red |
מתעלמים מכל ההצהרה | הסר את האורך הרביעי; לטקסט-צל אין התפשטות |
הוספת inset |
התעלמה מההצהרה | לא נתמך בטקסט; השתמש במקום זאת בהטבעה קלה יותר |
טשטוש שלילי, למשל. -2px |
התעלמה מההצהרה | הטשטוש חייב להיות אפס או חיובי |
| חסרים פסיקים בין שכבות | ההכרזה התעלמה, שום דבר לא הופך | הפרד כל צל בפסיק |
| זוהר קצוץ בקצוות | Halo לחתוך בקו ישר | להורה יש overflow: hidden; להוסיף ריפוד |
| זוהר בלתי נראה | נראה ששום דבר לא קורה | זוהר בהיר על רקע בהיר; מבחן על כהה |
קידומת ספק -webkit-text-shadow |
לא מזיק אבל חסר תועלת | השתמש רגיל text-shadow; זה לא צריך קידומת |
שלושת הראשונים ראויים להדגשה חלק אחד לא חוקי מבטל את כל ההצהרה, לא רק את השכבה הזו, ולכן שגיאת הקלדה בשכבה ארבע של אפקט 3D בן שתים עשרה שכבות מסירה את כל שתים עשרה.The generator's הפלט תמיד תקף, וזו אחת הסיבות לבנות את הערימה שם ולהדביק אותה.
מתי כדאי להשתמש במחולל במקום לכתוב טקסט-צל ביד?
צל רך יחיד מהיר יותר להקליד מאשר ללחוץ כל דבר עם שלוש שכבות או יותר מהיר יותר לבנות באופן ויזואלי, כי אתה שופט מראה, ומבט קשה לשפוט ממספרים המחולל שימושי גם ללמידה: בחר הגדרה מראש, שנה שכבה אחת, וצפה איזה חלק מהאפקט זז.
מחולל Toolz פועל כולו בדפדפן התצוגה המקדימה, רשימת השכבות וה-CSS מחושבים כולם בדף, שום דבר לא מועלה, והוא ממשיך לעבוד במצב לא מקוון לאחר הטעינה. זה בחינם, ללא הרשמה. Copy CSS נספר כנגד קצבת שימוש יומית, כמו כלים אחרים באתר; עריכה ותצוגה מקדימה לא.
מה זה לא עושה: יש לזה לא em או rem יחידות, ללא שדות מספרים מוקלדים, ללא גרירה לסדר מחדש עבור שכבות, וללא גופן מותאם אישית בתצוגה המקדימה. עבור אלה, העתק את ההצהרה והתאם אותה בגיליון הסגנונות שלך או בכלי פיתוח הדפדפן שלך.
אם האפקט שאתה רוצה הוא אלמנט מטושטש או בצבע מחדש ולא צל, מסנני CSS כגון drop-shadow() ו blur() החל על אלמנטים שלמים, כולל תמונות. לוחות חלביים מאחורי טקסט הם עבודה עבור מחולל זכוכיתמורפיזם, וכפתורים שחולצו רכים שייכים ל- מחולל ניומורפיזם. הסט המלא של בוני CSS חזותיים נמצא ב- רכזת כלי CSS, וה מדריך מחולל שיפוע CSS משתלב היטב עם אפקטי טקסט כאשר אתה רוצה רקע שיפוע מאחורי כותרת זוהרת.
דוגמה מעובדת: כותרת גיבור קריא מעל תמונה
תגיד שיש לך טקסט לבן 64px מעל תמונה חוף בהיר והאותיות ממשיכות להיעלם בחול המטרה היא קריאות ראשונה, סגנון שני.
התחל ב כלי טקסט-צל עם ההגדרה מראש של Soft: 0px 2px 4px #00000059. על תמונה עמוסה שהיא חלשה מדי. Raise אטימות ל 60% ו לטשטש ל 8px, אשר נותן 0px 2px 8px #00000099. הקצוות נפרדים מהרקע, אבל משיכות דקות עדיין מהבהבות.
הוסף שכבה שנייה עם אפס היסט, טשטוש של 2 פיקסלים ו-50% שחור: 0px 0px 2px #00000080. מכיוון שהוספת אותו שני, הוא מצייר מאחורי השכבה הראשונה, אבל הוא מחבק את קצה הגליף ונותן לכל מכה שפה כהה דקה. התוצאה:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
שתי שכבות, שתיהן זולות לעיבוד, והכותרת מחזיקה מעמד בחול, שמיים וגלישה בטלפון שבו הכותרת יורדת ל-36 פיקסלים, אותם ערכי פיקסלים כבדים יותר באופן פרופורציונלי; המרה ל em שומר אותם בקצב (0 0.03em 0.125em ב-64 פיקסלים).
