CSS SPRITES – שימוש בתמונה אחת למספר רב של מצבים

ל-Css Sprites אפשר להתייחס כאל טרנד CSS חדש, לעומת זאת, מדובר באלמנט נהדר שחוסך בזמני טעינה וביצירת אימאג’ים מרובים.אז על מה המהומה? מדובר בשימוש באימאג’ אחד המחולק בתוכו לאימאג’ים רבים על מנת להציג מספר רב של מצבים, בד”כ של תפריט ניווט.מבולבלים? על מנת להמחיש את הרעיון אפשר לגשת לאתר של חברת Apple ולשים לב לדבר הבא:

דוגמא זו מציגה את תפריט הניווט עם מצב Hover (באתר יש מצבים נוספים)

מניחים את העכבר על התפריט ובקליק ימני נציג את ה – Background Image

דוגמא זו ממחישה שלא מדובר באימאג’ במצב אחד אלא באימאג’ אחד גדול, מחולק, שמכיל את כל מצבי הכפתורים כחתיכה אחת.

בעזרת CSS ניתן בכל מצב של הכפתור פשוט להזיז את האימאג’ הגדול ולחשוף רק את המצב הנחוץ באירועי עכבר שונים.

היתרון: במקום לשמור המון אימאג’ים קטנים(במקרה של Apple למשל 28 ) שומרים אימאג’ אחד ובכך חוסכים ב – Http Request ולמעשה משיגים טעינה של תמונה אחת ל – Cache ובכך טעינה מהירה יותר של האלמנטים.

אז איך עושים? מאוד פשוט:

1. ניגש לתוכנה גרפית על מנת ליצור את כל מצבי הכפתור (פוטושופ או פיירוורקס וכו..) חשוב לעבוד בצורה מאוד מדוייקת, “על הפיקסל” על מנת שיהיה נוח עם המיקומים אח”כ.
   
2. שלב הבא הוא לחתוך רק את האימאג’ בעזרת Crop
   
3. יוצרים דף HTML ודף CSS – במקרה שלנו אנחנו נתרכז יותר ביצירת Menu כרשימת UL עם Float Right* שימו לב לגודל האימאג’ הכולל ולכל אימאג’ קטן, זה מאוד יעזור בתהליך של המיקומים ב-CSS. בדוגמה שלנו גודל האימאג’ הקטן הוא 100 פיקסל רוחב על 24 פיקסל אורך
4. להלן קוד ה – CSS:

   #nav{

   font-family: Arial, Helvetica, sans-serif;

   width: 416px;

   margin-top: 0px;

   margin-right: auto;

   margin-bottom: 0px;

   margin-left: auto;

   }

   #nav ul {

   font-family: Arial, Helvetica, sans-serif;

   list-style-type: none;

   margin: 0px;

   padding: 0px;

   }

   #nav ul li {

   font-family: Arial, Helvetica, sans-serif;

   margin: 0px;

   padding: 0px;

   float: right;

   }

   #nav ul li a {

   line-height: 24px;

   width: 100px;

   display: block;

   text-align: center;

   text-decoration: none;

   color: #FFFFFF;

   margin-right: 2px;

   margin-left: 2px;

   font-size: 12px;

   }

   /*SPRITES Classes*/

   /*First Button*/

   #nav ul li a.b1 {

   background-image: url(images/menu1.jpg);

   background-repeat: no-repeat;

   }

   #nav ul li a.b1:hover {

   background-image: url(images/menu1.jpg);

   background-repeat: no-repeat;

   background-position: 0px -24px;

   }

   /*Second Button*/

   #nav ul li a.b2 {

   background-image: url(images/menu1.jpg);

   background-repeat: no-repeat;

   }

   #nav ul li a.b2:hover {

   background-image: url(images/menu1.jpg);

   background-repeat: no-repeat;

   background-position: -100px -24px;

   }

   /*Third Button*/

   #nav ul li a.b3 {

   background-image: url(images/menu1.jpg);

   background-repeat: no-repeat;

   }

   #nav ul li a.b3:hover {

   background-image: url(images/menu1.jpg);

   background-repeat: no-repeat;

   background-position: -200px -24px;

   }

   /*Fourth Button*/

   #nav ul li a.b4 {

   background-image: url(images/menu1.jpg);

   background-repeat: no-repeat;

   }

   #nav ul li a.b4:hover {

   background-image: url(images/menu1.jpg);

   background-repeat: no-repeat;

   background-position: -300px -24px;

   }

דמו | הורדה