מחולל CSS Box Shadow

מה זה מחולל box-shadow ל-CSS?

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

הטריק הוא שצל *טוב* הוא כמעט אף פעם לא שכבה אחת. צללים בעולם האמיתי רכים יותר ויש להם החזר אור סביבתי: רוב מערכות העיצוב (Material, iOS, Tailwind) עורמות 2 עד 3 הצהרות box-shadow עם היסטים ואטימויות שונים. לכתוב אותן ביד זו עבודה פרכנית; מחולל מאפשר לכוונן כל שכבה חזותית ולראות את התוצאה המשולבת בזמן אמת.

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

מה חשוב לדעת על box-shadow ב-CSS

• התחביר הוא box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset שם את הצל *בתוך* האלמנט; בלעדיו הצל נופל מחוצה לו.
• *טשטוש* (blur) מרכך את הקצה: ערכים גדולים יותר יוצרים צל מפוזר יותר. *התפשטות* (spread) מגדילה או מקטינה את הצל לפני שהטשטוש מוחל (ערכים שליליים מכווצים אותו, שימושי להרמות פנימיות רכות).
• כמה צללים מופרדים בפסיקים ונערמים מאחור לפנים לפי סדר הכתיבה: הראשון ברשימה יושב *מתחת* לאלה שאחריו בתוצאה הסופית.
• השתמשו ב-rgba() (או ב-hsla()) לצבע כדי שתוכלו לכוונן את האטימות לכל שכבה. שחור טהור באטימות נמוכה נקרא כצל אפור רך; שחור טהור באטימות מלאה נקרא כגזיר קשה.
• box-shadow מורכב על ידי ה-GPU והוא אחד השדרוגים החזותיים הזולים ביותר שאפשר להחיל. הוא לא משפיע על הפריסה: האלמנט שומר על הגודל והמיקום המקוריים שלו.

איך לעצב box-shadow

1. 1

   התחילו מתבנית

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

2. 2

   כווננו את השכבה הפעילה

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

3. 3

   ערמו שכבות נוספות

   לחצו על *הוספת שכבה* כדי לערום צל שני. עומק מציאותי משתמש כמעט תמיד בשתי שכבות: אחת קצרה והדוקה (צל המגע) ואחת ארוכה ורכה (הצל הסביבתי).

4. 4

   הפעילו inset לשקעים פנימיים

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

5. 5

   העתיקו את ה-CSS

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

מדריך מהיר ל-box-shadow

כל ערך ב-box-shadow: x y blur spread color והתפקיד שלו.

דוגמאות box-shadow לנסות

box-shadow:    0 1px 2px rgba(0, 0, 0, 0.06),    0 4px 12px rgba(0, 0, 0, 0.08);

box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);

box-shadow:    inset 0 2px 6px rgba(0, 0, 0, 0.18),    inset 0 0 0 1px rgba(0, 0, 0, 0.06);

טעויות נפוצות ב-box-shadow

• להשתמש בשחור טהור באטימות גבוהה. זה נקרא כגזיר קשה, לא כצל. הורידו את האטימות ל-0.06 עד 0.18 להגבהה שנראית טבעית.
• לשכוח את היסט ה-Y. צל עם X=0 ו-Y=0 יושב *מאחורי* האלמנט באופן שווה: מתאים לזוהר, לא נכון לכרטיס שאמור להיראות כמרחף.
• לערום יותר מדי שכבות. שלוש מספיקות בדרך כלל; עשר יוצרות בלגן עכור ומטושטש ועלות ציור מורגשת.
• להשתמש ב-filter: drop-shadow() וב-box-shadow לסירוגין כאילו הם אותו דבר. drop-shadow() עוקב אחרי מסכת השקיפות של SVG או תמונה, שימושי לצורות לא סדירות, אבל box-shadow מהיר ונקי יותר לאלמנטים מלבניים.
• לשכוח ש-box-shadow מתעלם מ-overflow: hidden על האלמנט עצמו. אם להורה יש overflow: hidden, הצל נחתך.

שאלות נפוצות על CSS box-shadow