מחולל צללים של תיבת CSS

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

נכס ה-Box-Shadow עמוק בצורה מטעה. הצהרה בודדת יכולה לערום מספר צללים, כל אחד עם קיזוזים משלו, טשטוש, התפשטות, צבע ומילת מפתח אופציונלית להכנסת מילת מפתח שצובעת את הצל בתוך האלמנט ולא מבחוץ. צללי ממשק אמיתיים משתמשים כמעט תמיד בשתי שכבות או יותר כדי להיראות טבעיות, וזה מייגע לכתוב ביד. כלי זה מנהל עבורך את השכבות ומוציא הצהרת spec-valid בסדר הנכון המופרד בפסיקים.

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

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