Inset CSS Box Shadow - קוד מוכן
בנה קוד תיבה-צל של CSS בצורה ויזואלית: מחוונים להיסט, טשטוש, פיזור, צבע עם אטימות, מצב הוספה ועד ארבע שכבות עם תצוגה מקדימה חיה.
תוצאה
דף זה פותח את מחולל הצללות של התיבה כאשר תיבת הסימון המוכנסת כבר מסומנת, כך שהצל מצוייר בתוך האלמנט במקום מאחוריו. כרטיס התצוגה המקדימה מציג את האפקט השקוע בבת אחת, וכל מחוון ממשיך לעדכן את קו ה-CSS בשידור חי.
צללים משובצים הם האופן שבו CSS מזייף עומק הולך פנימה: מצבי כפתור לחוץ, שדות חיפוש ובארות קלט, שקעים של סרגל התקדמות ופאנלים חרוטים כולם מסתמכים עליהם. מכיוון שהצללית חובקת את הקצה הפנימי, הטשטוש והפיזור מתנהגים מעט שונה מאשר בצללית רגילה - המחוונים כאן מאפשרים לך להרגיש את ההבדל הזה מיד.
When the sunken look is right, copy the box-shadow line into your stylesheet. אתה יכול גם לשלב שכבה הוספה עם שכבות חיצוניות רגילות - הוסף שכבה שנייה ובטל את הסימון של הכנס עליה כדי לערבב את שתיהן בהצהרה אחת.