איך להשתמש בו
- התחילו מהגדרה מוכנה מראש או כווננו את ההיסט, הטשטוש, הפיזור, הצבע והאטימות של השכבה הראשונה.
- הוסיפו שכבות נוספות לעומק טבעי יותר, או סמנו "Inset" כדי לקבל צל פנימי.
- שנו את רקע התצוגה המקדימה ואת צבע התיבה כך שיתאימו לעיצוב שלכם, ואז העתיקו את ה-CSS.
איך זה עובד
box-shadow מקבל, לכל שכבה: היסט אופקי, היסט אנכי, רדיוס טשטוש, רדיוס התפשטות וצבע, ניתן להוסיף לפניו inset. היסט חיובי מזיז את הצל ימינה ולמטה. טשטוש מרכך את הקצה ואינו יכול להיות שלילי; התפשטות מגדילה (חיובית) או מקטינה (שלילית) את הצל לפני הטשטוש. שכבות מרובות מופרדות בפסיקים, והראשונה מצוירת על גבי האחרות.
הגבהה ריאליסטית משלבת בדרך כלל צל קטן ומהודק עם צל גדול ורך יותר בשקיפות נמוכה, וזה מה שעושה הקביעה המוגדרת מראש "Elevated". צבעים נכתבים כ-rgba() כך שהשקיפות מפורשת. צללים עוקבים אחרי border-radius של האלמנט ואינם תופסים מקום בפריסה, כך שהם לעולם לא מזיזים אלמנטים אחרים.
צללים עם ערכי טשטוש גדולים מאוד על אלמנטים רבים עלולים להאט את הגלילה בטלפונים חלשים. אם מנפישים צל, בדרך כלל חלק יותר להציג אלמנט פסאודו שכולל את הצל מאשר להנפיש את box-shadow עצמו.
דוגמאות
כרטיס בדף בהיר
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); מעניק לכרטיס קצה חד והרמה רכה.
טבעת מיקוד ללא שינוי פריסה
שכבה עם היסט 0, טשטוש 0 והתפשטות 3px בצבע המותג מציירת טבעת רציפה סביב כפתור. בניגוד למסגרת, היא לא משנה את גודל האלמנט.
שדה קלט לחוץ
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) גורם לשדה טקסט להיראות שקוע מעט.
שאלות נפוצות
מה ההבדל בין box-shadow לבין filter: drop-shadow()?
box-shadow עוקב אחר תיבת האלמנט ו-border-radius ותומך ב-spread וב-inset. drop-shadow() עוקב אחר הצורה הנראית, כולל אזורים שקופים בתמונות PNG או SVG, אך אין לה spread או inset.
למה הצל שלי נחתך?
אלמנט הורה עם overflow: hidden גוזם כל מה שמחוץ לתיבה שלו, כולל צללים. הוסיפו padding לאלמנט ההורה או העבירו את הגדרת ה-overflow.
בכמה שכבות כדאי להשתמש?
שכבה אחת או שתיים מספיקות לרוב הממשקים. שכבות נוספות יכולות להיראות חלקות יותר, אבל עולות מעט יותר בציור, וזה חשוב ברשימות ארוכות.
פרטיות
ה-CSS נוצר בדפדפן שלכם. שום דבר לא מועלה או נשמר.