السلام عليكم ورحمة الله وبركاته
اليوم بإذن الله سنتعامل مع الصور الرمزية icons التي يتم إستخدامها في الموقع لأغراض التصميم , سنتعامل معها من خلال لغة التنسيق css .
دائماً ما نحتاج إستخدام بعض الرموز في التطبيق أو الموقع , فتوجد حلول كثيرة ولكن مطور الويب يبحث دائماً على الطرق ذات الكود الأقصر والأداء الأعلى معاً , ما سنتعرض له هنا هو عملية إستخدام رموز مجمعة في صورة واحدة من خلال التحكم في وضع البداية والنهاية لصورة الخلفية .
لدينا الصورة التالية تحتوي على رموز كل رمز له عرض 32px وإرتفاع 32px ومكونة من 18 رمز عرض الصورة و 19 رمز إرتفاع الصورة أي أن أبعاد الصورة الكلية هو 576px عرض و 608px إرتفاع كالتالي :
الآن سنقوم بعمل ملف css باسم style ونضع به class باسم icon يحتوي على الأبعاد وصورة الخلفية كالتالي :
.icon{
height:32px;
width:32px;
background-image:url('edit-icons.png');
}الحافة العلوية اليسرى من الصورة تمثل البداية (0,0) وعلى هذا إذا تم تطبيق هذا الـclass سيظهر الرمز العلوي من الجهة اليسرى للصورة فقط لأن أبعاد الـclass هي 32px إرتفاع و 32px عرض أي نفس أبعاد الرمز ولكن لو قمنا بتكبير أبعاد الـclass سيجد أن صورة الخلفية دخل معها رموز أخرى .
الآن يلزمنا للوصول لجميع الرموز الموجودة في الصورة هو عملية تحريك النقطة التي تبدأ منها الخلفية في حساب العرض والإرتفاع ويتم ذلك من خلال الخاصية background-position .
- والسؤال الآن كيف سأصل للرمز الذي أريده بسهولة ؟
- ستقوم بعد عدد الرموز يسار الرمز الذي تريده وتقوم بضرب هذا العدد في عرض الرمز وهو 32px وتسمى بالإزاحة في إتجاه المحور الأفقي x , وتقوم بعد عدد الرموز أعلى الرمز الذي تريده وتقوم بضرب هذا العدد في إرتفاع الرمز وتسمى بالإزاحة في إتجاه المحور الرأسي y وبعد ذلك نقوم بإسناد قيم الإزاحة بإشارة سالبة للخاصية background-position والقيمة الأولى هي الإزاحة في إتجاه المحور السيني x والقيمة الثانية هي الإزاحة في إتجاه المحور الصادي y .
- مثال نريد الرمز العلوي الثاني من جهة اليسار سيكون الكود كالتالي :
.icon{
height:32px;
width:32px;
background-image:url('edit-icons.png');
background-position: -32px 0px;
}- وإذا أردنا الرمز أسفل الرمز السابق سيكون الكود :
.icon{
height:32px;
width:32px;
background-image:url('edit-icons.png');
background-position: -32px -32px;
}- ولكن إذا كان هناك خصائص مشتركة بين بعض الفئات classes يفضل عمل class عام ثم classes تعتمد عليه , على سبيل المثال أنك تريد ثلاث رموز لعمليات الإضافة والحذف والتعديل سيكون الكود كالتالي :
.icon{
height:32px;
width:32px;
background-image:url('edit-icons.png');
}
.add{
background-position: 0px 0px;
}
.edit{
background-position: -32px -64px;
}
.delete{
background-position: -192px -64px;
}وعند الاستخدام ستضع الفئتين (classes) هكذا :
<div class="icon add"></div> <div class="icon edit"></div> <div class="icon delete"></div>
ولمزيد من التفاعل على الرموز سنغير الرمز في حالة المرور عليه بمؤشر الفارة وإظهار مؤشر اليد إذا كنت لا تستخدم وسم الرابط a هكذا :
.icon{
height:32px;
width:32px;
background-image:url('edit-icons.png');
}
.add{
background-position: 0px 0px;
}
.edit{
background-position: -32px -64px;
}
.delete{
background-position: -192px -64px;
}
.add:hover{
background-position: -96px 0px;
cursor:pointer;
}
.edit:hover{
background-position: -32px -32px;
cursor:pointer;
}
.delete:hover{
background-position: -512px -64px;
cursor:pointer;
}- وإن شاء الله لنا لقاء لكيفية تجميع صورة الرموز الخاصة بك في صورة واحدة وإعادة تحجيم الرموز للحجم الذي تريده .
- وهذا هو المثال السابق :
.