מחולל CSS Box Shadow
מהו CSS Box Shadow?
מאפיין ה-CSS box-shadow מוסיף אפקטי צל סביב המסגרת של אלמנט. צללים יכולים להיות מוסטים, מטושטשים, מפוזרים, צבועים ומוגדרים כ-inset (צל פנימי). צללים מרובים מופרדים בפסיקים ניתן לשכב לאפקטים עשירים. מחולל זה מאפשר לכם לבנות צללים מורכבים ורב-שכבתיים באופן ויזואלי ולהעתיק את ה-CSS המוכן להדבקה ללוח.
כיצד להשתמש במחולל Box Shadow
-
כווננו את המחוונים עבור Offset X/Y, Blur ו-Spread למיקום ועיצוב הצל.
-
לחצו על דוגמת הצבע לבחירת צבע הצל, והשתמשו במחוון Opacity לשקיפות.
-
הפעילו 'Inset' ליצירת זוהר פנימי או אפקט לחוץ.
-
לחצו על '+ הוסף שכבה' לערימת צללים מרובים.
-
העתיקו את ה-CSS שנוצר והדביקו אותו בגיליון הסגנונות שלכם.
שאלות נפוצות
מה ההבדל בין box-shadow ל-drop-shadow filter? box-shadow מוסיף צללים סביב תיבת הגבול המלבנית של האלמנט ותומך בצללים פנימיים. CSS filter: drop-shadow() חל על הצורה הויזואלית של האלמנט (כולל שקיפות), מה שהופך אותו לעקוב אחר קווי מתאר לא מלבניים כמו PNG עם רקע שקוף.
כיצד אני יוצר אפקט הרמת כרטיס Material Design? ערום שני box shadows: צל סביב (blur גדול, opacity נמוכה, spread קל) וצל עיקרי (blur קטן יותר, opacity גבוהה, offset כיווני). לדוגמה: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
האם box-shadow משפיע על פריסת הדף? לא. box-shadow אינו משפיע על גודל או מיקום האלמנט בזרימת המסמך. בניגוד ל-outline, הוא לא תופס מקום פריסה ולא יעביר אלמנטים אחרים.
האם אני יכול להנפיש box-shadow? כן. box-shadow ניתן להנפשה עם CSS transitions ו-animations. לביצועים, עדיף להעביר עברה של box-shadow רק כשהוא הכרחי — דפדפנים לא יכולים להאיץ box-shadow שינויים ב-GPU כפי שהם עושים עם transform או opacity.
Keywords: מחולל CSS box shadow, box-shadow CSS, כלי צל CSS, CSS drop shadow, צל פנימי, צל רב-שכבתי, CSS shadow אונליין