חיפוש ]

91 דוגמאות יפות של התכונה box-shadow ב CSS

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

התכונה box-shadow מתוארת על ידי הֶסֵּט (offset) בציר ה X והֶסֵּט בציר ה Y (ביחס לאלמנט), כמו גם טשטוש (blur), רדיוס הפיזור (spread radius), והצבע.

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

הנה כלי נחמד ואינטראקטיבי המאפשר לכם ליצור box-shadow.

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

סִינְטַקְס

/* Keyword values */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: unset;

דוגמאות לשימוש בתכונה box-shadow

תודות לפוסט של CSS Scan, הפוסט והדוגמאות כולן זהות ונלקחו מפוסט זה.

    רועי יוסף
    רועי יוסף

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

    • ‫אורית 21 ספטמבר 2021, 10:53

      מגניב ושימושי, שמרתי, תודה רבה!

      • רועי 21 ספטמבר 2021, 18:28

        אחלה 🙂 חזרי לבקר!

    • שרה 31 אוקטובר 2021, 0:42

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

      selector{
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
      }

      תודה רבה

      • רועי יוסף 28 דצמבר 2021, 4:23

        היי שרה,

        אין טעות בקוד, בדקי שאין הגדרת CSS שדורסת או קיימת התכונה overflow: hidden על האובייקט המדובר.

    • שגיא 21 דצמבר 2021, 8:37

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

      • רועי יוסף 28 דצמבר 2021, 4:21

        היי שגיא,

        לא צריך לעשות כלום לפני… לאיזו שגיאה אתה מתכוון? בכל מקרה בדוק שלא קיימת התכונה overflow: hidden על האובייקט המדובר…

    • אילה 14 יולי 2023, 1:13

      ממש שימושי
      תודה רבה!

    • אביתר 13 מאי 2024, 1:01

      תודה רבה, מאד עזר לי!

    תגובה חדשה

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