טיפ CSS: איך יוצרים תיבת מידע במאמר

18 ביולי 2011

tags: , , ,
no comments


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


תיבת מידע באתר CSS


כמה דברים שיש לשים לב בתיבה הנ”ל:



  • צבע רקע שונה מצבע הרקע של האתר, אך משאיר מספיק מקום לטקסט להופיע עליו באופן ברור.

  • מסגרת בצבע טיפה יותר כהה מצבע הרקע של התיבה עצמה

  • אייקון קטן המסמל את המסר: מידע (Information), אזהרה, שגיאה, חשוב! או כל מסר אחר שאנשים מכירים.

  • הטקסט מרוחק מתחילת התיבה כדי להשאיר מקום לאייקון.

בואו נבנה את זה שלב אחרי שלב:


נתחיל מעמוד HTML עם 3 פסקאות (השתמשתי בטקסט סמתי מתוך האתר Lorem Ipsum).


<!DOCTYPE html>
<
html
>
<
head>
  <title>Article</title
>
</
head
>
<
body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
    odio, tempor id molestie id, vulputate mollis felis. In laoreet
    tortor, ac volutpat dolor congue vitae. Nunc a elit a libero
    sollicitudin. Aliquam ut nisl at est pharetra aliquam.
 
</p>
  <p>
    Mauris vestibulum congue odio non auctor. Nunc ut ipsum a lorem
    ultricies. Integer fringilla, quam a sagittis sollicitudin, magna
    auctor mauris, sit amet sollicitudin augue eros nec tortor.
 
</p>
  <p>
    Mauris vel felis id orci suscipit posuere. Fusce venenatis feugiat
    a scelerisque. Sed lacinia lacus vitae nisi tempus vel viverra ante.
    Pellentesque habitant morbi tristique senectus et netus et malesuada
    ac turpis egestas. Mauris et libero vehicula purus vulputate.
 
</p
>
</
body
>
</
html
>



שבהצגתו בדפדפן נראה כצפוי, כך:


תיבת מידע באתר CSS


הגדרת התיבה – צבע רקע ומסגרת


נניח נרצה שפסקה מספר 2 תשמש בתור ההודעה החשובה שאנחנו רוצים להדגיש. נגדיר לה סגנון עיצובי מסוג note שאליו נוסיף את הגדרות העיצוב ב- CSS.


<p class="note">
  Mauris vestibulum congue odio non auctor. Nunc ut ipsum a lorem
  ultricies. Integer fringilla, quam a sagittis sollicitudin, magna
  auctor mauris, sit amet sollicitudin augue eros nec tortor.
</p
>


נגדיר את הגדרת העיצוב note, עם צבע רקע, מסגרת וריווח מתאים:


.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
}


אם נציג עכשיו את הדף בדפדפן, נקבל את התוצאה הבאה:


תיבת מידע באתר CSS


הוספת האייקון וסידור הטקסט בהתאם


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


.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
    background-image: url("Images/info.gif");
}


ונקבל תוצאה שלא רצינו לקבל:


תיבת מידע באתר CSS


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


.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
    background-image: url("Images/info.gif");
    background-repeat: no-repeat;
}


ונקבל את התוצאה:


תיבת מידע באתר CSS


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


תיבת מידע באתר CSS


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


.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
    background-image: url("Images/info.gif");
    background-repeat: no-repeat;
    background-position:0.2em 0.5em;
}


והתוצאה:


תיבת מידע באתר CSS


הדבר האחרון שנשאר הוא הזזת הטקסט, כדי שלא יסתיר את האייקון, ואת זה נעשה ע”י padding לפי גודל האייקון.


.note
{
    border: 1px dotted #6cc;
    background-color: rgb(238, 255, 255);
    padding: 0.5em;
    background-image: url("Images/info.gif");
    background-repeat: no-repeat;
    background-position:0.2em 0.5em;
    padding-left: 25px;
}


תיבת מידע באתר CSS


וקיבלנו בדיוק את התוצאה הרצויה!


עברית שפה קשה


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


עבור מסמך בעברית שנראה כך:


<!DOCTYPE html>
<
html
>
<
head>
  <title>מאמר</title
>
</
head
>
<
body dir="rtl">
  <p>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום
    סיט אמט, קולהע צופעט למרקוח איבן איף, ברומץ כלרשט מיחוצים. קלאצי
    אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה.
  </p>
  <p class="note">
    גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, ושבעגט.
    בראיט ולחת צורק מונחף, בגורמי מגמש. תרבנך וסתעד לכנו סתשם השמה
    מורגם בורק? לתיג ישבעס.
  </p>
  <p>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת נון
    ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס וואל
    אאוגו וסטיבולום סוליסי טידום בעליק.
  </p
>
</
body
>
</
html
>



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


.note
{
  background-image: url("Images/info.gif");
  background-repeat: no-repeat;
  border: 1px dotted #6cc;
  background-color: rgb(238, 255, 255);
  padding: 0.5em;
  background-position: 99.5% 0.5em;
  padding-right: 30px;
}


ונקבל כצפוי:


background-position בשפות RTL (עברית וערבית)


האייקון מוצג בצד שמאל והטקסט נמצא במרווח מהגבול השמאלי של הדף. נשנה את הגדרת ה- padding וה- background-position כדי לסדר את זה.


.note
{
  border: 1px dotted #6cc;
  background-color: rgb(238, 255, 255);
  padding: 0.5em;
  background-image: url("Images/info.gif");
  background-repeat: no-repeat;
  background-position: 99% 0.5em;
  padding-right: 25px;
}


בעיה: background-position בשפות RTL (עברית וערבית)


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


background-position בשפות RTL (עברית וערבית)


ועוד לטיפ הבא… בהצלחה!

Add comment
facebook linkedin twitter email