الشخصيات في CSS

صورة السبرايت

صورة السبرايت هي مجموعة من الصور تحتويها صورة واحدة.

قد تحتاج صفحات تحتوي على العديد من الصور إلى وقت طويل للتحميل، وسيتم توليد العديد من طلبات الخادم.

استخدام صورة السبرايت يقلل من عدد طلبات الخادم ويوفر نطاق الباندWITH.

صورة السبرايت - مثال بسيط

نستخدم صورة واحدة فقط ("navsprites.gif") بدلاً من استخدام ثلاث صور منفصلة:

صورة التوجيه

من خلال استخدام CSS، يمكننا عرض جزء من الصورة المطلوب فقط.

في المثال التالي، يتم تحديد جزء الصورة التي يتم عرض "navsprites.gif" من قبل CSS:

مثال

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

جرب بنفسك

توضيح المثال:

  • <img id="home" src="trans.gif"> - يتم تعيين صورة شفافة صغيرة فقط، لأن خصائص src لا يمكن أن تكون فارغة. الصورة التي سيتم عرضها هي الصورة التي تم تحديدها في CSS.
  • width: 46px; height: 44px; - يتم تعيين الجزء من الصورة الذي نستخدمه
  • background: url(navsprites.gif) 0 0; - يتم تعيين صورة الخلفية وموقعها (left 0px, top 0px)

صورة السبرايت - إنشاء قائمة التوجيه

نأمل في استخدام صورة السبرايت ("navsprites.gif") لإنشاء قائمة التوجيه.

سنستخدم قائمة HTML لأنها يمكن أن تكون روابط، كما تدعم الصور الخلفية:

مثال

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

جرب بنفسك

توضيح المثال:

  • #navlist {position:relative;} - الوضع المطلق يتم تعيينه كمنفصل، مما يسمح بالتحديد النسبي
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - sets margin and padding to 0, removes list-style, and all list items are absolute positioning
  • #navlist li, #navlist a {height:44px;display:block;} - all images have a height of 44px

Now, start setting the positioning and styles for each specific section:

  • #home {left:0px;width:46px;} - positions to the left all the time, image width 46px
  • #home {background:url(navsprites.gif) 0 0;} - defines the background image and its position (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - positions to the right 63px (#home width 46px + some extra space between items), width 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - defines the background image to the right 47px (#home width 46px + 1px separator)
  • #next {left:129px;width:43px;} - positions to the right 129px (#prev start is 63px + #prev width is 43px + extra space), width 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - defines the background image to the right 91px (#home width 46px + 1px separator + #prev width 43px + 1px separator)

sprite image - hover effect

الآن، سنضيف تأثير التحرك بالماوس إلى قائمة التوجيه.

نصيحة::hover selector can be used for all elements, not just links.

صورنا الجديدة ("navsprites_hover.gif") تحتوي على ثلاثة صور توجيهية وثلاثة صور للاشارة إلى تأثير التحرك بالماوس:

صورة التوجيه

لأن هذا رسم، وليس ستة ملفات منفردة، لذا عندما يضع المستخدم الفأرة فوق الصورة،لن يكون هناك تأخير في التحميل.

نحن نضيف فقط ثلاثة سطور من الكود لإضافة تأثير التحرك بالماوس:

مثال

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

جرب بنفسك

توضيح المثال:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - نحدد نفس موقع الخلفية لجميع ثلاثة الصور المعلقة، فقط ننزل 45 بكسل