More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس الحادي عشر – صورة الأيقونات

" Here you can search for everything you want and you will find it as soon as possible "

ان صورة الايقونات هي عبارة عن مجموعة أيقونات تم جمعها بصورة واحدة
ان الموقع الذي يحتوي على الأيقونات يمكن أن يأخذ وقت طويلاً في تحميل الموقع ويوّلد مجموعة أوامر مختلفة للسيرفر
باستخدام صورة الأيقونات يمكنك خفض طلبات السيرفر وخفظ الكثير من تبادل البيانات



صورة الأيقونات – مثال بسيط

عوضاً عن استخدام العديد من الأيقونات لفعل قوائم متعددة يمكن استخدام صورة واحدة تحتوي على الأيقونات المراد استخدامها وذلك بطريقة مذهلة باستخدام CSS
لاحظ هذه الصورة الواحدة تحتوي على العديد من الأيقونات ولكن نحن نريد استخدام أيقونة “الرئيسية” مثلاً أي صورة المنزل فقط حيث سنقوم بتحديد جزء من الصورة الكلية لذلك دعونا نقوم بذلك باستخدام CSS
مثال
صور الأيقونات

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

شرح المثال :

  • نستخدم <img class=”home” src=”img_trans.gif” /> مع استدعاء التصميم الخاص home وثم نضع أي اسم للصورة ضمن اللاحقة src لأنه لايمكن تركه فارغ , سيتم استخدام الصورة في التصميم كخلفية وبذلك سيتم استخدام الجزء الذي تم تحديده أي شكل البيت .
  • نستخدم width:46px;height:44px; لتحديد العرض والارتفاع الذي نود استخدامه من الصورة الأصلية
  • نستخدم background:url(img_navsprites.gif) 0 0; لتحديد صورة الخلفية وموضعها , أي على اليسار 0px والأعلى 0px

هذه أسهل طريقة لتحديد أيقونة معينة من خلال صورة تحتوي على العديد من الأيقونات المختلفة , ولكن الآن سنقوم بتعقد الكود قليلاً باستخدام خاصيات الرابط التشعبي مثل hover


إنشاء شريط قائمة من خلال صورة الأيقونات

الآن سنستخدم الصورة نفسها لإنشاء شريط قائمة وسنستخدم هنا قائمة 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;
}
#home {
background:url('img_navsprites.gif') 0 0;
}
#prev {
left:63px;
width:43px;
}
#prev {
background:url('img_navsprites.gif') -47px 0;
}
#next {
left:129px;
width:43px;
}
#next {
background:url('img_navsprites.gif') -91px 0;
}

شرح المثال

  • استخدمنا #navlist{position:relative;}لتحديد ترتيب متصل للسماح باستخدام ترتيب مطلق دخله
  • استخدمنا #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} بتحديد الهوامش الداخلية والخارجية 0 , وشكل القائمة لاشيء أي إزالة علامات القائمة كما أن جميع القوائم ترتيبها متصل .
  • استخدمنا #navlist li, #navlist أي الرابط التشعبي للتصميم الخاص #navlist li, #navlist تم تحديده , الارتفاع 44px وشكل الظهور / العرض على شكل كتل .

الآن سنقوم بشرح كل جزء بشكل مستقل

  • استخدمنا #home{left:0px;width:46px;}(الصفحة الرئيسية) لتحديد الترتيب على اليسار وعرض الصورة هو 46px
  • استخدمنا #home{background:url(img_navsprites.gif) 0 0;}لتحديد صورة الخلفية وهي الصورة التي تحتوي على جميع الأيقونات ومركزها 0 لليسار و 0 للأعلى
  • استخدمنا #prev{left:63px;width:43px;}(الرجوع للخلف) لتحديد مكان الأيقونة في الصورة وهي 63px من اليمين (أي يمين أيقونة الرئيسيةمع اضافة مساحة اضافية بين العناصر) و العرض 43px
  • استخدمنا #prev{background:url(‘img_navsprites.gif’) -47px 0;}لتحديد الخلفية وهي صورة الأيقونات بالاضافة لتحديد (أيقونة الرجوع للخلف) ومكانها 47px لليمين (مكان الرئيسية 46 + 1 الخط الطولي الذي يفصل الأيقونات عن بعض)
  • استخدمنا #next{left:129px;width:43px;} (أيقونة للأمام) لتحديد مكانها من الصورة الأصلية وهي 129px لليمين (تبدأ من أيقونة الخلف 63px + عرض أيقونة الخلف 43px + مساحة اضافية تختارها للفصل بين الأيقونات) وعرض أيقونة الأمام 43px
  • استخدمنا #next{background:url(‘img_navsprites.gif’) no-repeat -91px 0;}لتحديد صورة الخلفية وبتحديد المكان هو 91px لليمين (عرض أيقونة الرئيسية 46px + 1px الحد الفاصل + عرض أيقونة الرجوع 43px + 1px الحد الفاصل)
You may also like  [ 20.000 ] ZP - Cross Fire NA [ For Free ]

صورة الأيقونات – التأثيرات عند وضع الماوس

صور الأيقونات
الآن سنقوم بوضع تأثيرات على القائمة مثل عند وضع الماوس على الأيقونة سيتغير اللون أو الشكل .
الصورة المعدلة هي كالتالي (“img_navsprites_hover.gif”) وتحتوي على 3 عناصر للقائمة و 3 عناصر سيتم استخدامهم عند وضع الماوس على الأيقونة
لن يحدث مشاكل بتحميل الصفحة أو السيرفر لأنها صورة واحدة وليست 6 صور مستقلة عند وضع الماوس على عنصر القائمة .
لإضافة تأثيرات عند وضع الماوس على الأيقونة نحتاج الى اضافة 3 أكواد فقط
مثال

#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;}

شرح المثال :

  • يمكننا استخدام خاصية a:hover لأننا لدينا عناصر قائمة تحتوي على روابط
  • استخدمنا #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;}لتحديد الترتيب للأيقونات الثلاثة التي نود استخدامها وبنفس صورة الخلفية الى الأسفل بشكل أكبر 45px


Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker