במשך שנים הצללים שלי נראו מזויפים ולא הצלחתי להבין למה. הייתי כותב box-shadow: 0 5px 10px black, קבל הילה אפורה בוצית, צמצם אותה, והמשך בתחושת חוסר שביעות רצון במעורפל. הכרטיס נראה כאילו יש לו חבורה, לא צל. רק כשהתחלתי לפרק את מערכות העיצוב שהערצתי - אלו שבהן נראה שהכרטיסים צפים באמת - הבנתי את הטריק. הם אף פעם לא משתמשים בצל אחד. הם עורמים שניים או שלושה, כל אחד עושה עבודה אחרת, והתוצאה נכתבת כאור שמתנהג כמו שאור מתנהג בפועל.
אני בונה ממשקים ב-React וב-Tailwind למחייתי, אני שומר על ערכת נושא לניהול וורדפרס ב-WP Adminify שבו צללים נושאים הרבה מההיררכיה החזותית, ובניתי את מחולל צללים של תיבת CSS על Toolz.dev כי נמאס לי ביד כוונון צללים רב שכבתי בעורך טקסט וטעינה מחדש כדי לראות את התוצאה מדריך זה הוא כל מה שלמדתי על box-shadow מאפיין: מה כל ערך עושה, מדוע שכבות עובדות, כיצד להימנע מהמלכודות הנפוצות וכיצד להשתמש בגנרטור כדי להגיע מאלמנט ריק לייצור CSS תוך מספר דקות.
TL;DR: CSS
box-shadowלוקח היסט X, היסט Y, רדיוס טשטוש, רדיוס התפשטות וצבע, עם אופציונליinsetמילת מפתח.טשטוש מרכך את הקצה; התפשטות מצמיחה או מכווצת את הצל לפני הטשטוש. גובה אמיתי נובע מערימת צללים מרובים המופרדים בפסיקים, לא מהפעלת צל אחד 's אטימות. השתמש בשחור בעל אטימות נמוכה, היסט Y קטן, טשטוש נדיב והתפשטות מעט שלילית - ואז העתק את ה-CSS ישר מהמחולל.
מה בעצם עושה נכס צל הקופסה?
box-shadow צובע צל אחד או יותר סביב אלמנט 's תיבת גבול, והמאפיין מצוין ב רקעים וגבולות CSS רמה 3. התחביר של צל בודד נראה כך:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
הקיזוזים נדרשים; טשטוש, התפשטות וצבע הם אופציונליים אבל כמעט תמיד תגדיר אותם. הנה מה שכל אחד שולט בו, באופן שבו אני חושב עליהם בעת כוונון:
היסט X מזיז את הצל אופקית ערכים חיוביים דוחפים אותו ימינה, שלילית שמאלה עבור רוב צללי הממשק אתה רוצה את זה באפס או קרוב, כי האור בעולם האמיתי בדרך כלל מגיע מלמעלה, מטיל צללים ישר למטה ולא בצד.
אופסט Y מזיז את הצל אנכית ערכים חיוביים דוחפים אותו כלפי מטה, וזה מה שאתה רוצה עבור אלמנט שנראה כי הוא יושב מעל הדף זהו הערך היחיד שהכי שולט כיצד "high" האלמנט מרגיש.
רדיוס טשטוש מרכך את הצל's edge.ערך של אפס נותן צל בעל קצוות קשים כמו צורה מוצקה; ערכים גדולים יותר מפזרים את הרכות החוצה. זה לא יכול להיות שלילי. כמעט כל צל בעל מראה טבעי משתמש בטשטוש גדול פי כמה מהיסט ה-Y שלו.
רדיוס התפשטות משנה את גודל הצל לפני הטשטוש מוחל התפשטות חיובית עושה את הצל גדול יותר בכל כיוון; התפשטות שלילית מכווצת אותו התפשטות שלילית היא הנשק הסודי עבור צללים כרטיס הדוק, אמין, כי זה מושך את הצל פנימה כך שהוא לא לדמם החוצה מעבר לאלמנט.
צבע האם כל צבע CSS חוקי צללי הממשק הטובים ביותר להשתמש שחור או כמעט שחור באטימות נמוכה - משהו כמו rgba(0, 0, 0, 0.1) - במקום אפור אטום לחלוטין, כי שחור שקוף גוון את כל מה שעומד מאחוריו כמו שצל אמיתי עושה.
מדוע צללים טובים משתמשים ביותר משכבה אחת?
זה הרעיון ששינה את הצללים שלי לחלוטין, אז הוא מקבל קטע משלו צל בודד הוא כתם יחיד ואחיד צללים אמיתיים אינם אחידים קרוב לאובייקט הצל כהה וחד יותר; רחוק יותר הוא בהיר יותר ומפוזר יותר אתה מעריך את הנפילה הזו על ידי ערימת צללים.
מתכון קלאסי הוא שתי שכבות: צל הדוק, כהה מעט יותר, שיושב קרוב לאלמנט ונותן לו בסיס פריך, בתוספת צל רך יותר, רחב יותר, בהיר יותר מתחתיו המספק את הדיפוזיה הסביבתית משהו כמו:
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
הדפדפן צובע צללים מופרדים בפסיקים לפי הסדר, כשהראשון למעלה כל שכבה זולה, ושתיים או שלוש יחד קוראים כעומק אמיתי בצורה שאף צל בודד לא יכול, לא משנה איך מכוונים אותו זו בדיוק הסיבה שהמחולל בנוי סביב שכבות ולא קבוצה אחת של מחוונים - ה מחולל צללים של תיבת CSS ספינות עם הגדרות קבועות מראש כמו Card, Elevated ו- Floating שכולן רב-שכבתיות, כך שמתחילים מבסיס ריאליסטי במקום כתם בודד.
המודל המנטלי שאני משתמש בו: לחשוב ברמות גובה קלף מנוחה יושב נמוך עם צל קטן, הדוק נפתחת או פופאובר יושב גבוה יותר עם גדול יותר, רך יותר מודאלי יושב הגבוה מכולם הגדלת גובה פירושה הגדלת היסט Y וטשטוש על פני כל השכבות יחד, לא רק כהה צל אחד.
איך אני יוצר צל פנימי?
ה inset מילת מפתח הופכת צל בתוך האלמנט 's תיבת ריפוד במקום להטיל אותו כלפי חוץ. הוסף inset לחזית הצהרת צל והיא מציירת בתוך האלמנט:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
צללים פנימיים הם הדרך שבה אתה גורם לבקרה להיראות לחוץ, שקוע או מגולף פנימה קלט טקסט קורא לעתים קרובות טוב יותר עם צל משובץ עדין שמרמז על באר שהטקסט יושב בפנים מצב כפתור לחוץ יכול להחליף את הצל החיצוני שלו בצל פנימי כדי להרגיש מדוכא פיזית וכל מגמת הנוימורפיזם בנויה על זיווג של תוספת אור מכיוון אחד עם תוספת כהה מהשני במחולל, הוספה היא החלפה בודדת לכל שכבה, כך שתוכל לערבב צללים משובצים ומתחילים באותו אלמנט - וזה בדיוק מה שמשטחים ניאומורפיים צריכים.
כיצד אוכל להשתמש במחולל הצללים של Box?
הזרימה נועדה להתאים לאיך שאני עובד בפועל פתח את מחולל צללים של תיבת CSS ואתה נוחת על אלמנט תצוגה מקדימה עם הגדרה מראש של כרטיס מציאותי שכבר הוחל, כך שאתה אף פעם לא בוהה בקנבס ריק.
בחר הגדרה מראש כדי להתקרב למה שאתה רוצה - עדין, כרטיס, מוגבה, צף, פנימי, זוהר, ניאומורפי או חד. כל אחד טוען את ערימת השכבות המלאה שלו. לאחר מכן בחר שכבה וכוונן אותה עם המחוונים: היסט X, היסט Y, טשטוש והתפשטות לכל אחד יש שליטה משלו, בתוספת בוחר צבעים, מחוון אטימות והחלפת התצוגה המקדימה. עדכוני תצוגה מקדימה בשידור חי תוך כדי גרירה, כך שאתה מעצב את הצל ישירות במקום לערוך מספרים ולדמיין את התוצאה.
אם אתה צריך יותר עומק, הוסף שכבה אם שכבה לא עושה שום דבר שימושי, הסר אותה יש החלפת רקע שמחליפה את התצוגה המקדימה בין אור לחושך, מה שחשוב כי צל שנראה מושלם בכרטיס אור יכול להיעלם או להפוך לטבעת אפורה מכוערת על כהה. בדיקת שניהם לפני המשלוח חוסכת נסיעה הלוך ושוב.
כשאתה שמח, העתק את ה-CSS. אתה יכול לתפוס את המישור box-shadow הצהרה, או בלוק הכולל גם את -webkit-box-shadow קידומת אם אתה צריך לתמוך בבניית WebKit ישנה מאוד. הדבק אותו בגיליון הסגנונות שלך, ברכיב המעוצב שלך או בערך השרירותי של Tailwind וסיימת.
כמו כל כלי באתר, הוא פועל כולו בדפדפן שלך. שום דבר לא מועלה והוא ממשיך לעבוד במצב לא מקוון לאחר הטעינה, וזו אותה גישה בצד הלקוח שאני מתאר ב- מדריך פרטיות נתונים.
מקרי שימוש בעולם האמיתי
בניית סולם גובה למערכת עיצוב
כאשר אני מקים פרויקט חדש, אני מגדיר קבוצה קבועה של רמות גובה במקום לתת לכל רכיב להמציא את הצל שלו. בדרך כלל זה ארבעה או חמישה שלבים מ-"resting card" עד "modal." אני בונה כל אחד במחולל, מעתיק את ה-CSS ומשחרר אותם לאסימוני העיצוב שלי כערכים בעלי שם. כל כרטיס, תפריט ודיאלוג אז מתייחסים לרמה, כך שכל המוצר חולק מודל תאורה עקבי. לעשות זאת ביד בעורך טקסט זה אומלל; לעשות את זה עם תצוגה מקדימה חיה לוקח כמה דקות.
גורם לכרטיס לצוף למעשה
אינסטינקט ברירת המחדל הוא צל כהה יחיד, שנראה מודבק. התיקון הוא המתכון הדו-שכבתי: שכבה הדוקה עם היסט Y קטן וממרח שלילי לעיגון הכרטיס, ושכבה רחבה ורכה יותר מתחת לאור הסביבה. התחל מהקביעה המוגבהת או המוגבהת מראש, דחף את הערכים לפי הטעם, ותקבל כרטיס שנקרא כמורם ולא מתואר.
עיצוב מצבים לחוצים וממוקדים
משוב אינטראקטיבי חי לעתים קרובות בצל כפתור יכול לאבד את רוב הצל החיצוני שלו ולקבל תוספת קטנה בלחיצה כדי להרגיש דחף פיזית קלט יכול לשאת תוספת עדינה קבועה כדי להיראות כמו באר אלה הם מהירים לאב טיפוס על ידי החלפת inset וצפייה בתצוגה המקדימה, והם מוסיפים הרבה ליטוש נתפס עבור מעט מאוד קוד.
משטחים נוימורפיים
אם אתה הולך על מראה ה-UI הרך, אתה צריך שני צללים על אותו אלמנט המצביעים לכיוונים מנוגדים - כהה למטה-ימין ואחד בהיר למעלה-שמאל - כך שהמשטח נראה שחולץ מהרקע. ההגדרה מראש של Neumorphic מגדירה זאת, ואתה מכוון את הצבע, האטימות והטשטוש כך שיתאימו לרקע הספציפי שלך. זה עובד רק על רקעים שאינם לבן טהור או שחור טהור, אשר החלפת הרקע הכהה עוזרת לך לבדוק.
צל קופסה מול מסנן: צללית
שאלה שאני מקבל לעתים קרובות: מתי עלי להשתמש filter: drop-shadow() במקום box-shadow? הם נראים דומים אבל מתנהגים אחרת, ובחירה לא נכונה גורמת לבאגים אמיתיים.
| תכונה | צל קופסה | מסנן: drop-shadow() |
|---|---|---|
| עוקב | תיבת הגבול המלבנית | הפיקסלים הנראים (הלא שקופים) בפועל |
| הטוב ביותר עבור | כרטיסים, כפתורים, לוחות, כניסות | לוגו, אייקונים, PNGs עם שקיפות, צורות לא סדירות |
| תומך בהכנסת | כן | לא |
| תומך להתפשט | כן | לא |
| צללים מרובים | כן, מופרדים בפסיקים | כן, על ידי שרשור מסננים |
| משפיע על הפריסה | לא | לא |
הגרסה הקצרה: לאלמנט מלבני רגיל, השתמש box-shadow - הוא מסוגל יותר, הוא תומך בהתפשטות ושיבוץ, וזה מה שהגנרטור הזה מייצר. להגיע בשביל drop-shadow() רק כאשר אתה צריך את הצל כדי להתחקות אחר צורה שקופה או לא סדירה, כמו לוגו או סמל גזרה, שבו צל מלבני ייראה לא נכון.
טיפים ומלכודות מתקדמים
כמה דברים שנכוויתי מהם ראשית, צללים נקצצים overflow: hidden על אב קדמון אם הצל היפה שלך נחתך באופן מסתורי, אב קדמון חותך אותו - או שתיתן לצל חדר או שתזיז את overflow לשלוט במקום אחר. כי box-shadow אף פעם לא משפיע על הפריסה, זה לא דוחף אלמנטים שכנים, וזו תכונה, אבל זה גם אומר שצל יכול להשתרע בשקט מתחת לאח.
שנית, טשטוש עצום על אלמנטים רבים יכול לעלות בביצועי צבע, במיוחד כאשר הם מונפשים. אם אתה מחייה צל על גלילה או מרחף על פני רשימה ארוכה, צפה בקצב הפריימים שלך; לפעמים זה זול יותר להנפיש אטימות על אלמנט פסאודו שמחזיק צל סטטי. ברגע שה-CSS שלך מסתיים, הפעל אותו דרך ממיר CSS מגלח את הבתים הנוספים שמוסיפים צללים רב-שכבתיים מילוליים.
שלישית, אל תשכח שצבע צל יכול להיות יותר משחור. צל בגוון עדין מאוד - גרסה כהה של פני השטח שלך ' גוון s ולא שחור טהור - נראה לעתים קרובות עשיר יותר מאפור ניטרלי, מכיוון שצללים אמיתיים קולטים צבע סביבה. זהו מהלך קטן עם תמורה לא פרופורציונלית.
אם אתה מרכיב ערכת כלים רחבה יותר של CSS, ה מדריך ערכת כלים למפתחי אינטרנט מכסה היכן עבודת צל מתאימה בין שאר כלי השירות מבוססי הדפדפן, ולאחר שהצללים שלך מסתיימים, ה מחולל שיפוע ו בוחר צבעים עיגלו את עיצוב המשטח. אם הנגישות בראשכם, חבר את זה עם בודק ניגודיות צבע אז התוכן שיושב על הכרטיסים המוצלים שלך נשאר קריא.
שָׁוא
מהו מאפיין CSS Box-Shadow?
box-shadow מוסיף צל אחד או יותר סביב אלמנט's frame.כל צל לוקח היסט אופקי, היסט אנכי, רדיוס טשטוש אופציונלי, רדיוס התפשטות אופציונלי וצבע, עם מילת מפתח אופציונלית מוכנסת כדי לצייר את הצל בתוך הקופסה. צללים מרובים מופרדים בפסיקים וצבועים עם הראשון למעלה.
מה ההבדל בין טשטוש לממרח?
רדיוס טשטוש מרכך את קצה הצל, כך שערך גדול יותר הופך אותו למפוזר יותר רדיוס התפשטות משנה את גודל הצל's לפני הטשטוש: התפשטות חיובית מגדילה אותו לכל כיוון, בעוד שהתפשטות שלילית מכווצת אותו, וכך אתה שומר צל תחוב בחוזקה מתחת לכרטיס במקום לדמם מעבר לקצוות שלו.
איך אני יוצר צל פנימי ב-CSS?
הוסף את מילת המפתח המוכנסת לצל. inset מצייר את הצל בתוך האלמנט 's תיבת ריפוד במקום בחוץ, וזה שימושי עבור לחצנים לחוצים, בארות קלט, ומשטחים neumorphic החלפת מתג inset במחולל מוסיף אותו לשכבה שנבחרה באופן אוטומטי.
האם אני יכול להשתמש במספר צללים של תיבה על אלמנט אחד?
כן. אתה יכול לרשום מספר צללים בהצהרת צל תיבה אחת המופרדת בפסיקים, והדפדפן צובע אותם לפי הסדר כשהראשון למעלה. שכבת צל רך ורחב מתחת לצל קטן וכהה יותר היא הדרך הסטנדרטית לגרום להגבהה להיראות מציאותית ולא מודבקת.
למה הצל-הצל שלי נחתך?
צל נחתך כאשר לאב קדמון יש הצפה: מוסתר או כאשר האלמנט יושב בקצה מיכל גזירה. תן את חדר הצללים, או העבר את ההצפה: כלל נסתר לאלמנט אחר. מכיוון שצל קופסה אינו משפיע על הפריסה, הוא לעולם לא דוחף אלמנטים שכנים, כך שהוא יכול גם להשתרע בשקט מתחת לאח.
מה ההבדל בין קופסה-צל לפילטר: צל דרופ?
box-shadow עוקב אחר האלמנט's תיבת גבול מלבנית, כך שהוא מתעלם מאזורים שקופים בתוך PNG או צורה לא סדירה. filter: drop-shadow () עוקב אחר הפיקסלים הגלויים בפועל, מה שמתאים ללוגואים ואייקונים עם שקיפות. עבור כרטיסים וכפתורים מלבניים סטנדרטיים, box-shadow היא הבחירה הנכונה ותומכת בפריסה והכנסה של drop-shadow לא.
האם אני עדיין צריך את הקידומת -webkit- עבור תיבה-צל?
עבור דפדפנים מודרניים, לא. box-shadow לא היה מקודם ונתמך באופן נרחב במשך שנים רבות. הבלוק עם הקידומת שהמחולל יכול להוציא שימושי רק אם אתה חייב לתמוך בבניית WebKit ישנה מאוד, ולרוב הפרויקטים מספיק המאפיין הסטנדרטי של box-shadow לבדו.
האם מחולל הצללים הזה שולח את הנתונים שלי לכל מקום?
לֹא . התצוגה המקדימה ופלט ה-CSS נוצרים לחלוטין בדפדפן שלך עם JavaScript. לא מועלים או מאוחסנים ערכים, והכלי ממשיך לעבוד ללא חיבור לרשת לאחר טעינת הדף.
