מהו מחולל הצללים של קופסת CSS?
מחולל הצללים של תיבת CSS הוא עורך חזותי עבור המאפיין CSS Box-Shadow. אתה מכוון את Offset, מטשטש רדיוס, פיזור רדיוס, צבע ואטימות עם מחוונים ורואה את העיבוד של התוצאה בשידור חי על אלמנט תצוגה מקדימה, ואז מעתיק את ה-CSS המדויק. במקום לנחש ערכי פיקסלים ולטעון מחדש את העמוד, אתה מעצב את הצל ישירות וקורא את הקוד שהוא מייצר.
פתח את מחולל הצללות הזה של קופסת CSS והוא מתחיל בהגדרה מראש של הכרטיס, שתי שכבות שמתעתקות כצללית: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;. המחוון Opacity נאפה בצבע המשושה, כך ש-10% הופך ל-1a בסוף. לחץ על ההגדרה הפנימית מראש וההצהרה משתנה ל-box-shadow: הכנס 0px 2px 4px 0px #00000033;, מראה הכפתור הנלחץ. הוסף שכבה מוסיף צל ב-0px 4px 6px 0px #00000033, רשום אחרון וצבוע מתחת לאחרים.
נכס ה-Box-Shadow עמוק בצורה מטעה. הצהרה בודדת יכולה לערום מספר צללים, כל אחד עם קיזוזים משלו, טשטוש, התפשטות, צבע ומילת מפתח אופציונלית להכנסת מילת מפתח שצובעת את הצל בתוך האלמנט ולא מבחוץ. צללי ממשק אמיתיים משתמשים כמעט תמיד בשתי שכבות או יותר כדי להיראות טבעיות, וזה מייגע לכתוב ביד. כלי זה מנהל עבורך את השכבות ומוציא הצהרת spec-valid בסדר הנכון המופרד בפסיקים.
הכל קורה בדפדפן שלך. בחר הגדרה מראש, כוונן את השכבות, החלף את התצוגה המקדימה בין רקע בהיר לכהה, והעתק את המאפיין הסטנדרטי או בלוק הכולל גם את הקידומת -WebKit-. אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
צללים צבועים מחוץ לקופסה ואינם תופסים מקום, כך שהם לעולם לא דוחפים שכנים מסביב והם ייחתכו על ידי אב קדמון כלשהו עם גלישה מוסתרת. התפשטות היא הערך הפחות מובן: הוא מצמיח או מכווץ את צורת הצל לפני הטשטוש, כך שהתפשטות חיובית עם טשטוש אפס נותנת קווי מתאר אופסט מוצק, וכך מזויפים אפקטי גבול מבלי להשפיע על הפריסה. Inset מזיז את הצל בתוך האלמנט, שימושי למצבים לחוצים וזוהרים פנימיים. שכבת מספר צללים עם היסט וטשטוש הולכים וגדלים היא האופן שבו נבנה עומק משכנע, שכן טשטוש גדול בודד נקרא כערפל ולא כצל. כל שכבה עולה זמן עיבוד, וצללים שצובעים מחדש במהלך גלילה או אנימציה הם מקור נפוץ לטלטלה במכשירים בעלי הספק נמוך יותר.
כיצד להשתמש במחולל הצללים של תיבת CSS?
התחל משכבה מוגדרת מראש או ריקה
הדף נפתח בקביעה מראש של הכרטיס בחר אחר כגון Elevated או Neumorphic עבור נקודת התחלה אחרת, או ערוך את השכבות הנוכחיות ישירות.
כוונן את הצל עם מחוונים
גרור את ההיסט האופקי והאנכי, רדיוס הטשטוש ומחווני הרדיוס הפזורים, הגדר את צבע הצל והאטימות, וסמן את Inset כדי להזיז את הצל בתוך התיבה.
ערמו עוד שכבות במידת הצורך
לחץ על הוסף שכבה לעומק - צל רחב רך מתחת לצלול כהה יותר נקרא כהגבהה טבעית. שכבות חדשות עוברות בסוף, מה שצובע אותן מתחת לשכבות קודמות; אין סידור מחדש, אז כדי להזיז שכבה, מחק אותה עם סמל האשפה שלה ובנה אותה מחדש עם הוסף שכבה.
העתק את ה-CSS
העתק את הצהרת הצללים של התיבה, או את הבלוק הקידומת עבור דפדפנים ישנים יותר, והדבק אותו ישר בגיליון הסגנונות או בסגנונות הרכיבים שלך.
תכונות מפתח
צללים רב-שכבתיים
ערמו כל מספר של שכבות צל להצהרה אחת, בסדר הצבע הנכון מלמעלה למטה, וכך בנוי ה-Real Card ו-Modal Elevation
בקרת רכוש מלאה
מחוונים להיסט אופקי ואנכי, רדיוס טשטוש ורדיוס התפשטות, בתוספת בורר צבעים, בקרת אטימות ומעבר כניסה מכסים כל חלק בדקדוק
תצוגה מקדימה חיה
רכיב תצוגה מקדימה מתעדכן באופן מיידי תוך כדי עריכה, ותוכל לעבור את הרקע שלו בין בהיר לכהה כדי לבדוק כיצד הצל קורא בשני הנושאים
הגדרות קבועות מראש מוכנות
מתכונים אוצרים לצללים עדינים, קלפים, מוגבהים, צפים, פנימיים, זוהרים, נוימורפיים וחדים נותנים לך נקודת התחלה מוכחת במקום קנבס ריק
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!