צל הקופסה

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 42 מתוך 76.

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

הנה התחביר הבסיסי לשימוש במאפיין box-shadow:

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

horizontal-offset: המרחק האופקי של הצל מהאלמנט. ערכים חיוביים מזיזים את הצל ימינה, וערכים שליליים מזיזים אותו שמאלה.

vertical-offset: המרחק האנכי של הצל מהאלמנט. ערכים חיוביים מזיזים את הצל כלפי מטה, וערכים שליליים מזיזים אותו כלפי מעלה.

blur (אופציונלי): רדיוס הטשטוש של הצל. ערך גדול יותר יוצר צל מטושטש יותר. אם משמיטים אותו, ברירת המחדל היא 0 (ללא טשטוש).

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

color (אופציונלי): צבע הצל. אפשר לציין אותו באמצעות שמות של צבעים, ערכים הקסדצימליים, ערכי RGB או ערכי HSL.
inset (אופציונלי): משנה את הצל מצל חיצוני (outset) לצל פנימי.

לדוגמה:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

בדוגמה הזו, לכל רכיבי <div> יש צל תיבה עם היסט אופקי של 5px, היסט אנכי של 5px, רדיוס טשטוש של 10px וצבע אפור. לרכיבים עם המחלקה button יש צל תיבה עם היסט אופקי של 2px, היסט אנכי של 2px, רדיוס טשטוש של 5px, רדיוס התפשטות של 2px וצבע שחור שקוף למחצה (rgba(0, 0, 0, 0.5)).

אתגר

קל

ניתן לך מסמך HTML עם חלוקה (<div>) ופסקה (<p>). עליך להשתמש במאפיין box-shadow כדי להוסיף אפקטי צל לאלמנטים האלה. פעל לפי השלבים הבאים:

כתוב כלל CSS שמכוון לאלמנט <div>. הגדר את box-shadow לערך 10px 10px 5px gray.
כתוב כלל CSS שמכוון לאלמנט <p>. הגדר את box-shadow לערך -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

נסו בעצמכם

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>