הפודקאסט The CSS – 017: Shadows
נניח שעיצוב שנשלח לכם, ובעיצוב הזה מופיעה תמונה של חולצת טישרט, עם הטלת צללית. המעצב מציין שתמונת המוצר היא דינמית וניתן לעדכן אותה דרך מערכת ניהול התוכן, כך שגם הטלת הצללית צריכה להיות דינמית. במקום חולצת טישרט, התמונה יכולה להיות מצחייה, מכנסיים קצרים או כל פריט אחר. איך עושים את זה עם CSS?
ל-CSS יש את המאפיינים box-shadow ו-text-shadow, אבל התמונה אינה טקסט ולכן אי אפשר להשתמש ב-text-shadow.
אם משתמשים ב-box-shadow, הצללית היא על הקופסה מסביב, לא מסביב לחולצת הטי-שירט.
למרבה המזל, יש עוד אפשרות: המסנן drop-shadow().
כך תוכלו לעשות בדיוק את מה שהמעצב ביקש.
יש הרבה אפשרויות בנושא צלליות ב-CSS, וכל אחת מהן מיועדת לתרחיש אחר לדוגמה.
צל תיבה
המאפיין box-shadow מיועד להוספת צלליות לתיבה של רכיב HTML.
הוא פועל על אלמנטים של בלוקים ועל אלמנטים מוטבעים.
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
סדר הערכים עבור box-shadow הוא:
- היסט אופקי: מספר חיובי דוחף אותו החוצה משמאל ומספר שלילי ידחוף אותו החוצה מימין.
- היסט אנכי: מספר חיובי דוחף אותו כלפי מטה מהחלק העליון, ומספר שלילי ידחוף אותו כלפי מעלה מלמטה.
- רדיוס הטשטוש: מספר גדול יותר יוצר צל מטושטש יותר, ואילו מספר קטן יוצר צל חד יותר.
- Spread radius (אופציונלי): מספר גדול יותר מגדיל את צללית, ומספר קטן יותר מקטין אותה. אם הערך הוגדר כ-0, גודלו יהיה זהה לזה של רדיוס הטשטוש.
- Color: כל ערך חוקי של צבע. אם לא מגדירים ערך זה, ייעשה שימוש בצבע הטקסט המחושב.
כדי שהצללה של התיבה תהיה צל פנימי, במקום הצל החיצוני שמוגדר כברירת מחדל, כדאי להוסיף את מילת המפתח inset לפני המאפיינים האחרים.
/* Outer shadow */
.my-element {
box-shadow: 5px 5px 20px 5px #000;
}
/* Inner shadow */
.my-element {
box-shadow: inset 5px 5px 20px 5px #000;
}
צללים מרובים
אפשר להוסיף כמה צלליות שרוצים באמצעות box-shadow.
כדי להשיג זאת, צריך להוסיף אוסף של קבוצות ערכים המופרדות בפסיקים:
.my-element {
box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}
מאפיינים שמשפיעים על צל התיבה
הוספה של border-radius לתיבה תשפיע גם על צורת הצללית של התיבה.
הסיבה לכך היא ש-CSS יוצר צל שמבוסס על צורת התיבה כאילו שהאור מפנה אליה.
.my-element {
box-shadow: 0px 0px 20px 5px darkslateblue;
border-radius: 25px;
}
אם התיבה עם box-shadow נמצאת במאגר שמכיל overflow: hidden, גם הצללית לא תפוצל מהגלישה.
<div class="my-parent">
<div class="my-shadow">My shadow is hidden by my parent.</div>
</div>
.my-parent,
.my-shadow {
width: 250px;
height: 250px;
}
.my-shadow {
box-shadow: 0px 0px 20px 5px darkslateblue;
}
.my-parent {
overflow: hidden;
}
צללית טקסט
הנכס text-shadow דומה מאוד לנכס box-shadow.
התכונה פועלת רק על צומתי טקסט.
.my-element {
text-shadow: 3px 3px 3px hotpink;
}
הערכים עבור text-shadow זהים ל-box-shadow ובאותו סדר.
ההבדל היחיד הוא שבמאפיין text-shadow אין ערך של spread ואין מילת מפתח מסוג inset.
כשמוסיפים box-shadow הוא נחתך לצורת התיבה, אבל ב-text-shadow אין חיתוך.
כלומר, אם הטקסט שקוף באופן מלא או חצי,
הצל יהיה גלוי דרכו.
.my-element {
text-shadow: 3px 3px 3px gold;
color: rgb(0 0 0 / 70%);
}
צללים מרובים
ב-text-shadow אפשר להוסיף כמה צלליות שרוצים, בדיוק כמו ב-box-shadow.
הוסיפו אוסף של קבוצות ערכים המופרדות בפסיקים, ותוכלו ליצור אפקטים ממש מגניבים, כמו טקסט בתלת-ממד.
.my-element {
text-shadow: 1px 1px 0px white,
2px 2px 0px firebrick;
color: darkslategray;
}
הטלת צללית
כדי ליצור הטלת צללית אחרי העקומות הפוטנציאליות של תמונה, צריך להשתמש במסנן drop-shadow של CSS.
הצללית הזו מוחלת על מסיכת אלפא ולכן היא שימושית מאוד להוספת צללית לתמונת גזרה, כמו במבוא של המודול הזה.
.my-image {
filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}
למסנן drop-shadow יש ערכים זהים לאלה של box-shadow אבל לא ניתן להשתמש במילת המפתח inset ובערך spread. אפשר להוסיף כמה צלליות שרוצים על ידי הוספת מספר מופעים של ערכי drop-shadow למאפיין filter.
כל צל ישתמש בצל האחרון כנקודת התייחסות למיקום.
בדיקת ההבנה
בחינת הידע שלך לגבי צלליות
איזה ערך הצללה שלמטה ייחודי ל-box-shadow?
insetinset היא מילת מפתח שהיא ייחודית גם ל-box-shadow.בו-זמנית, מותר להוסיף לרכיב רק 13 צלליות של תיבה.