משתמש:יובלי א/פינות מעוגלות

עדכון לשנת 2014! מאז נכתב המאמר עברו מן הסתם הרבה מים מתחת לגשרים. פינות מעוגלות הן כבר סטנדרד קאנוני דה-פאקטו ונכנסו לתמיכה קבועה בכל הדפדפנים. מה שכתוב בהמשך הוא עדיין רלוונטי. אבל יש להשתמש בשמות הCSS המעודכנים:
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

אל תהיו "מרובעים" — עגלו פינות!^*

*למשתמשי Firefox/Mozilla בלבד!

על מה אתה מדבר?

פינות מעוגלות וסקסיות!

פינות מרובעות ומשעממות...

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

איך זה עובד?

ויקיפדיה, כמו כל אתר אינטרנט אחר מאז תחילת שנות ה-2000, משתמשת ב-CSS. CSS היא מעין שפה שכזו שאפשר בעזרתה להגדיר את הצורה הויזואלית שבה יוצג עמוד-ווב בדפדפן שלכם (note to self: כתוב ערך על CSS). היא וHTML תמיד הולכים בשו-תף (מלעיל!). אם HTML הוא התוכן, אז CSS זה איך שהוא יוצג. יש הרבה דברים שאפשר לשלוט בצורתם עם CSS, החל מהפונטים, הצבעים, המסגרות ועד לרווחים בין אותיות, שורות מילים ועוד. החבר'ה של W3C שוקדים על סטנדרטיזציה של העסק ועובדים על שידרוגים ושיפורים. כרגע הם עובדים על גירסה 3 של CSS. קיצר, אחד מהחידושים הרבים שהולכים להיות בגירסה 3 זה... -תמיכה בפינות מעוגלות-. (מה שפעם היה מצריך שימוש בארבע תמונות קטנות של פינות, כדי לגרום לו לקרות). דפדפני Firefox/Mozilla המעודכנים של היום (גירסה 2.0, נגיד) (ובכלל כל דפדפן המשתמש ברכיב התוכנה שכיום מכונה Gecko) כבר תומכים בפינות מעוגלות (אקספלורר לא. האם יש אחרים שכן?)

אם יש לכם פיירפוקס, ראו דוגמאות כלליות.

איך עושים?

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

התכונה (Property) שגורמת לקסם לקרות נקראת "border-radius". מוזילה מכיר אותה כ"moz-border-radius-" (עם כל המקפים! כולל זה שבהתחלה!) ולכן בזה אנחנו הולכים להשתמש.

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

• moz-border-radius-topright-
• moz-border-radius-topleft-
• moz-border-radius-bottomright-
• moz-border-radius-bottomleft-
• moz-border-radius-

ארבע הראשונות משמשות להגדרת כל אחת מהפינות של תיבה, בהתאמה. האחרונה, כנהוג, היא תכונה כללית שאפשר בעזרתה להגדיר את כל הפינות במכה. כל אחת מהתכונות יכולה לקבל 2 ערכים מספריים. המספרים מייצגים את הרדיוס של האליפסה (או רבע אליפסה למעשה) המגדירה את הצורה המעוגלת של הפינה. המספר הראשון הוא הרדיוס האופקי, והמספר השני הוא הרדיוס האנכי. אפשר לתת גם רק מספר אחד - ואז שני הרדיוסים יהיו שווים למספר הזה. שזה סבבה.
את האורך אפשר לתת בפיקסלים (px) או ב(em). למידע נוסף + איור ראו כאן (קישור חיצוני).
עכשיו, בכל מקום שבאו תתקעו את הסטייל הזה למשהו שיש לו מסגרת נראית - משתמשי פיירפוקס יוכלו לראות אותו ולחוות את החוויה המעוגלת במלוא עוצמתה העיגולי.

איך משנים את זה בממשק של ויקיפדיה?

ה"אנשים שלמעלה" הועילו באדיבותם לאפשר לנו (לי, לך) לערוך את קובץ ה-CSS המגדיר את המטווה של האתר. יש כמה מטווים ("Skins", "Themes", "Whatever") מוכנים שאפשר להשתמש בהם פה. כולם גרועים, חוץ מברירת-המחדל, שנקראת "Monobook". אם לא התעסקתם יותר מדי עם ההעדפות שלכם - סביר להניח שאתם בברירת המחדל. לצורך העניין, מדריך זה יוצא מנקודת הנחה שאתם ב-Monobook, כמו-כן, ההנחה היא שאתם משתמשים בפיירפוקס גירסה אחלה ומעלה.

כדי לערוך את הקובץ לכו למשתמש:שם המשתמש/monobook.css (החליפו את שם המשתמש שלכם במקום המתאים. אני חושב שגם לחיצה על הקישור הזה תחליף כבר את השם שלכם באופן אוטומטי ותוביל אתכם למקום הנכון).

הדף יהיה ריק. כאן תוכלו לערוך שינויים ל-CSS שמשפיע על המראה של ויקיפדיה. השינויים שתעשו בקובץ הזה ישפיעו על הדרך בה תיראו את ויקיפדיה, בכל פעם שתיכנסו עם שם המשתמש הרשום שלכם; הם לא ישפיעו על הדרך שבה יראו אותה כולם, לשם זה יש לערוך את הקובץ המקורי (ע"י אנשים בעלי הרשאה מתאימה). (הקובץ המקורי, אגב, נמצא פה).

הגיע הזמן לעגל פינות!

כדי לגרום לויקיפדיה להיכנס לעולם הפאי, יש צורך להוסיף לתוך הבוררים (selectors) המתאימים בהגדרות ה-CSS את שורת-הסגנון המגדירה פינות מעוגלות. ההגדרות שתערכו בקובץ הזה, יהיו בנוסף לאלה המוגדרות בקובץ המקורי, הן לא יבטלו אותן (אלא אם כן, "תידרסו" אותן כאן באופן מפורש).

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

אגב, 1em שווה לרוחב של האות M בפונט הנוכחי.

כללי

מסגרת התוכן הראשי

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

• גודל מומלץ: 0.4em
• מה להעתיק לתוך הקובץ:

#content {
    -moz-border-radius-topleft:0.4em;
    -moz-border-radius-topright:0.4em;
    -moz-border-radius-bottomright:0.4em;
}

