פינות מעוגלות והתכונה border-radius

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

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

Element { border-c-radius: x y; }

התכונה border-radius מאפשרת גמישות מרבית. ביכולתנו להגדיר באמצעותה את רמת עקמומיות העיגול של כל פינה בנפרד. בתחביר למעלה c מייצגת את הפינה ואילו בעזרת x ו - y נגדיר את שיעור עקמומיות הפינה.

כיצד נבחר את הפינה שעבורה נגדיר עקמומיות?

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

הפינה הנבחרת ההגדרה בתכונה border-radius
פינה ימנית עליונה border-top-right-radius
פינה שמאלית עליונה border-top-left-radius
פינה ימנית תחתונה border-bottom-right-radius
פינה שמאלית תחתונה border-bottom-left-radius

כיצד נגדיר את רמת העקמומיות של הפינה?

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

border radius size illustration

כפי שביכולתכם לראות באיור למעלה על ידי שליטה בגובה (y) ורוחב (x) הפינה אנו שולטים ברמת העקמומיות שלה. נבין זאת יותר טוב אם נביט בדוגמת הקוד הבאה שבה נגדיר כי הפינה השמאלית העליונה של המרובע שלנו  תהיה מעוגלת כך שה - x שלנו יהיה שווה 20px ואילו ה - y יהיה שווה אף הוא 20px.

element {border-top-left-radius: 20px 20px;}

במקרים כמו בדוגמת הקוד האחרונה, שבהם אורך ורוחב הפינה זהים (במקרה שלנו 20px) אזי CSS3 מאפשרת לנו לכתוב רק ערך אחד. הדפדפן יניח באופן אוטומטי שאנו מתכוונים בכך ש ה- x וה - y זהים ויפעל בהתאם. משמעות הדבר היא שאת דוגמת הקוד האחרונה אנו יכולים לכתוב גם כך:

element {border-top-left-radius: 20px;}}

דוגמאות קוד להגדרת פינות מעוגלות

בדוגמת הקוד הראשונה שלנו נגדיר רמת עיגול זהה עבור כל אחת מפינות האלמנט שלנו. במקרה זה נגדיר את הקוד עבור כל אלמנט שה - ID שלו הוא sample-1:

#sample-1 {
    border-top-left-radius:     20px;
    border-top-right-radius:    20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius:  20px;
}

בדוגמת הקוד השנייה שלנו נגדיר רמת עיגול זהה עבור כל אחת מפינות האלמנט שלנו. במקרה זה נגדיר את עבור כל אלמנט שה - ID שלו הוא sample-2 פינות שה - x שלהן באורך 10px ואילו ה - y שלהן באורך 30px:

#sample-2 {
    border-top-left-radius:     10px 30px;
    border-top-right-radius:    10px 30px;
    border-bottom-right-radius: 10px 30px;
    border-bottom-left-radius:  10px 30px;
}

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

#sample-3 {
    border-top-left-radius:     40px 30px;
    border-top-right-radius:    30px 30px;
    border-bottom-right-radius: 20px 30px;
&    border-bottom-left-radius:  10px 30px;
}

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

Border Radius Samples

הבדלים בין דפדפנים שונים

ככלל, כל הדפדפנים המודרניים (אפילו אינטרנט אקספלורר 9) תומכים ב - border-radius. יחד עם זאת, נכון לזמן כתיבת שורות אלה כדי שדפדפני מוזילה יעבדו עם התכונה יש להוסיף לקוד את התחילית שלה. תחביר התכונה במקרה זה יהיה:

Element { -moz-border-radius-c: x y; }

משמעות הדבר היא שאם נרצה שהפינה הימנית העגולה של אלמנט מסוג <div> תהיה עגולה בדפדפני מוזילה נצטרך לכתוב את הקוד כך:

div { -moz-border-radius-top-right: 20px 20px; }

כמובן שביכולתנו לשלב בין קוד סטנדרטי לקוד מיוחד לדפדפני מוזילה כדי שהקוד שלנו "יתפוס" בכל הדפדפנים המודרניים. במקרה זה הקוד שלמעלה ייראה כך:

div { -moz-border-radius-top-right: 20px 20px;
      radius-top-right: 20px 20px; 
 }

 

 

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