CSS Sprites

CSS sprites משמשים כשרוצים להציג תמונות שונות לאותו אלמנט, ולחסוך בצורה משמעותית במספר הקריאות לשרת. ב-CSS Sprites ניתן לפגוש בכל מקום באינטרנט. לדוגמה: כשרוצים שהרקע לכפתורים באתר יתחלף בריחוף או בלחיצה, או כשרוצים לשנות מראה או צבע של חיצים. בוא נראה את הדוגמה הפשוטה הבאה. כדי לראות את האפקט נרחף מעל לתיבה הכחולה באמצעות העכבר.

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

הקוד שאפשר זאת הוא הקוד הבא. בוא נתחיל מהמצב שרק חלקה העליון של התמונה מוצג:

#image_sprite_1{
  background: url(images/tags.png) no-repeat;
  background-position:0px 0px;
  height: 87px;
  width: 188px;
}

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

#image_sprite_1:hover{
  background-position:0px -91px;
}

הסוד הוא בשימוש בתכונת ה-background position ביחד עם הגדרת הרוחב והגובה (width ו-width .(height ו-height מגדירים את ממדיה של התמונה. ראו את המסגרת הירוקה והאדומה בתמונה למטה. background position מגדיר את המיקום ממנו צריך לקחת את התמונה, כשנקודת הייחוס (0, 0) היא הפינה השמאלית העליונה. הערך השמאלי מציין את המיקום על ציר ה-X, והערך הימני הוא המיקום על ציר ה-Y. במקרה זה, התמונה הכחולה מתחילה בנקודה 0 0 , והתמונה הכתומה מתחילה 91 פיקסלים למטה ממנה, ולכן השינוי הוא בציר ה-y בלבד.

דוגמה נוספת לCSS Sprites

.בוא נראה דוגמה טיפה יותר מורכבת. הפעם עם חיצים. כשתעברו על החיצים תראו אותם מחליפים את צבעם:

אז איך עושים את הדבר המועיל הזה? התחלתי מציור של 4 חיצים בצבעים שונים, כפי שניתן לראות בתמונה המצורפת: 

והשתמשתי בקוד הבא:

#up_arrow{
   background: url(images/arrows_sprites.png) no-repeat -43px 0;
   height: 35px;
   width: 40px;
}

#up_arrow:hover{
    background-position: -43px -36px;
}

#down_arrow{
  background: url(images/arrows_sprites.png) no-repeat 0 0;
  height: 35px;
  width: 40px; 
  margin-top: 10px;
}

#down_arrow:hover{
  background-position: 0 -36px;
}

הרוחב והגובה מוגדרים על ידי width ו-height. נקודת הייחוס (0,0) נמצאת בפינה השמאלית העליונה. השורה הראשונה מתייחסת לחץ הכתום שמצביע למעלה, שממוקם 43 פיקסלים מימין לנקודת הייחוס ולכן background-repeat: -43px 0px. השורה השנייה מתייחסת לחץ הכחול שפונה למעלה, והוא ממוקם 36 פיקסלים למטה ובהתאם background-position: -43px -36px. בשורה השלישית והרביעית, החיצים שפונים למטה. שניהם מתחילים בקואורדינטה 0 של ציר ה-x, והחץ הכחול כלפי מטה ממוקם 36 פיקסלים מתחת לכתום.

עד כמה CSS Sprites שימושיים?

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

הטכניקה משמשת כמעט בכל אתר אינטרנט, ומכיוון שמדובר בטכניקה מימי CSS2 היא תואמת לכל הדפדפנים: Chrome, Firefox, Internet Explorer ו-Safari.

ברשת האינטרנט קיימים CSS sprites generators חינמיים שמקלים מאוד על יצירת sprites בשביל הפרויקט שלכם. אני מאוד אוהב להשתמש בשירות הבא CSS sprites generator by TopTal.

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים