20 בספט׳ 2012

העמסות ב CSS3, כל כך פשוט ואף אחד לא מכיר!

CSS3 Overloads

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

כיצד כותבים העמסות בCSS3 ? 

בוא נייצר div אלמנט עם class בשם  box, ניתן לו כמה style שיתנו לו נפח, ולאלמנט ניתן תמונת רקע.


הקוד ב HTML
<div class="box"></div>
הקוד ב CSS
.box{
      width:100px; height:100px; margin:50px auto;
       background-image: url(images/logos/image1.gif);
       background-repeat: no-repeat;
       background-position: center center;           
}

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

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

דוגמא להעמסת background-image
.box{
      width:100px; height:100px; margin:50px auto;
       background-image: url(images/logos/image1.gif), url(images/logos/image2.gif);
       background-repeat: no-repeat;
       background-position: center center;           
}

מה קיבלנו - קיבלנו אלמנט שיש לו רקע של שתי תמונות אחת על השניה, שניהם ממורכזות ובלי repeat.


מה עוד חשוב לדעת בעמסות של תמונות רקע - בדוגמא שעשיתי, בוצעה העמסה רק על תמונת הרקע עצמה, וניתן לעשות העמסות גם על האפשריות האחרות של התמונה כגון background-repeat, background-position.
דוגמא לכך
.box{
      width:100px; height:100px; margin:50px auto;
       background-image: url(images/logos/image1.gif), url(images/logos/image2.gif);
       background-repeat: no-repeat, repeat;
       background-position: center center, bottom center;           
}

מה שבעצם עשיתי, הגדרתי שהתמונה הראשונה בהעמסה לא תקבל background repeat, בעוד שהתמונה השניה כן מקבלת, וכך גם לגבי המיקום, לכל אחת מהתמונות נתתי מיקום אחר ברקע של האלמנט.
בנוסף ניתן גם לשרשר את ה style של background בצורה רגילה ולא בנפרד, שני הצורות עובדות אותו הדבר.
לדוגמא
.box{
      width:100px; height:100px; margin:50px auto;
       background: url(images/logos/image1.gif) no-repeat center center,
                             url(images/logos/image2.gif)  repeat bottom center;        
}


איזה עוד העמסות קיימות ?
העמסות קימות בעוד כמה דברים שפרט לתמונות הרקע כל השאר הם אלמנטים חדשים ב CSS3, אז הנה ריכוז של העמסות נוספות שקיימות. (מצורפת דוגמא עובדת בסוף, שמרכזת את כולם).
1. Shadow - צל לאלמט
box-shadow
     0 0 6px 6px yellow,
     0 0 6px 12px green,
      0 0 6px 18px red;  

2.  text-shadow - צל לטקסט
text-shadow:
             2px 1px 1px yellow,
             2px 1px 1px red,
             3px 1px 1px green;


3. transition and transform - הם היחדים שעובדים קצת אחרת, ובמקום פסיקים יש לעבוד עם רווחים.
        .box3{
            background-color:Red;
            transform: rotate(7.5deg) scale(0.5);
            transition: rotate scale;
            transition-duration:0.9s;            
        }
        .box3:hover{
            transform: rotate(30deg) scale(1);
        }

4. animation - מאפשר להכיל 2 אנימציות לאלמנט אחד.
       animation
              seezer  300ms,
              move 12m;


5. בנוסף קיים טריק של multiple borders, בעזרת box-shadow (חשוב לציין שזה לא מתפקד כ border, היות והוא לא חלק מה box model) - הטריק עובד על העיקרון שניתן להעמיס עיצובים ל shadow, ואני לא חייב לתת spread ל shadow, וע"י כך אני יכול לקבוע shadow ראשון נגיד שיתפוס 6 פיקסלים,לשני אני יתן כפול 12 פיקסלים, ולשלישי אני יתן כבר 18 פיקסלים. הראשון עולה על השני, והשני עולה על השלישי, מה שיוצר לנו אשליה של border עם שלוש צבעים שכל אחד טופס 6 פיקסלים רוחב 



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

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