פינות מעוגלות בעזרת CSS3

ניתן להוסיף לתיבות באתר האינטרנט פינות מעוגלות ממש בקלות עם CSS3  באמצעות התכונה  .border-radius לדוגמה:

border-radius: 25px;

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

ניתן להשתמש ביחידות של פיקסלים, אבל גם באחוזים. לדוגמה:

border-radius: 25%;

לדוגמה, הקוד הבא שמשתמש בפיקסלים כדי לעצב פינות תיבה ברדיוס 25 פיקסלים:

.rcbox {
  width: 300px;
  height: 120px;
  background:yellow;
  border: 1px solid black;
  text-align: center;
  border-radius: 25px;
}

בגלל שהשתמשנו בערכים מוחלטים בפיקסלים אפשר לראות שהפינות מעוגלות במידה שווה בציר האנכי והאופקי. לעומת זאת, שימוש באחוזים ייתן מידה שונה של עיגול בציר האנכי והאופקי כתלות באורך וברוחב של התיבה. כדי לראות את ההבדל, נחליף את ערך border-radius מ-25px ל-25% לדוגמה. כך זה נראה:

אפשר לראות שהציר האופקי ארוך יותר מהציר האנכי בגלל שאחוזים נותנים תוצאה יחסית.

ערכים שונים לפינות שונות

בעוד הדוגמה שלמעלה נותנת לנו ארבע פינות מעוגלות באותה מידה, ייתכן שנרצה לגוון כך שרק חלק מהפינות יהיו מעוגלות או שחלק מהפינות יהיו מעוגלות יותר מאחרות. לצורך כך, נוכל לפרק את תכונת border-radius ל-4 תכונות נפרדות:

לדוגמה:

border-bottom-left-radius: 35px;
border-bottom-right-radius: 27.5px;
border-top-left-radius:20px;
border-top-right-radius:0px;

וכך זה נראה:

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

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

border-radius: 50px 10px;

נראה את התוצאה להלן:

ערכים שונים בציר אופקי ואנכי

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

border-top-left-radius: 100px 20px;

ייתן את התוצאה הבאה:

אם נותנים ערך אחד אופקי וערך אחד אנכי, התוצאה תהיה 4 פינות מעוגלות באותו אופן. נסתכל על הדוגמה הבאה:

border-radius: 100px 20px;

שתיתן את התוצאה הבאה:

ערכים שונים לפינות שונות ולצירים האופקי והאנכי בשורה אחת

ניתן לתת ערכים שונים ל-4 פינות התיבה באמצעות border-radius ואחריו 4 ערכים. סדר הערכים הוא:

border-radius: top-left top-right bottom-right bottom-left;

הערכים מופרדים ברווח בודד ללא פסיקים. לדוגמה:

border-radius: 80px 30px 10px 0px;

תיתן את התוצאה הבאה:

יותר מכך, ניתן לתת ערכים שונים לציר האנכי והאופקי של 4 פינות התיבה באמצעות 8 ערכים:

border-radius: top-left top-right bottom-right bottom-left (1-4)
top-left top-right bottom-right bottom-left (5-8)

(1-4) מציינים את הערכים בציר האופקי,ו (5-8) מציינים את הערכים בציר האנכי.

שימוש יצירתי ב border-radius

שימוש יצירתי ב border-radiusיכול להניב תוצאות יצירתיות. לדוגמה, אם ניתן לכל הפינות border-radius של מחצית מהרוחב והאורך, ונקפיד על אורך ורוחב שווים, תתקבל צורת עיגול. קוד ה-CSS הבא יוצר עיגול באמצעות אורך ורוחב של 100 פיקסלים ו- border-radius של 50 פיקסלים:

width: 100px;
height: 100px;
border-radius: 50px;

כך זה נראה:

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

width: 200px;
height: 100px;
border-radius: 0px 0px 200px 200px;

וכך תראה התוצאה:

בגלל שאנחנו רוצים חצי עיגול לרוחב המסך נקפיד על רוחב כפול מאורך, ואחר כך נמחק את החלקים שהם top באמצעות ערך 0 ולחלקים שמהווים את חלקו התחתון של המסך ניתן ערך של 200 פיקסלים כמו שנתנו לרוחב.

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

width: 200px;
height: 100px;
border-radius: 200px 0px;

ואת צורת העלה שפונה לצד ההפוך (2) מייצר קוד זהה שבו הפכנו את ערכי הradius-border באופן הבא:

border-radius: 0px 200px;

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

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים