אזורים כהים

הפודקאסט של 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 הוא:

1. היסט אופקי: מספר חיובי דוחף אותו החוצה משמאל ומספר שלילי דוחף אותו החוצה מימין.
2. היסט אנכי: מספר חיובי דוחף אותו כלפי מטה. ומספר שלילי ידחוף אותו כלפי מעלה מתחתית המסך.
3. טשטוש רדיוס: מספר גדול יותר יוצר צל מטושטש יותר, ואילו מספר קטן יוצר צל חד יותר.
4. רדיוס הרחבה (אופציונלי): מספר גדול יותר מגדיל את הצללית ומספר קטן יותר מקטין אותו. לשנות את גודלו לרדיוס הטשטוש, אם הוא מוגדר ל-0.
5. צבע: כל ערך צבע חוקי. אם לא מגדירים את הפרמטר, המערכת תשתמש בצבע הטקסט שחושב.

כדי להפוך צל של תיבה לצל פנימי, במקום הצל החיצוני שמוגדר כברירת מחדל, להוסיף מילת מפתח 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. כל צל ישתמש בצל האחרון כנקודת התייחסות למיקום.

בדיקת ההבנה

בוחנים את הידע שלכם על צלליות