הצללית היא אפקט שמפיל או מוסיף צל מאחורי רכיבי ה-HTML שנבחרו כאשר הם מוצגים בדף האינטרנט. ניתן להשיג השפעה זו באמצעות ' drop-shadow() ' שיטת כערך עבור CSS ' לְסַנֵן ' נכס או באמצעות ' צל קופסא ' תכונה. על ידי שימוש במאפיין 'קופסה-צל', ניתן למשוך את השיפור החזותי, חווית המשתמש, הדגש והמיקוד לאלמנט HTML ממוקד ספציפי.
מדריך זה מדגים את ההליך של יצירת אפקט צל באמצעות המאפיין box-shadow:
-
- צור צל מוצק באמצעות מאפיין קופסה-צל
- צור צל מטושטש באמצעות מאפיין קופסה-צל
- הרחב את אזור הצללית
כיצד ליצור צללים ב-CSS3 באמצעות מאפיין box-shadow?
ה ' צל קופסא ' מאפיין מאפשר למפתח להקים היררכיה ויזואלית על ידי ציון המיקום היחסי של אלמנטים בדף. על ידי השימוש בו, יוצרי דפי אינטרנט יכולים ליצור אשליה של אובייקטים המטילים צל על משטחים, ומעניקים לאלמנטים תחושה אינטראקטיבית יותר.
תחביר
למאפיין 'box-shadow' יש תחביר של:
צל קופסא: [ היסט אופקי ] [ היסט אנכי ] [ רדיוס טשטוש ] [ רדיוס התפשטות ] [ צֶבַע ] ;
הסבר למונחים המשמשים בתחביר לעיל:
-
- בתחילה, ה' היסט אופקי ' מאחזר/מאחסן את מיקום ציר ה-X, וה-' שלילי ערך 'מגדיר את הצל לשמאל ולהיפך.
- ה ' היסט אנכי ' הערך מאחסן את מיקום ציר ה-Y, את ' חִיוּבִי ערך ' מגדיר את הצל בכיוון מטה, ולהיפך במקרה של ' שלילי ' ערך.
- לאחר מכן, ה' רדיוס טשטוש ” ערך כמו מהשם קובע את הטשטוש של הצל.
- ה ' רדיוס התפשטות ' הערך מציין כמה רדיוס הצל צריך להתרחב.
- ה ' צֶבַע ' מגדיר את צבע הצל, זה יכול להיות ב' HSL ' או ' RGB ' גם בפורמט.
כעת, הבה נעבור על כמה דוגמאות להבנה טובה יותר:
דוגמה 1: החל צל מוצק באמצעות מאפיין תיבה-צל
להגדרת הצללית המוצקה, רק הכיוונים וצבע הצל מוכנסים כערך ל' צל קופסא ' תכונה:
< סִגְנוֹן >.boxShadowExample {
רוחב: 210px;
גבול: 2px תירס מוצק;
גובה: 210 פיקסלים;
צבע רקע: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
סִגְנוֹן >
בקוד למעלה:
-
- ראשית, רכיב ה-HTML נבחר עם מחלקה של ' boxShadowExample '. והערך של ' 210 פיקסלים ' מסופק ל' גוֹבַה ' ו' רוֹחַב ' נכסים. כמו כן, השתמש ב' גבול ' ו' צבע רקע ' מאפיינים להדמיה טובה יותר.
- לאחר מכן, הגדר את הערך של ' 10px 10px forestgreen ' אל ה ' צל קופסא נכס CSS. ה ' 10 פיקסלים ” הוא ההיסט האופקי והאנכי הקובע את המיקום שבו צריך להחיל הצל. וה ' ירוק יער ' הוא צבע הצל.
לאחר הקומפילציה, דף האינטרנט מופיע כך:
הפלט מאשר שצללית מוצקה הונחה באמצעות המאפיין box-shadow.
דוגמה 2: החל צל מטושטש באמצעות מאפיין צל-קופסה
כדי להפוך את הצל שהוחל כבר מטושטש, הוכנס עוד ערך מספרי אחד לפני הצבע של ' צל קופסא ' תכונה. בקר בקוד המעודכן להלן:
< סִגְנוֹן >.boxShadowExample {
רוחב: 210px;
גבול: 2px תירס מוצק;
גובה: 210 פיקסלים;
צבע רקע: עשן לבן;
box-shadow: 10px 10px 15px forestgreen;
}
סִגְנוֹן >
על פי הקוד לעיל, הצל הוא כעת ' 15 פיקסלים ' מטושטש. לאחר סיום שלב ההידור, דף האינטרנט נראה כך:
האיור שלמעלה מראה שהצל כעת מטושטש.
דוגמה 3: הרחבת אזור הצלליות
ערך הפריסה מסופק ל' צל קופסא ” נכס להרחבת אזור הצל. הערך של התפשטות חייב להיות בפורמט מספרי. כמו בקטע הקוד שלהלן, אזור הצל מורחב ל' 20 פיקסלים ”:
< סִגְנוֹן >.boxShadowExample {
רוחב: 210px;
גבול: 2px תירס מוצק;
גובה: 210 פיקסלים;
צבע רקע: עשן לבן;
box-shadow: 10px 10px 15px 20px forestgreen;
}
סִגְנוֹן >
לאחר הביצוע, הצללית מופיעה כעת כך:
כפי שניתן לראות, אזור הצל גדל כעת ב-20 פיקסלים.
סיכום
ה ' צל קופסא ' נכס משמש ליצירת ' טיפת צל השפעה על רכיבי HTML נבחרים. ה ' טיפת צל ' מאפיין מקבל חמישה ערכים, ' היסט אופקי ', ' היסט אנכי ', ' רדיוס טשטוש ', ' רדיוס התפשטות ' ו' צֶבַע '. ערכי 'היסט אופקי' ו'היסט אנכי' קובעים את הממדים של הצל שממנו אמורה להופיע הצללית. ערך 'רדיוס הטשטוש' הופך את הצל למטושטש וערך 'רדיוס התפשטות' מרחיב את אזור הצל.