התכונה 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, הפוסט והדוגמאות כולן זהות ונלקחו מפוסט זה.
מגניב ושימושי, שמרתי, תודה רבה!
אחלה 🙂 חזרי לבקר!
תודה רבה שימושי ביותר!
אני מנסה להוסיף צל לתמונות בסליידר תמונות באלמנטור ולא מצליחה, הוספתי בcss מותאם את הקוד הבא.. אשמח להבין איפה הטעות:
תודה רבה
היי שרה,
אין טעות בקוד, בדקי שאין הגדרת CSS שדורסת או קיימת התכונה overflow: hidden על האובייקט המדובר.
ניסיתי להוסיף את הקוד css על כפתור ויש שגיאה.
יש משהו שהייתי צריך לעשות קודם? לפני שאני מדביק את הקוד לcss מותאם של אובייקט מסויים?
היי שגיא,
לא צריך לעשות כלום לפני… לאיזו שגיאה אתה מתכוון? בכל מקרה בדוק שלא קיימת התכונה overflow: hidden על האובייקט המדובר…
ממש שימושי
תודה רבה!
תודה רבה, מאד עזר לי!