border-image - תמונות כגבולות לאלמנטים

באמצעות CSS3 והתכונה המובנית border-image ניתן ליצור אפקטים מרהיבים שבהם גבולות אלמנטים מורכבים על ידי תמונות. נכון לשעת כתיבת שורות אלה תכונה זו נתמכת על ידי הדפדפנים הבאים: Opera, Firefox, Safari and Chrom. החל מגרסה 16 chrom תומכת בתכונה ללא קידומת ואילו שאר הדפדפנים דורשים קידומת.

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

element { border-image: source slice repeat; }

  1. source - פרמטר זה מיועד להצביע על הנתיב והתמונה שתשמש אותנו כתמונת הגבול. פרמטר זה צריך להיות כתובת חוקית  (URI) לתמונה שממנה אנו רוצים להרכיב את הגבול.
     
  2. slice - הערך השני שאותו עלינו להעביר לתכונה מכיל פרמטרים המגדירים תשעה אזורים בתוך התמונה. אנו יוצרים את תשעת האזורים על ידי העברת ארבעה ערכים (אחוזים או פיקסלים) המגדירים 4 צירים בתמונה הנתונה. על מנת להבין כיצד אזורים אלה מוגדרים ומה תפקידם בבניית גבולות אלמנט כדאי שנביט באיור הבא:
    Visualization of the slice parameter in the css3 property border image

    הערך הראשון: מציין את המרחק (בפיקסלים או באחוזים) של קו דמיוני מן הקצה העליון של התמונה; הערך השני: מציין את המרחק (בפיקסלים או באחוזים) של קו דמיוני מן הקצה הימני של התמונה; הערך השלישי: מציין את המרחק (בפיקסלים או באחוזים) של קו דמיוני מן הקצה התחתון של התמונה; הערך הרביעי: מציין את המרחק (בפיקסלים או באחוזים) של קו דמיוני מן הקצה השמאלי של התמונה.
    כפי שהדבר בא לידי ביטוי באיור, ארבעת הקווים מחלקים את התמונה שלנו ל – 9 חלקים. מחלקים אלה הדפדפן מייצר את גבולות האלמנט שלנו. את פינות התמונה ממקם הדפדפן בהתאמה על ארבעת פינות האלמנט. את גוף הגבולות הוא ממקם בהתאמה גם כן .
  3. repeat - פרמטר זה יכול לקבל אחד מארבעה ערכים:
    • Stretch – חלק התמונה הנבחר יימתח ויותאם בגודלו לגודל גבול האלמנט המתאים
    • Repeat – חלק התמונה הנבחר יישאר בגודל המתאים ויחזור על עצמו עד שיתמלא כל הגבול.
    • Round – במידה ונעביר ערך זה התמונה תחזור על עצמה אבל גודלה ישתנה כך שהיא תמלא את כל הגבול ללא שאריות.
    • Space – גם כאן התמונה תחזור על עצמה אולם אם החזרה לא ממלאת בצורה מושלמת את הגבול הדפדפן יוסיף מרווח שווה לפני ואחרי כל חזרה של תמונה כך שהתמונות החוזרות על עצמן תמלאנה את כל הגבול בצורה מושלמת.

דוגמאות קוד לשימוש בתכונה border-image

div { -webkit-border-image: url(image.jpg) 45 20 45 30 repeat;
      -moz-border-image: url(image.jpg) 45 20 45 30 repeat;
      border-image: url(image.jpg) 45 20 45 30 repeat; }

בדוגמת הקוד הזו ציינו בפרמטר slice מספרים ללא יחידת מידה (אחוז או פיקסל). כאשר משתמשים במספרים כך הדפדפן יתייחס אליהם בצורה שונה בהתאם לסוג התמונה שבה משתמשים. במקרה שמדובר בתמונה וקטורית הדפדפן יתייחס למספרים כקואורדינטות ואילו במידה והתמונה היא תמונת raster כגון bitmap, jpg וכדומה ההתייחסות למספרים תהיה כאל פיקסלים. כאמור, ניתן להשתמש גם במידות אחוזיות ובמקרה זה יש להוסיף את הסימן % לאחר כל מספר.

איור להמחשת דוגמת הקוד שלמעלה

CSS3 Border Image Example

 

 


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