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