מחולל צל תיבה

כווננו את הסליידרים כדי לבנות צל נופל או צל פנימי על תיבת התצוגה המקדימה, ואז העתיקו את קוד ה-box-shadow שנוצר. שלטו בהיסט אופקי ואנכי, רדיוס טשטוש, רדיוס פיזור, צבע ושקיפות — בלי צורך לזכור את סדר הפרמטרים או להמיר צבעים ל-rgba() ידנית.

מהו הכלי הזה?

box-shadow היא תכונת CSS שמציירת צל מאחורי (או בתוך) אלמנט. כשכותבים אותה ידנית, היא מקבלת עד חמישה ערכים לפי סדר — היסט אופקי, היסט אנכי, רדיוס טשטוש, רדיוס פיזור וצבע — בתוספת מילת המפתח האופציונלית inset, וכל זה קל לבלבל או לקבל תוצאה עדינה מדי או כבדה מדי בניסיון הראשון.

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

למה להשתמש בו?

התצוגה המקדימה החיה מתעדכנת מיידית עם כל שינוי — ראו את הצל המדויק לפני שאתם מתחייבים לקוד.
שליטה מלאה בהיסט אופקי, היסט אנכי, טשטוש, פיזור, צבע ושקיפות במקום אחד.
לחיצה אחת מוסיפה inset למראה שקוע במקום צל צף.
מפיק קוד CSS מוכן להדבקה עם הצבע כבר מומר ל-rgba() בשקיפות שבחרתם.
פועל כולו בדפדפן שלכם — שום דבר שאתם מגדירים לא מועלה לשום מקום.
חינמי, ללא הרשמה, פועל גם בנייד.

איך להשתמש

הגדירו היסט-X והיסט-Y כדי למקם את הצל — ערכים חיוביים דוחפים אותו ימינה/למטה, ערכים שליליים דוחפים אותו שמאלה/למעלה.
הגדילו את רדיוס הטשטוש כדי לרכך את קצה הצל; הגדילו את הפיזור כדי להפוך את הצל לגדול יותר מהאלמנט עצמו.
בחרו צבע וכווננו שקיפות — רוב הצללים הריאליסטיים משתמשים ב-15–40% שקיפות במקום שחור מלא.
סמנו 'inset' אם ברצונכם שהצל יופיע בתוך הגבול של האלמנט במקום מאחוריו.
העתיקו את קוד ה-CSS שנוצר והדביקו אותו בגיליון הסגנונות שלכם.

דוגמה

קלט

היסט: 0px, 10px · טשטוש: 20px · פיזור: 0px · צבע: שחור בשקיפות 35%

פלט

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

צל רך ישירות מתחת לאלמנט ללא היסט אופקי — אחד מסגנונות הצל הנפוצים ביותר לכרטיסים וכפתורים.

צל בודד לעומת צללים בשכבות

הכלי הזה בונה שכבת צל אחת, וזה מכסה את הרוב המכריע של השימושים בעולם האמיתי — כפתורים, כרטיסים, חלונות מודליים ותפריטים נפתחים כמעט תמיד משתמשים בצל אחד. CSS אמנם תומך במספר צללים המופרדים בפסיקים על אותו אלמנט לאפקטי עומק מתוחכמים יותר (למשל צל צר וכהה בשכבה מתחת לצל רך ורחב), אבל זהו שיפור שאפשר להוסיף ידנית: צרו צל אחד כאן, ואז שכפלו את השורה, כווננו את קבוצת הערכים השנייה, וחברו אותן בפסיק.

דפוסי box-shadow נפוצים

הרמת כרטיס עדינה: היסט קטן (0–4px), טשטוש בינוני (8–16px), שחור בשקיפות 10–20%.
חלון מודלי/תפריט נפתח מורם: היסט וטשטוש גדולים יותר (4–10px ו-20–30px), שקיפות 20–35% לתחושת ריחוף חזקה יותר.
כפתור לחוץ/שקוע: סמנו inset, השתמשו בהיסט קטן עם תחושה שלילית וטשטוש בינוני כך שהצל ייקרא כשקע ולא כהרמה.
זוהר צבעוני: בחרו צבע מותג במקום שחור, העלו שקיפות ל-40–60%, והגדילו מעט את הפיזור לאפקט זוהר רך סביב כפתורים.
צל חד/קשה: הגדירו טשטוש ל-0 ופיזור ל-0 לצללית מוצקה ומוזזת במקום צל רך.

שילוב עם פינות מעוגלות

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

→ מחולל רדיוס גבול

שאלות נפוצות

מה ההבדל בין טשטוש לפיזור?

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

למה להשתמש ב-rgba() במקום צבע הקס פשוט עבור הצל?

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

מה עושה מילת המפתח inset?

בלי inset, הצל מצויר מחוץ לגבול של האלמנט, כאילו האלמנט צף מעל הדף. עם inset, הצל מצויר בתוך הגבול במקום זאת, מה שגורם לאלמנט להיראות לחוץ או שקוע — משמש בדרך כלל למצבי כפתור פעיל/לחוץ או לשדות קלט.

האם אפשר לערום יותר מצל אחד על אותו אלמנט?

כן — box-shadow ב-CSS מקבל רשימה מופרדת בפסיקים, והדפדפנים מציגים אותם לפי הסדר שניתן (הצל הראשון נמצא למעלה). טכניקה נפוצה משלבת צל צר וכהה יותר עם צל רחב ורך יותר לעומק ריאליסטי יותר ממה שכל אחד מהם מספק לבדו.

האם box-shadow משפיע על הפריסה או רק על המראה?

רק על המראה — box-shadow לעולם לא משפיע על גודל האלמנט או על מיקום האלמנטים שמסביב, גם עם ערכי טשטוש או פיזור גדולים. אם הצל נראה חתוך ויזואלית, בדקו אם יש overflow: hidden על אלמנט הורה במקום ערכי הצל עצמו.