• 0

كيف أستخدم صور CSS Sprites في تصميم موقعي؟

وجدت بعض المقالات التي تقوم بشرح تصميم المواقع تنصح بعرض الأيقونات المتكررة بالموقع باستخدام ما يسمى بصور CSS Image Sprites ولكنى وجدت صعوبة في تطبيقها ، فهل من الممكن شرح ما هي وكيف يمكن استخدامها في تصميم موقعي ؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

css sprites هي تقنية تقوم على مبدأ استعمال صورة واحدة تحتوي على مجموعة من الخلفيات واستعمالها في حميع أزرار الموقع حيث يمكن تغيير خلفية الزر باستعمال خاصية background-position  في ملف التنسيق css، ويرجع الهدف من استعمال هذه التقنية إلى تسريع تحميل الموقع  والتقليل من استخدام موارد استضافة الموقع .

وهذا مثال تطبيقي :

تنسق كل زر في الموقع سيكتب على الشكل التالي :

<style>
 .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px } 
</style>

ثم حسب الزر والخلفية المراد اضهارها، من خلال الخاصية background-position:

<style>
#btn1 {background-position: -20px 0px}
#btn2 {background-position: -40px 0px}
</style>

كما يمكننا بنفس التقنية تغيير خلفية الزر عند مرور الفأرة فوقه، كمثال :

#btn1:hover {background-position: 60px 20px; }

حيث أن القيمتين ب px هي احداثايت الجزء في الصورة .

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن