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

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

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

---

---

מהו CSS box-shadow?

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

תחביר CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

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

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

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

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

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

תְפוּקָה:

---

---

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

אתה יכול להוסיף צללים בהירים מכל צדדי הקופסה באמצעות CSS-box-shadow הבא עם רכיב HTML היעד שלך:

---

---

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

תְפוּקָה:

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

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

כיצד להפוך את המחשב למהיר יותר Windows 10

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

תְפוּקָה:

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

אתה יכול להוסיף צל כהה לכל צדדי הקופסה באמצעות CSS-box-shadow הבא עם רכיב HTML היעד שלך:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

תְפוּקָה:

5. מוסיפים את Shadow Shadow לכל הצדדים

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

box-shadow: 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 הבא עם רכיב HTML היעד שלך:

box-shadow: 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 הבא-צל CSS עם רכיב HTML היעד שלך:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

תְפוּקָה:

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

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

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

תְפוּקָה:

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

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

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

תְפוּקָה:

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

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

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

תְפוּקָה:

איך מנגנים יוטיוב בתוכנית הד

11. הוסיפו מספר צלליות גבול צבעוניות לתחתית

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

box-shadow: 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) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

תְפוּקָה:

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

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

box-shadow: 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) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

תְפוּקָה:

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

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

box-shadow: 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:

CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Style 4







CSS מוטבע

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

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

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

CSS box-shadow

Style 4







CSS חיצוני

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

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

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

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

כיצד לאפס סיסמה ב- ps4

CSS box-shadow

Style 4







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

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

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

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 10 דוגמאות קוד CSS פשוטות שתוכל ללמוד תוך 10 דקות

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

קרא הבא נושאים קשורים

• תִכנוּת
• עיצוב אתרים
• CSS

על הסופר יובראג 'צ'נדרה(פורסמו 60 מאמרים)

יובראג 'הוא סטודנט לתואר ראשון במדעי המחשב באוניברסיטת דלהי, הודו. הוא נלהב מ- Full Stack Web Development. כשהוא לא כותב, הוא בוחן את עומק הטכנולוגיות השונות.

עוד מאת Yuvraj Chandra

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה