תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

פינות מעוגלות בעזרת 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;
}

 

CSS3 מייצר תיבה עם פינות מעוגלות

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

 

CSS3 תיבה עם פינות מעוגלות ערך באחוזים

 

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

 

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

בעוד הדוגמה שלמעלה נותנת לנו ארבע פינות מעוגלות באותה מידה, ייתכן שנרצה לגוון כך שרק חלק מהפינות יהיו מעוגלות או שחלק מהפינות יהיו מעוגלות יותר מאחרות. לצורך כך, נוכל לפרק את תכונת 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 פינות מעוגלות במידה שונה

 

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

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

border-radius: 50px 10px;

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

 

פינות מעוגלות באופן זהה הודות לסימטריה CSS3

 

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

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

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

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

 

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

 

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

border-radius: 100px 20px;

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

 

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

 

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

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

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

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

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

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

 

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

 

יותר מכך, ניתן לתת ערכים שונים לציר האנכי והאופקי של 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;

כך זה נראה:

 

אפשר ליצור עיגולים עם CSS3

 

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

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

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

 

אפשר אפילו ליצור חצאי עיגולים באמצעות CSS3 ותכונת border-radius

 

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

 

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

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

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

border-radius: 0px 200px;

 

צורת עלה באמצעות border-radius

 

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

 

 

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

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

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך קוראים בעברית לצ`ופצ`יק של הקומקום?

 

תמונת המגיב

רובוט 1 בתאריך: 09.02.2023

לא עובד לי.יוצאת אליפסה ולא עיגול...