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