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

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

 

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

 

= 3 + 2