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, הפוסט והדוגמאות כולן זהות ונלקחו מפוסט זה.

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

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

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

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

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

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

    השאירו תגובה

     

    פעימות
    Up!
    לבלוג