אזורים כהים

The CSS Podcast – 017: Shadows

נניח שנשלח אליכם עיצוב ליצירת build, ובעיצוב הזה יש תמונה של חולצה, חתוכה, עם צללית. המעצב/ת אומר/ת לכם שתמונת המוצר דינמית ואפשר לעדכן אותה דרך מערכת ניהול התוכן, ולכן גם צללית המוצר צריכה להיות דינמית. במקום חולצה, התמונה יכולה להיות של כובע שמש, של מכנסי קצרים או של פריט אחר. איך עושים את זה באמצעות CSS?

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

למרבה המזל, יש אפשרות אחרת: המסנן drop-shadow(). כך תוכלו לעשות בדיוק את מה שהמעצב ביקש. יש מגוון רחב של אפשרויות ליצירת צללים ב-CSS, וכל אחת מהן מיועדת לתרחיש לדוגמה אחר.

צללית תיבה

Browser Support

• 10
• 12
• 4
• 5.1

Source

המאפיין box-shadow משמש להוספת צללים לתיבה של רכיב HTML. הוא פועל ברכיבי בלוק וברכיבים בתוך שורה.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

סדר הערכים של box-shadow הוא:

1. הזחה אופקית: מספר חיובי ידחוף את התמונה שמאלה ומספר שלילי ידחוף אותה ימינה.
2. הזחה אנכית: מספר חיובי ידחוף את התמונה למטה מלמעלה, ומספר שלילי ידחוף אותה למעלה מלמטה.
3. רדיוס טשטוש: מספר גדול יותר יוצר צל מטושטש יותר, ומספר קטן יותר יוצר צל חד יותר.
4. Spread radius (אופציונלי): מספר גדול יותר מגדיל את גודל הצל ואילו מספר קטן יותר מקטין אותו, עד שהוא יהיה באותו גודל כמו blur radius אם הוא מוגדר כ-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;
}

מאפיינים שמשפיעים על box-shadow

הוספת 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;
}

צללית טקסט

Browser Support

• 2
• 12
• 3.5
• 1.1

Source

המאפיין 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%))
}

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

המסנן drop-shadow כולל את אותם ערכים כמו המסנן box-shadow אבל אסור להשתמש במילת המפתח inset ובערך spread. אפשר להוסיף כמה צללים שרוצים על ידי הוספת כמה מכונות של ערכי drop-shadow למאפיין filter. כל צל עושה שימוש בצל האחרון כנקודת ייחוס למיקום.

בדיקת ההבנה

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

איזה ערך צל שלמטה ייחודי ל-box-shadow?

היסט אופקי

כדאי לנסות שוב.

סטייה אנכית

כדאי לנסות שוב.

רדיוס הטשטוש

כדאי לנסות שוב.

רדיוס הפיזור

🎉

צבע

כדאי לנסות שוב.

inset

כדאי לנסות שוב. inset היא מילת מפתח שגם היא ייחודית ל-box-shadow.

מותר להשתמש ב-13 צלליות תיבה ברכיב אחד בכל פעם.

True

אין הגבלה רשמית.

לא נכון

מוסיפים כמה צלליות תיבה שרוצים.