הדרכה של Box Shadow CSS - כיצד להוסיף צללית לכל אלמנט HTML

אנו יכולים להוסיף צללית לכל רכיב HTML באמצעות מאפיין CSS box-shadow. כך.

הוספת צל צל בסיסי

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

 Box1 Box2 Box3

ואז הוסף CSS בסיסי:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

התוצאה היא רק שלוש קופסאות שחורות שיהיה לנו קל להוסיף לה צללים על ידי קריאה לזהות הייחודיות שלהן:

כדי להוסיף צללית בסיסית, בואו נשתמש box-shadowבמאפיין בתיבה 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }

יש לנו 3 פרמטרים כאן. 2 הראשונים הם, בהתאמה, קיזוז ה- x וקיזוז ה- y. הם קבעו את מיקום הצל.

הקיזוז הוא יחסית למקור, שב- HTML הוא תמיד הפינה השמאלית העליונה של אלמנט. קיזוז x חיובי יעביר את הצל ימינה, וקיזוז חיובי יעביר את הצל כלפי מטה.

הפרמטר השלישי הוא צבע הצללית שלך.

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

אם נרצה שהצל ייראה קצת יותר מציאותי, נרצה להתנסות blur-radiusבפרמטר.

פרמטר זה שולט בכמה לטשטש את הצל כך שהוא נהיה גדול וקל יותר. בואו להחיל אותו על תיבה 2:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }

הערך של 4px מגדיר את רדיוס הטשטוש שיחול על הצל שלנו.

אם אנו רוצים לשלוט בגודל הצל, נוכל להשתמש spread-radiusבפרמטר השולט כמה צל גדל או מתכווץ.

בואו להוסיף רדיוס מפוזר של 8 פיקסלים לתיבה 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }

זכרו את סדר הפרמטרים הללו!

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

בואו נעשה זאת עם תיבה 3 על ידי הוספת צל צל כחול וירוק בו זמנית:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }

אמנם הוא לא ייצור צל צל, אך insetניתן להשתמש בפרמטר גם עם box-shadowהמאפיין.

כפי שהשם מרמז, פרמטר זה יוצר צליל שיבוץ (כלומר צל בתוך תיבה).

insetניתן למקם את הפרמטר בתחילת או בסוף

box-shadowתכונה. כאן אנו מדגימים את השימוש בו עם blockquoteאלמנט.

HTML:

 The key to success is to start before you're ready. — Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }

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

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;

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

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

לשחק סביב ולראות מה אתה יכול להמציא!