כיצד להשתמש ב- CSS box-shadow: 13 טריקים ודוגמאות

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

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

מהו CS-box-shadow?

ה צל קופסא המאפיין משמש להחלת צל על רכיבי HTML. זהו אחד המאפיינים הנפוצים ביותר של CSS עבור תיבות עיצוב או תמונות.

תחביר CSS:

תיבת צל: [קיזוז אופקי] [קיזוז אנכי] [רדיוס טשטוש] [רדיוס התפשטות אופציונלי] [צבע];

1. קיזוז אופקי: אם הקיזוז האופקי חיובי, הצל יהיה מימין לתיבה. ואם הקיזוז האופקי הוא שלילי, הצל יהיה משמאל לתיבה.
2. קיזוז אנכי: אם הקיזוז האנכי חיובי, הצל יהיה מתחת לתיבה. ואם הקיזוז האנכי שלילי, הצל יהיה מעל לתיבה.
3. טשטוש רדיוס: ככל שהערך גבוה יותר, כך הצל יהיה מטושטש יותר.
4. רדיוס התפשטות: זה מסמל כמה הצל צריך להתפשט. ערכים חיוביים מגדילים את התפשטות הצל, ערכים שליליים מקטינים את התפשטות.
5. צֶבַע: זה מסמל את צבע הצל. כמו כן, הוא תומך בכל תבנית צבע כמו rgba, hex או hsla.

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

1. הוסף צל צליל עמום לשמאל, לימין ולתחתית התיבה

באפשרותך להוסיף צללים עמומים מאוד לשלושה צדדים (שמאל, ימין ותחתון) של התיבה באמצעות CSS-box הבא עם אלמנט היעד שלך:

תיבת צל: rgba (149, 157, 165, 0.2) 0 פיקסלים 8 פיקסלים 24 פיקסלים;

תְפוּקָה:

2. הוסף צללית תיבה עמומה לכל הצדדים

באפשרותך להוסיף צללים בהירים לכל צידי התיבה באמצעות CSS התיבה הבא עם אלמנט היעד שלך:

תיבת צל: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;

תְפוּקָה:

3. הוסף צל-תיבה דק לדפנות התחתונות והימניות

אתה יכול להוסיף צללים לתחתית ולצד ימין של התיבה באמצעות CSS תיבת הצללים הבא עם אלמנט היעד שלך:

תיבת צל: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

תְפוּקָה:

4. הוסף צללית כהה לכל הצדדים

אתה יכול להוסיף צל כהה לכל צידי התיבה באמצעות CSS-box הבא עם אלמנט ה- HTML היעד שלך:

תיבת צל: rgba (0, 0, 0, 0.35) 0 פיקסלים 5 פיקסלים 15 פיקסלים;

תְפוּקָה:

5. הוסף צל מפוזר לכל הצדדים

אתה יכול להוסיף צל מתפשט לכל צידי התיבה באמצעות הפקודה הבאה עם אלמנט ה- HTML היעד שלך:

תיבת צל: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;

תְפוּקָה:

6. הוסף צל גבול דק לכל הצדדים

אתה יכול להוסיף צללית גבול פשוטה לכל צידי התיבה באמצעות CSS הבא עם אלמנט היעד שלך:

תיבת צל: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0.08) 0px 1px 0px inset;

תְפוּקָה:

7. הוסף צל-תיבה לצדדים התחתונים והשמאליים

אתה יכול להוסיף צל בצד התחתון והשמאלי של התיבה באמצעות CSS-box הבא עם אלמנט ה- HTML היעד שלך:

תיבת צל: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

תְפוּקָה:

8. הוסף צללית קופסה עמומה לצדדים העליונים והשמאליים, הצללים האפלים לחלק התחתון והימני

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

תיבת צל: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

תְפוּקָה:

9. הוסף צל גבול דק וצבעוני לכל הצדדים

אתה יכול להוסיף צללית צבעונית פשוטה לכל צדי התיבה באמצעות CSS-box הבא עם אלמנט היעד שלך:

תיבת צל: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

תְפוּקָה:

