פסאודו אלמנט before & after והעצמה שחבויה בהם!

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

במידה ואינכם מכירים/יודעים מהו פסאודו קלאס/Pseudo-classes, אתם מוזמנים לקרוא את המאמר – הכל על פסאודו Pseudo Class\Element ב CSS.

אז בואו נתחיל!


הקדמה (ההקדמה היא למי שלא מכיר מהם פסאודו אלמנט before & after, מי שמכיר יכול לדלג על ההקדמה…. ).
הפסאודו אלמנט before ו after, מאפשרים להכניס תוכן/אלמנט או בתחילה או בסוף האלמנט שאליו הם משויכים.

נגיד ויש לי תגית div עם התוכן “משה” בתוכה, שמייצגת לי כביכול את שם המשתמש באתר. ואני רוצה להוסיף תוכן באופן קבוע לפניו ואחריו טקסט כלשהו. לדוגמא אני רוצה שיופיע “שלום, משה !”, בצורה מאוד פשוטה אני יוכל לבצע את זה בעזרת פסאודו אלמנט before & after שמאפשר לנו הוספת תוכן, וזה ע”י השימוש ב property מסוג content, שתפקידו להכיל תוכן טקסטואלי שיופיע לפני/אחרי בהתאם להגדרה שנשים.

syntax
קוד HTML


 

קוד CSS

 

זהוא’ יצרנו מימוש לפסאודו אלמנט before  ו after.
שתי דברים שחשוב לציין:
1. שבמידה ונרצה להשתמש בפסאודו אלמנט מהסוג הזה, לדברים אחרים שהם לא תוכן טקסטואלי, עדיין כדי שהם יעבדו נהייה חייבים להכניס תוכן, אפילו תוכן ריק.
2. האלמנטים הדמיוניים ברמה הטכנית נמצאים בתוך האלמנט שאליו אנחנו שמים אותו, ולא בחוץ, חשוב להבין את זה, כי כל הטריקים שכתובים פה בנויים למעשה על העיקרון הזה, ראה איור :
before-after-pseudo-css-example
סיימנו את ההקדמה אז בואו נתחיל להשתולל!

מימושים מתקדמים

breadrumbs 
כאשר אנו יוצרים breadcrumbs, יש לנו תמיד צורך במפרידים, אנחנו צריכים מפריד בין כל אייטם ואייטם, הדרך לעשות את זה ע”י שימוש בפסאודו before, שעליו נכיל את ערך “<“, בעזרת ה property מסוג content.
syntax
קוד HTML

 

  

קוד CSS

 

 
טוב יש לנו בעיה! קיים בהתחלה מפריד מיותר. הדרך להיפתר ממנו, היא ע”י שימוש בפסאודו קלאס מסוג first-child (נתמך החל מאקספלורר 7)
אז אנחנו נוסיף ל CSS שלנו את השורה הבאה, שתאפס לנו אל האלמנט הראשון עם הסימן המיותר.
syntax
קוד CSS

 

זהו עכשיו הקוד שלנו עובד כמו שצריך !

אפשרות אמיתית של ריבוי תמונות רקע לאלמנט אחד קיימת טכנית רק מCSS3 (מאמר בנושא: העמסות ב CSS3). אך ע”י שימוש בפסאודו before & after, אנחנו כביכול מייצרים לנו עוד שני אלמנטים דמיוניים בתוך האלמנט שלנו, מה שמאפשר לנו עד 3 תמונות רקע לאלמנט אחד! (האלמנט עצמו + האלמנט עם before + אלמנט עם after)
איך זה עובד?
אנחנו מתייחסים לאלמנטים הדמיוניים שלנו before & after כאילו והיו נוכחיים בתוך האלמנט שלנו.
סדר השכבות (כדי שיעבוד נורמלי באקספלורר 8, אצל האחרים אפשר לשחק עם z-index),שכבה ראשונה הוא האלמנט האמיתי שכתוב בקוד הHTML שלנו. השכבה השנייה אשר תופיע מעליו, היא האלמנט עם פסאודו before. והאחרון חביב  השכבה השלישית שתופיע מעל כולם היא האלמנט עם פסאודו after.
סדר פעולות
1. אז בואו ניצור את “שלושת האלמנטים הדימיוניים” שלנו
syntax 
קוד HTML

קוד CSS

 

כל אחד מ”האלמנטים” יוכל לקבל תמונת רקע.
2. נמקם את האלמנטים הדמיוניים מעל האלמנט האמיתי. ניתן לאלמנט הראשי נפח. ובנוסף ניתן לאלמנטים הדמיוניים property מסוג content עם ערך ריק, על מנת שיופיעו.
syntax
קוד CSS

 

3. הזנת  תמונות הרקע לכל אחת מהאפשריות.
syntax
קוד CSS

 

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

יצירת בועית  popup מועצבת

נפוץ להשתמש באינטרנט בבועיות עם חץ. אני ידגים לכם, איך ליצור בועית מועצבת עם חץ ללא צורך בשימוש עם תמונות( מאוד פשוט לביצוע).
סדר פעולות
1. ניצור אלמנט מלבני עם נפח וצבע רקע אפור, נוסיף לו position:relative, במטרה להשפיע על המיקום היחסי של האלמנט החץ הדמיוני שעוד מעט ניצור(וככה נוכל אחר כך למקמו ביחס למלבן שיצרנו).
syntax – יצירת המלבן של הפופאפ
קוד HTML

קוד CSS

 

2. יצירת אלמנט החץ ומיקומו ביחס למלבן

יצירת המשולש -ישנו טריק ליצירת משולשים, הטריק אומר שאנחנו יוצרים אלמנט ללא רוחב וללא גובה, בנוסף נותנים לאלמנט border בעובי של כמה פיקסלים שהו יהווה את נפח המשולש שלנו. עכשיו פה השוס, אנחנו צובעים רק צלע אחת של ה border, מה שיאלץ את הדפדפן ליצור משולש, כי לאלמנט שלנו אין נפח.
מיקום האלמנט – ביחס לאלמנט אבא (absolute inside relative).
syntax
קוד CSS

 

טוב קיבלנו את הפופאפ שרצינו!

בעזרת CSS3, ניתן לעגל את הפינות ולהוסיף צל שיראה קצת יותר רציני
לסיכום: כמות האופציות של הדברים שניתן לעשות עם פסאודו אלמנט before & after, היא אינסופית. ניתן לעשות איתם המון דברים שחלקם אפילו מוגזמים, לדוגמת מפתח שהכין 84 אייקונים שונים בעזרתם.
חשוב לציין שלמרות שבאקספלורר 7 קיימת תמיכה ב before & after, התמיכה אינה מלאה, והדברים המצוינים במאמר נתמכים רק מאקספלורר 8!
בנוסף אני מצרף לכם לינקים למאמרים קשורים למאמר הזה:
1.מאמרים קשורים :
על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
  • כתיבת תגובה

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">