יצירת צלליות לאלמנטים מרובעים ב - CSS3

בפרק על יצירת צלליות לטקסט במדריך זה למדנו כיצד ליצור צל לטקסט בעזרת התכונה text-shadow. שפת CSS3 מאפשרת לנו ליצור בקלות רבה גם צלליות לאלמנטים מרובעים וזאת באמצעות התכונה box-shadow. התכונה box-shadow מאפשרת לנו לקבוע מה יהיה צבע הצל, האם צבעו יהיה מדורג או מטושטש וכן מה יהיה גודלו והאם הוא יהיה ממוקם מימין, משמאל, מעל או מתחת לאלמנט שלנו.

הערה חשובה: יש לזכור ש – box-shadow אינו חלק ממודל הקופסא ב – CSS. משמעות הדבר היא שכאשר נחשב את גודלו של אלמנט ה – box-shadow לא יהיה חלק מהאלמנט וממדיו. 

תחביר התכונה box-shadow

Element { box-shadow: inset horizontal vertical blur spread color; }

התכונה box-shadow מקבלת מינימום של שני ערכים ומקסימום של שישה ערכים (כמתואר בתחביר התכונה למעלה). על ערכים אלה תוכלו ללמוד מהטבלה הבאה:

טבלת הערכים שהתכונה box-shadow יכולה לקבל

ערך הסבר חובה
Inset מילת מפתח אופציונאלית הגורמת לכך שהצל יוצג בתוך האלמנט (מאזור ה – padding). רשות
Horizontal length המיקום האופקי (מימין לשמאל) של הצל ביחס לאלמנט. חובה
Vertical length המיקום המאונך (מלמעלה למטה) של הצל ביחס לאלמנט. חובה
blur עומק הטשטוש. ערך זה אינו יכול להיות שלילי. ככל שהערך גבוה יותר כך הטשטוש גדול יותר.  רשות
spread גודל הצל. ערך חיובי יגרום לצל להתפשט כלפי חוץ בצורה שווה מכל הצדדים. ערך שלילי יגרום לצל להתפשט פנימה אל תוך האלמנט. רשות
color צבע הצל רשות

דוגמאות קוד העושות שימוש בתכונה box-shadow

בדוגמת הקוד הבאה נגדיר מספר מחלקות שכל אחת מהן תדגים צורה אחרת של צל סביב אלמנט מרובע כלשהו:

.box1 { box-shadow: 4px 4px; }
.box2 { box-shadow: 4px 4px 3px; }
.box3 { box-shadow: 12px 12px 2px -6px; }
.box4 { box-shadow: #999 4px -4px 2px 0; }
.box5 { box-shadow: #999 4px -4px 2px 0, -4px 4px 2px; }

אלה תוצאות ההגדרות שבדוגמאות הקוד למעלה:

Demostration of the CSS# propery box-shadow

דוגמת קוד ליצירת צל כחול מסביב לכל האלמנט

box-shadow: 0 0 10px 5px blue;
Demostration of the CSS# propery box-shadow

דוגמת קוד לשימוש במילה השמורה inset כדי ליצור צל פנימי

.inset-shadow {box-shadow: inset #999 4px -4px 2px 0;}
Demostration of the CSS# propery box-shadow
 

 

 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש