6 באוק׳ 2012

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

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

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

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


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

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

syntax
קוד HTML
<div class="name">משה</div>
קוד CSS
.name:before{
      content:"שלום, ";
}
.name:after{
      content:" !";
}
זהוא' יצרנו מימוש לפסאודו אלמנט before  ו after.
שתי דברים שחשוב לציין:
1. שבמידה ונרצה להשתמש בפסאודו אלמנט מהסוג הזה, לדברים אחרים שהם לא תוכן טקסטואלי, עדיין כדי שהם יעבדו נהייה חייבים להכניס תוכן, אפילו תוכן ריק.

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

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

breadrumbs 
כאשר אנו יוצרים breadcrumbs, יש לנו תמיד צורך במפרידים, אנחנו צריכים מפריד בין כל אייטם ואייטם, הדרך לעשות את זה ע"י שימוש בפסאודו before, שעליו נכיל את ערך "<", בעזרת ה property מסוג content.
syntax
קוד HTML
<ul class="breadcrumbs">
   <li><a href="#">home page</a></li>
   <li><a href="#">inner</a></li>
   <li><a href="#">my page</a></li>
</ul>   
קוד CSS
ul,li{list-style:none; margin:0; padding:0;}

.breadcrumbs li{float:left;}
.breadcrumbs li:before{content:">"; margin:0 10px;}


טוב יש לנו בעיה! קיים בהתחלה מפריד מיותר. הדרך להיפתר ממנו, היא ע"י שימוש בפסאודו קלאס מסוג first-child (נתמך החל מאקספלורר 7)
אז אנחנו נוסיף ל CSS שלנו את השורה הבאה, שתאפס לנו אל האלמנט הראשון עם הסימן המיותר.
syntax
קוד CSS
.breadcrumbs li:first-child:before{content:""; margin:0;}

זהו עכשיו הקוד שלנו עובד כמו שצריך !
אפשרות אמיתית של ריבוי תמונות רקע לאלמנט אחד קיימת טכנית רק מCSS3 (מאמר בנושא: העמסות ב CSS3). אך ע"י שימוש בפסאודו before & after, אנחנו כביכול מייצרים לנו עוד שני אלמנטים דמיוניים בתוך האלמנט שלנו, מה שמאפשר לנו עד 3 תמונות רקע לאלמנט אחד! (האלמנט עצמו + האלמנט עם before + אלמנט עם after)

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

סדר פעולות
1. אז בואו ניצור את "שלושת האלמנטים הדימיוניים" שלנו
syntax 
קוד HTML
<div class="multi-background"></div>
קוד CSS
.multi-background{}   
.multi-background:before{    }
.multi-background:after{    }
כל אחד מ"האלמנטים" יוכל לקבל תמונת רקע.

2. נמקם את האלמנטים הדמיוניים מעל האלמנט האמיתי. ניתן לאלמנט הראשי נפח. ובנוסף ניתן לאלמנטים הדמיוניים property מסוג content עם ערך ריק, על מנת שיופיעו.
syntax
קוד CSS
    .multi-background{
      width: 200px;
      height: 200px;
      position: relative;
      z-index: 1;  /*רק לצורך הבנה באיזה שכבה תופיע התמונה*/    
    }

    .multi-background:after,
    .multi-background:before{
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       top: 0;
       content: " ";
    }
3. הזנת  תמונות הרקע לכל אחת מהאפשריות.
syntax
קוד CSS
    .multi-background{   
      background: url(image1.png) no-repeat left top;
     z-index: 1;/*רק לצורך הבנה באיזה שכבה תופיע התמונה*/    
    }
   
    .multi-background:before{
     background: url(image2.png) no-repeat center center;       
      z-index: 2;/*רק לצורך הבנה באיזה שכבה תופיע התמונה*/    
    }

    .multi-background:after{
        background: url(image3.png) no-repeat right bottom;      
      z-index: 3;  /*רק לצורך הבנה באיזה שכבה תופיע התמונה*/    
    }

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


יצירת בועית  popup מועצבת
נפוץ להשתמש באינטרנט בבועיות עם חץ. אני ידגים לכם, איך ליצור בועית מועצבת עם חץ ללא צורך בשימוש עם תמונות( מאוד פשוט לביצוע).

סדר פעולות
1. ניצור אלמנט מלבני עם נפח וצבע רקע אפור, נוסיף לו position:relative, במטרה להשפיע על המיקום היחסי של האלמנט החץ הדמיוני שעוד מעט ניצור(וככה נוכל אחר כך למקמו ביחס למלבן שיצרנו).
syntax - יצירת המלבן של הפופאפ
קוד HTML
<div class="popup"></div>
קוד CSS
.popup{
  background-color: gray;
  height: 100px; 
  width: 200px;
  position: relative;
}
2. יצירת אלמנט החץ ומיקומו ביחס למלבן 
יצירת המשולש -ישנו טריק ליצירת משולשים, הטריק אומר שאנחנו יוצרים אלמנט ללא רוחב וללא גובה, בנוסף נותנים לאלמנט border בעובי של כמה פיקסלים שהו יהווה את נפח המשולש שלנו. עכשיו פה השוס, אנחנו צובעים רק צלע אחת של ה border, מה שיאלץ את הדפדפן ליצור משולש, כי לאלמנט שלנו אין נפח.
מיקום האלמנט - ביחס לאלמנט אבא (absolute inside relative).
syntax
קוד CSS
.popup:after{
  content: " ";
  width: 0;
  height: 0;
  border :solid 10px transparent;
  border-top-color: gray;
  position: absolute;
  right: 40px;
  bottom: -20px;
  z-index: 2;
}

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

בעזרת CSS3, ניתן לעגל את הפינות ולהוסיף צל שיראה קצת יותר רציני

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

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

תודה,
אלעד שכטר