10. הוסף צללי גבול צבעוניים מרובים לחלק התחתון והשמאלי של הקופסה

באפשרותך להוסיף צללי גבול צבעוניים מרובים בצד התחתון והשמאלי של התיבה באמצעות CSS הבא עם אלמנט היעד שלך:

תיבת צל: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px inset;

תְפוּקָה:

11. הוסף צלליות גבולות מרובות לתחתית

אתה יכול להוסיף צללי גבול צבעוניים מרובים לתחתית התיבה באמצעות CSS-box הבא עם אלמנט ה- HTML היעד שלך:

תיבת צל: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170, 0.1) 0 פיקסלים 20 פיקסלים, rgba (240, 46, 170, 0.05) 0 פיקסלים 25 פיקסלים;

תְפוּקָה:

12. הוסף צללי גבול צבעוניים מרובים לחלק התחתון והימני של הקופסה

באפשרותך להוסיף צללי גבול צבעוניים מרובים בצד התחתון והימני של התיבה באמצעות CSS הבא עם אלמנט היעד שלך:

תיבת צל: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170, 0.1) 20 פיקסלים 20 פיקסלים, rgba (240, 46, 170, 0.05) 25 פיקסלים 25 פיקסלים;

תְפוּקָה:

13. הוסף צללים בהירים לצד שמאל וימין, מורח צל לתחתית

באפשרותך להוסיף צללים בהירים לצד שמאל וימין ולהפיץ צל לתחתית התיבה באמצעות CSS-box הבא עם אלמנט היעד שלך ב- HTML:

תיבת צל: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09) 0px 8px 4px, rgba (0, 0, 0, 0.09) 0px 16px 8px, rgba (0, 0, 0, 0.09) 0px 32px 16px;

תְפוּקָה:

שלב CSS עם דף HTML

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

קָשׁוּר: 11 כלים שימושיים לבדיקה, ניקוי ואופטימיזציה של קבצי CSS

ניתן להטמיע אותו בדף ה- HTML עצמו או לצרף אותו כמסמך נפרד. ישנן שלוש דרכים לכלול CSS במסמך HTML:

CSS פנימי

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

סגנון 4

מוטבע CSS

CSS מוטבע משמש להוספת כללי סגנון ייחודיים לאלמנט HTML. ניתן להשתמש בו עם אלמנט HTML דרך ה- סִגְנוֹן תְכוּנָה. תכונת הסגנון מכילה מאפייני CSS בצורה של "ערך הנכס" מופרדים באמצעות נקודה-פסיק (;).

קָשׁוּר: למד כיצד לבנות אתרים דו מימדיים באמצעות רשת CSS

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

סגנון 4

CSS חיצוני

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

צור קובץ CSS חדש באמצעות ה- .css סיומת. כעת הוסף את קוד ה- CSS הבא בתוך אותו קובץ:

.כותרת {
יישור טקסט: מרכז;
}
.image-box {
בלוק תצוגה;
שוליים-שמאל: אוטומטי;
שוליים מימין: אוטומטי;
תיבת צל: rgba (0, 0, 0, 0.35) 0 פיקסלים 5 פיקסלים 15 פיקסלים;
}

לבסוף, צור מסמך HTML והוסף את הקוד הבא בתוך אותו מסמך:

סגנון 4

שים לב שקובץ CSS מקושר למסמך HTML באמצעות תג ו href תְכוּנָה.

כל שלוש השיטות שלעיל (CSS פנימי, CSS מוטבע ו- CSS חיצוני) יציגו את אותה פלט-

הפוך את דף האינטרנט שלך לאלגנטי בעזרת CSS

באמצעות CSS יש לך שליטה מלאה על העיצוב של דף האינטרנט שלך. אתה יכול להתאים אישית כל רכיב HTML באמצעות מאפייני CSS שונים. מכשירים מכל רחבי העולם תורמים לעדכוני CSS והם עושים זאת מאז שחרורו בשנת 1996. ככאלה, למתחילים יש הרבה מה ללמוד!

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

10 דוגמאות פשוטות לקוד CSS שתוכלו ללמוד תוך 10 דקות

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

קרא הבא

על הסופר