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

בלוג זה ידון בשיטה להחלת אפקטי צל על רכיבי HTML.

כיצד להפיל אפקט צל על רכיבי HTML באמצעות CSS?

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

התחביר של המאפיין box-shadow מתואר להלן.

תחביר

צל קופסא : אף אחד |h-offset v-offset טשטוש צבע התפשטות | הַבלָעָה | התחלתי | אתה יורש ;

התיאור של התחביר הנ'ל מופיע להלן:

' אף אחד ”: זהו ערך ברירת המחדל של המאפיין box-shadow.
' h-offset ”: ערך זה מייצג את המרחק האופקי.
' v-offset ”: ערך זה מגדיר את המרחק האנכי.
' לְטַשׁטֵשׁ ”: הערך השלישי הוא טשטוש. מיקסום הערך שלו ימקסם את אפקט הטשטוש.
' התפשטות ”: הערך הרביעי מייצג את התפשטות הצל. זה יכול להחזיק ערכים חיוביים או שליליים, כאשר הערך החיובי מגדיל את המרווח, וערך שלילי מקטין אותו.
' צֶבַע ”: ערך זה הוא אופציונלי, המייצג את הצבע הנוכחי.
' התחלתי ”: ערך זה מגדיר את המאפיין של הערך ההתחלתי שלו.
' אתה יורש ”: ערך זה יורש את המאפיין של אלמנט האב שלו.
' הַבלָעָה ”: ערך ההכנסה משמש ליצירת צללים בתוך הקופסה.

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

דוגמא

בקובץ HTML, תחילה הוסף את '

'. בתוך אלמנט

זה, הוסף תגיות

ו-
כדי לספק תוכן לדף האינטרנט.

HTML

< div >

< h1 > The Box Shadow < / h1 >

< ע > קופסא-צל: 3 פיקסלים 8 פיקסלים < / ע >

< / div >

כעת, החל את מאפייני ה-CSS על רכיבי ה-HTML שנוספו.

CSS

div {

צל קופסא : 3 פיקסלים 8 פיקסלים ;

}

האלמנט div מוחל עם המאפיין ' צל קופסא 'עם הערך' 3 פיקסלים 8 פיקסלים ', המייצג את ההיסט האופקי וההיסט האנכי.

תְפוּקָה

בסעיף הבא, רכיבי ה-HTML יהיו מעוצבים עם מאפיינים שונים.

CSS

div {

גבול : 5 פיקסלים מוצק rgb ( 255 , 111 , 1 ) ;

צל קופסא : 3 פיקסלים 8 פיקסלים 9 פיקסלים 4 פיקסלים #f4af1b ;

}

להלן מאפייני ה-CSS הנוספים שהוחלו על אלמנט div:

' גבול ” למאפיין מוקצה הערך 5px solid rgb(255, 111,1) כאשר 5px מציין את רוחב הגבול, solid מייצג את סגנון הגבול, ו-rgb(255, 111, 1) הוא הצבע.
' צל קופסא ' מאפיין עם הערך 3px 8px 9px 4px #f4af1b מייצג את ה-h-offset כ-3px, ה-v-offset כ-8px, טשטוש כ-9px, התפשט כ-4px, ו-#f4af1b מציין את הצבע.

הקוד הנתון לעיל יציג את אלמנט div כפי שמוצג להלן:

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

HTML

<מזהה div = 'קופסה1' >

> The Box Shadow >

> צל קופסא : 3 פיקסלים 8 פיקסלים 9 פיקסלים 4 פיקסלים #f4af1b >

> > >

<מזהה div = 'קופסה2' >

> The Box Shadow >

> צל קופסא : 3 פיקסלים 8 פיקסלים 9 פיקסלים 4 פיקסלים #f4af1b >

>

Style box1 div

#box1 {

רוֹחַב : 40% ;

גוֹבַה : 140 פיקסלים ;

גבול : 5 פיקסלים מוצק #ff9c83 ;

צל קופסא : 8 פיקסלים 10 פיקסלים 15 פיקסלים 20 פיקסלים #807f7f ;

}

פה:

' #box1 ' משמש לגישה ל-div עם id box1.
' רוֹחַב 'מאפיין משמש להגדרת רוחב האלמנט.
' גוֹבַה ' מאפיין מגדיר את גובה האלמנט.
' גבול ” מקבל ערך 5px solid #ff9c83 כאשר 5px מציין את רוחב הגבול, מוצק מייצג את סגנון הגבול, ו-#ff9c83 הוא הצבע.
' צל קופסא ' המאפיין יוגדר כ' 8px 10px 15px 20px #807f7f ' כאשר 8 פיקסלים הוא היסט אופקי, 10 פיקסלים הוא היסט אנכי, 15 פיקסלים הוא אפקט הטשטוש, 20 פיקסלים הוא אפקט התפשטות, ו-#807f7f הוא צבע הצל.

Style box2 div

#box2 {

רוֹחַב : 40% ;

גוֹבַה : 140 פיקסלים ;

גבול : 5 פיקסלים מוצק rgb ( 255 , 111 , 1 ) ;

צל קופסא : הַבלָעָה 4 פיקסלים 8 פיקסלים #f4af1b ;

שוליים-שמאליים : 350 פיקסלים ;

}

ניתן לראות שעיצבנו את ה-box2 div עם אותם מאפיינים:

טיפ בונוס: הוספת צללים מרובים ב-HTML Element

ה ' צל קופסא ניתן להשתמש במאפיין כדי להוסיף אפקטי צל מרובים לאלמנט HTML. ניתן לעשות זאת באמצעות פסיקים בין כל צל כפי שמוצג בדוגמה הבאה:

צל קופסא : 6 פיקסלים 6 פיקסלים rgb ( 91 , 0 , 143 ) , 12 פיקסלים 5 פיקסלים rgb ( 201 , 8 , 8 ) , 16 פיקסלים 16 פיקסלים 8 פיקסלים rgb ( 226 , 213 , 29 ) ;

כפי שאתה יכול לראות, צללים מרובים הוחלו בהצלחה:

זה היה הכל לגבי השימוש בצל הגבול של CSS.

סיכום

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

צל גבול CSS