מלא

לשוניות (tabs)

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

• גודל מומלץ: 0.7em
• מה להעתיק לתוך הקובץ:

#p-cactions ul li, #p-cactions ul li a {  
  -moz-border-radius-topleft: 0.7em;
  -moz-border-radius-topright: 0.7em;
}

תיבות הצד

התיבות שבצד ימין. מתחת ללוגו; "ניווט", "קהילה", "חיפוש", "תיבת כלים" וכו'

• גודל מומלץ: 7px
• מה להעתיק לתוך הקובץ:

div.pBody {
    -moz-border-radius:7px;
}

תיבה תחתית ("Footer")

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

• גודל מומלץ: 0.3em
• מה להעתיק לתוך הקובץ:

#footer {
    -moz-border-radius:0.3em;
}

ערכים

Thumbnails

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

• גודל מומלץ: 0.6em
• מה להעתיק לתוך הקובץ:

div.thumbinner {
    -moz-border-radius:0.6em;
}

תוכן עניינים

• גודל מומלץ: 8px
• מה להעתיק לתוך הקובץ:

#toc {
    -moz-border-radius:8px;
}

תיבת קטגוריות

זו שמוצגת בתחתית ערך ומציגה את הקטגוריות אליו הוא שייך.

• גודל מומלץ: 8px
• מה להעתיק לתוך הקובץ:

#catlinks {
    -moz-border-radius:8px;
}

העמוד הראשי

כל התיבות שבצד שמאל

"ערך מומלץ", "הידעת?", "היום בהסטוריה" וכו'

• גודל מומלץ: 9px
• מה להעתיק לתוך הקובץ:

table[align="left"][cellspacing="6"] td {
    -moz-border-radius:9px;
}

תבניות

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

דברים שלא הצלחתי לעגל

המסגרות הראשיות בעמודים: "ברוכים הבאים", "ערכים מומלצים, "פורטלים" ו-"עזרה".
קשור אולי לעובדה שזה לא עובד במסגרות עם "border-collapse:collapse"...

הכול ביחד (קוד)

/* Main content frame */
#content {
    -moz-border-radius-topleft:0.4em;
    -moz-border-radius-topright:0.4em;
    -moz-border-radius-bottomright:0.4em;
}

/* Upper tabs */
#p-cactions ul li, #p-cactions ul li a {  
  -moz-border-radius-topleft: 0.7em;
  -moz-border-radius-topright: 0.7em;
}

/* Side-Bar */
div.pBody {
    -moz-border-radius:7px;
}

/* Footer */
#footer {
    -moz-border-radius:0.3em;
}

/* Thumbnails */
div.thumbinner {
    -moz-border-radius:0.6em;
}

/* Table of Contents */
#toc {
    -moz-border-radius:8px;
}

/* "Categories" box */
#catlinks {
    -moz-border-radius:8px;
}

/* Left boxes on main page */
table[align="left"][cellspacing="6"] td {
    -moz-border-radius:9px;
}

דוגמאות כלליות ליצירת פינות מעוגלות

פינה שמאלית עליונה מעוגלת

קוד:

<span style="border:1px solid #909090; -moz-border-radius-topleft:7px;">טקסט בתוך המסגרת</span>

פינה ימנית עליונה מעוגלת

פינה שמאלית מעוגלת

פינה ימנית תחתונה מעוגלת

כל הפינות מעוגלות

לתכל'סיונרים

סיכום המאמר

בגירסה הבאה של CSS תתווסף תמיכה ב"פינות מעוגלות". דפדפני Firefox המעודכנים של היום כבר תומכים באופצייה זו. ניתן ליצור מסגרות, תיבות ואלמנטים אחרים עם פינות מעוגלות הניתנות לצפייה עם פיירפוקס (בכלל, ובוויקיפדיה בפרט). כמו-כן אפשר לשנות את הצורה הנוכחית של הממשק של וויקיפדיה ולגרום לכך שכל המסגרות, התיבות והלשוניות יופיעו בו עם פינות מעוגלות. כדי לעשות זאת, מומלץ לקרוא את כל המאמר; אם אין לכםן כח, עקבו אחר השלבים הבאים:

• לכו לכאן (ודאו שנכנסתם כמשתמשים רשומים!).
• ערכו את הדף ההוא.
• העתיקו לתוכו את כל הקוד שנמצא פה ושמרו את הדף.
• כדי לראות את השינויים נקו את המטמון (cache) בדפדפן וטענו מחדש. אפשר לעשות את זה באמצעות לחיצה על Shift בזמן לחיצה על סמל ה"טען מחדש".

הערות

• ראיתי שב"שער הקהילה" כבר יישמו פינות מעוגלות גם-ככה. יפה! (:
• כדי לראות את השינויים נקו את המטמון (cache) בדפדפן וטענו מחדש. אפשר לעשות את זה באמצעות לחיצה על Shift בזמן לחיצה על סמל ה"טען מחדש".

ראו גם

• על הגדרת פינות מעוגלות באתר Meta-Wiki של WikiMedia