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

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

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

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

הקוד ב HTML

הקוד ב CSS

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

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

דוגמא להעמסת background-image

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

לחץ לראות דוגמא של קטע הקוד

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

דוגמא:

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

דוגמא:

איזה עוד העמסות קיימות ?

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

1. Shadow - צל לאלמנט

2. text-shadow – צל לטקסט

3. transition and transform – הם היחידים שעובדים קצת אחרת, ובמקום פסיקים יש לעבוד עם רווחים.

4. animation – מאפשר להכיל 2 אנימציות לאלמנט אחד.

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

זהוא! מקווה שנהניתם, ואשמח שתטקבקו
נכתב ע”י: אלעד שכטר
על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט 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="">