מחולל CSS Box Shadow & Border Radius

מחולל CSS Box Shadow & Border Radius

🎨 מחולל חינמי ל-CSS box-shadow ו-border-radius עם תצוגה מקדימה חיה. צרו צללים יפים, פינות מעוגלות ואפקטים מודרניים לממשק משתמש. קוד מוכן להעתקה והדבקה לעיצוב אתרים.

מאפיין Box Shadow

מאפיין ה-CSS box-shadow מוסיף אפקטי צל מסביב למסגרת של אלמנט. ניתן להגדיר מספר אפקטים המופרדים בפסיקים. הצל מתואר באמצעות היסטי X ו-Y, רדיוס טשטוש ופיזור, וצבע.

תחביר: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

פרמטרים של הצל

• היסט X (אופקי): ערכים חיוביים מזיזים את הצל ימינה, שליליים שמאלה
• היסט Y (אנכי): ערכים חיוביים מזיזים את הצל למטה, שליליים למעלה
• רדיוס טשטוש: ערך גבוה יותר יוצר יותר טשטוש. 0 = צל חד
• רדיוס פיזור: ערכים חיוביים מרחיבים את הצל, שליליים מכווצים אותו
• צבע: כל ערך צבע ב-CSS (hex, rgb, rgba, hsl)
• Inset: משנה את הצל לצל פנימי במקום חיצוני

מאפיין Border Radius

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

תחביר: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

שימושים נפוצים

• כרטיסים: צל עדין (0 4px 6px rgba(0,0,0,0.1)) עם רדיוס בינוני (8px)
• כפתורים: צל בצבע תואם לכפתור כדי ליצור עומק
• חלונות מודאליים: צל גדול (0 20px 25px rgba(0,0,0,0.15)) כדי להיראות מרחף
• תמונות: אווטאר עגול (border-radius: 50%) או תמונה ממוזערת מעוגלת (8–16px)
• שדות קלט: צל inset עבור מצב לחוץ/פוקוס
• עיצוב ניומורפי: מספר צללים (בהיר וכהה) עם רקע תואם

שיטות מומלצות לצל

• השתמשו בצל עדין: 10–20% שקיפות לרוב מספיקים לעומק
• היסט Y גדול מ-X: מחקה אור טבעי מלמעלה
• טשטוש גדול יותר ל״גובה״: יותר טשטוש = נראה גבוה יותר מעל הדף
• התאמת צבע הצל: השתמשו בצבע האלמנט בשקיפות נמוכה לאחידות
• ביצועים: הימנעו מאנימציה ל-box-shadow, עדיף opacity או transform

סגנונות צל פופולריים

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

דפוסי Border Radius

• ללא (0px): פינות חדות, מראה מינימליסטי מודרני
• קטן (4px): עיגול עדין לשדות קלט וכפתורים
• בינוני (8px): סטנדרטי לכרטיסים ומכלים
• גדול (16px+): מראה ידידותי ונעים
• גלולה (999px או 50%): קצוות מעוגלים לתגים/באדג׳ים
• עיגול (50%): אווטארים, כפתורי אייקון (דורש אלמנט ריבועי)

טכניקות מתקדמות

• צללים מרובים: שלבו צללים לאפקטים שכבתיים
• אפקט זוהר: 0 0 20px [צבע] ללא היסט
• ניומורפיזם: צל בהיר למעלה-שמאל, צל כהה למטה-ימין
• טבעות פוקוס: צל צבעוני לנגישות (0 0 0 3px rgba(color,0.5))
• אפקט תלת־ממדי: צללים מרובים עם היסט וטשטוש הולכים וגדלים

תמיכה בדפדפנים

Box-shadow ו-border-radius נתמכים בכל הדפדפנים המודרניים. עבור IE8 ומטה ניתן להשתמש בקידומות (-webkit-box-shadow, -moz-box-shadow), אם כי לרוב אין בכך צורך כיום.

💡 טיפ מקצועי: לאפקטי hover, אל תבצעו אנימציה ל-box-shadow ישירות (זה כבד). במקום זאת, צרו את הצל על פסאודו-אלמנט (::before או ::after) והנפישו את השקיפות שלו. כך תקבלו אותו אפקט חזותי עם ביצועים טובים בהרבה, במיוחד במובייל!