יצירת גבולות (borders) בעלי צבעים רבים

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

תחביר התכונה border-colors

Element { -moz-border-צד-colors: colors; }

במקום המילה "צד" המופיע בדוגמת התחביר יש לשים את הצד של גבול האלמנט שאותו ברצוננו להגדיר באמצעות התכונה border-color. הצדדים האפשריים הם:

  • border-top-color - הגבול העליון של האלמנט;
  •  border-right-color - הגבול הימיני של האלמנט;
  • border-bottom-color - הגבול השמאלי של האלמנט;
  • border-left-color - הגבול השמאלי של האלמנט.

דוגמה להגדרת גבול מרובה צבעים

div { border-width: 9px;
      -moz-border-border-top-colors: green green green red red red yellow yellow yellow;}

תוצאת הדוגמה שלנו תהיה זו:

multicolor border illustration in CSS3

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

דוגמה ליצירת אפקטים בצבע באמצעות התכונה border-color

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

div {
     border: 8px solid #000;
     -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
     -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
     -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
     -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
     padding: 5px 5px 5px 15px;
    }

תוצאת הדוגמה שלנו תהיה זו:

Fading borders with Multicolor border illustration in CSS3

 

 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש