Card Shadow CSS - קוד תיבה-צל עדין
בנה קוד תיבה-צל של CSS בצורה ויזואלית: מחוונים להיסט, טשטוש, פיזור, צבע עם אטימות, מצב הוספה ועד ארבע שכבות עם תצוגה מקדימה חיה.
תוצאה
דף זה פותח את מחולל צללי קופסה לצללית קלה קלאסית: 2 פיקסלים למטה, 8 פיקסלים טשטוש, 15% אטימות שחורה. זה שקט בכוונה - מספיק כדי להפריד כרטיס מהדף מבלי להכריז על עצמו - והתצוגה המקדימה מראה בדיוק כמה שקט.
טווח זה מתאים לשלבי הגובה הנמוכים ביותר ברוב מערכות העיצוב: כרטיסי רשימה, תפריטים נפתחים, חלונות קופצים ושורות טבלה על ריחוף. אם אתה צריך הרמה חזקה יותר עבור מודלים או פאנלים צפים, הרם את היסט Y וטשטש יחד - הם צריכים לגדול בפרופורציה כדי לשמור על מקור האור אמין.
Copy the box-shadow line into your component styles, or duplicate it as a second layer with a tighter blur to add edge definition. הכלי חינמי ופועל כולו בדפדפן שלך.