صور CSS العفاريت
صورة العفاريت
كائن الصورة هو مجموعة من الصور موضوعة في صورة واحدة.
يمكن أن تستغرق صفحة الويب التي تحتوي على العديد من الصور وقتًا طويلاً للتحميل وتقوم بإنشاء طلبات خادم متعددة.
سيؤدي استخدام الصور المتحركة إلى تقليل عدد طلبات الخادم وتوفير النطاق الترددي.
صورة نقوش متحركة - مثال بسيط
بدلاً من استخدام ثلاث صور منفصلة ، نستخدم هذه الصورة المنفردة ("img_navsprites.gif"):
باستخدام CSS ، يمكننا إظهار الجزء الذي نحتاجه فقط من الصورة.
في المثال التالي ، تحدد CSS أي جزء من صورة "img_navsprites.gif" يجب إظهاره:
مثال
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
شرح المثال:
<img id="home" src="img_trans.gif">- يعرّف فقط صورة شفافة صغيرة لأن السمة src لا يمكن أن تكون فارغة. ستكون الصورة المعروضة هي صورة الخلفية التي نحددها في CSSwidth: 46px; height: 44px;- يحدد جزء الصورة الذي نريد استخدامهbackground: url(img_navsprites.gif) 0 0;- يحدد صورة الخلفية وموضعها (اليسار 0 بكسل ، أعلى 0 بكسل)
هذه هي أسهل طريقة لاستخدام الصور المتحركة ، والآن نريد توسيعها باستخدام الروابط وتأثيرات التمرير.
Image Sprites - إنشاء قائمة تنقل
نريد استخدام صورة الرموز المتحركة ("img_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: نسبي ؛} - يتم تعيين الموضع على نسبي للسماح بتحديد موضع مطلق بداخله
- #navlist li {margin: 0؛ padding: 0؛ list-style: none؛ position: absolute؛ top: 0؛} - تم ضبط الهامش والحشو على 0 ، وإزالة نمط القائمة ، وجميع عناصر القائمة في مواضع مطلقة
- #navlist li، #navlist a {height: 44px؛ display: block؛} - ارتفاع كل الصور 44 بكسل
ابدأ الآن في تحديد الموضع والأسلوب لكل جزء محدد:
- #home {left: 0px؛ width: 46px؛} - تم وضعه على طول الطريق إلى اليسار ، وعرض الصورة 46 بكسل
- #home {background: url (img_navsprites.gif) 0 0؛} - يحدد صورة الخلفية وموضعها (يسار 0 بكسل ، أعلى 0 بكسل)
- #prev {left: 63px؛ width: 43px؛} - تم وضعه 63 بكسل إلى اليمين (# عرض المنزل 46 بكسل + بعض المسافة الإضافية بين العناصر) ، والعرض 43 بكسل.
- #prev {background: url ('img_navsprites.gif') -47px 0؛} - يحدد صورة الخلفية 47 بكسل جهة اليمين (# عرض المنزل 46 بكسل + 1 بكسل مقسم خط)
- #next {left: 129px؛ width: 43px؛} - تم وضعه 129 بكسل إلى اليمين (بداية #prev هي 63 بكسل + # عرض مقدمة 43 بكسل + مساحة إضافية) ، والعرض 43 بكسل.
- #next {background: url ('img_navsprites.gif') -91px 0 ؛} - يحدد صورة الخلفية 91 بكسل إلى اليمين (# عرض المنزل 46 بكسل + 1 بكسل مقسم خط + # عرض العرض 43 بكسل + 1 بكسل مقسم خط)
صورة العفاريت - تأثير التحويم
الآن نريد إضافة تأثير التمرير إلى قائمة التنقل الخاصة بنا.
نصيحة: يمكن :hoverاستخدام المحدِّد في جميع العناصر ، وليس على الروابط فقط.
تحتوي صورتنا الجديدة ("img_navsprites_hover.gif") على ثلاث صور تنقل وثلاث صور لاستخدامها في تأثيرات التمرير:
نظرًا لأن هذه صورة واحدة وليست ستة ملفات منفصلة ، فلن يكون هناك تأخير في التحميل عندما يحوم المستخدم فوق الصورة.
نضيف فقط ثلاثة أسطر من التعليمات البرمجية لإضافة تأثير التمرير:
مثال
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
شرح المثال:
- #home a: hover {background: url ('img_navsprites_hover.gif') 0 -45px؛} - بالنسبة إلى جميع صور التمرير الثلاث نحدد نفس موضع الخلفية ، 45 بكسل فقط لأسفل