CSS3: פינות מעוגלות ומה שבינהם

שלום לכם,

מי לא מכיר היום את הפינות המעוגלות שקיימות ב- css3 , הלא הם: border-radius כמאפיין ב- css3.

פעם (אני מרגיש זקן) לבנות פינות מעוגלות היה צורך מאמצים וחבלי לידה קשים בדף html, אך כיום אם התפתחות ה- css בכלל ו-css3  בפרט ניתן ליצור בקלות את אותם פינות מעוגלות.

אני רוצה קצת לחדש/לרענן דברים לגבי המאפיין border-raduis.

1. איך ממשים את זה בפשטות:

#example1 {
-moz-border-radius: 15px; // עבור פיירפוקס
border-radius: 15px; // שאר הדפדפנים
}

2. התבנית של border-radius:

border-*-*-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

הסבר (משמאל לימין):

א. 2 כוכביות, עבור איזה צד  בצורהלבצע את עיגול הפינה לדוגמא: border-bottom-right-radius,border-top-right-radius, border-bottom-left-radius

ב.  length – גודל של "עיגול הקודקוד", ב- PX או באחוזים.

ג. 1,4 – שמאל עליון, ימין עליון, ימין תחתון, שמאל תחתון – בצורה אופקית.

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

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

Example1:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; (אנכית אופקי)

border-radius: 5px; (אופקי ואנכי לכל הצדדים)

border-radius: 5px 10px / 10px;

Example2:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

border-radius-diagram-1

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

4. דוגמאות בלייב: http://jsbin.com/uyecol/2/

שימו לב: יש גם את הנושא של browser compatability שניתן לבדוק כאן:

http://caniuse.com/

שיהיה שבת שלום, וסופ"ש רגוע.

*אשמח לתגובות

מודעות פרסומת
מאת chenreuven פורסם ב-CSS

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s