• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
طريقة عمل شريط قائمة بتأثير رائع – CSS

طريقة عمل شريط قائمة بتأثير رائع – CSS

كيفية عمل شريط قائمة بال CSS بتقنية ال Sprite

بسم الله الرحمن الرحيم
نبدأ الدرس الأول بإذن الله
موضوع اليوم هو
CSS Sprite

فوائدها:
تسريع تحميل الصور على موقعك.
مواقع تستخدم هذه التقنية:
www.yahoo.com
www.apple.com
ومواقع أخرى بالتأكيد

مثال على الدرس
اضغط هنا

نبدا الدرس

لتنزيل الملف بالكامل (الكود+الصور)
اضغط هنا

نختار اداة المسطرة ليتم قياس الارتفاع والعرض لكل زر
لاحظ الصورة التالية

قسنا الارتفاع وكان مايقارب 49 بيكسل
والان العرض

عرض زر الرئيسية :141 بيكسل
عرض زر منتديات عنيد:219 بيكسل
عرض زر مساعدة: 132 بيكسل
والآن حان وقت الCSS
اذا عندك خلفية عن ال CSS
تقدر تعدل على الصورة والكود براحتك
واذا ماكنت تعرف CSS
تقدر تنسخ الكود كما هو وتتعلم شوي شوي
راح اشرح بعض الاكواد
الآن افتح صفحة فاضية notepad واكتب الكود التالي
كود HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="اسم ملف الستايل.css" />
</head>
<body>
<div id="navBarContainer">
</div>
 
</body>
</html>

والان افتح صفحة ثانية وسميها style.css
اكتب الكود التالي
كود HTML:

body	{
background-color:#00a2ff;
}
#navBarContainer{
width: 500px; /*عرض صورة القائمة*/
height: 53px;
margin: 0 auto;
}

ملاحظة:ارتفاع القائمة مايقارب 49 بيكسل جرب 53
لاننا نريد ان يعرض 53 بيكسل فقط الا وهو الجزء الاعلى من الصورة

نرجع لصفحة ال HTML
ونكمل كتابة الكود
كود HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="navBarContainer">
<ul id="navBar">
<li id="help"><a href="#">mosa3ada</a></li>
<li id="3need"><a href="#">montadyat 3need</a></li>
<li id="index"><a href="#">index</a></li>
</ul>
</div>
</body>
</html>

احفظها باسم index.html
عند فتح الصفحة بالمتصفح
تظهر كالتالي..

امممم
طيب
خلينا نكمل كود الستايل style.css
نكتب الكود التالي
كود HTML:

ul#navBar{
width: 500px;
height: 53px;
margin: 0 auto;
list-style: none; /* لإزالة تنسيق النقاط*/
}
 
ul#navBar li{
display: inline; /* لعرض القائمة بشكل افقي*/
}

شوف الفرق

ظهرت القائمة بشكل افقي تماام

والان راح نضيف صورة لكل تبويبة (لينك)
بس قبل
اكتب الكود التالي لإخفاء اللينكات (الكتابة)

كود HTML:

ul#navBar li a{
height: 53px;
float: left;
text-indent: -9999px;
}

نضيف الصور
قبل لاتضيف الصور للأزرار لازم تعرف كم عرض الزر
طيب
عرض الزر الاول اللي هو مساعدة
كان عرضه 132 بيكسل

اها
طيب نكتب الكود التالي

كود HTML:

ul#navBar li#help a{
width: 132px;
background: url(nav.png) no-repeat 0px 0px;
}

سهلة!
هذا اول زر

طيب نيجي للزر الثاني اللي هو منتديات عنيد
عرضه = 219 بيكسل
تكتب الكود التالي

كود HTML:

ul#navBar li#3need a{
width: 219px;
background: url(nav.png) no-repeat -132px 0px;
}

للزرين كان الكود متشابه تقريبا
الفرق يكمن بكود HTML:

background: url(nav.png) no-repeat -132px 0px;

طيب ليش كتبنا -132؟؟
كتبنا -132 علشان المتصفح يستورد الصورة مع تجاهل اول 132 بيكسل منها واللي هو كان الزر الاول
في الزر الاول كتبنا 0px 0px
(x,y)
اي
(طولي y , عرضي X )
يعني استوردنا الصورة من البداية لحد عرض الزر اللي هو كان 132 بيكسل
يعني الزر الثاني لازم يبدا من عند 132 عرضي

طيب باقي الزر الثالث
عرضه:141
نكتب الكود التالي
كود HTML:

ul#navBar li#index a{
width: 141px;
background: url(nav.png) no-repeat -351px 0px;
}

طيب ليش كتبنا -315؟
132+219 = 351
يعني كأنك تقول للمتصفح انة يتجاهل 351 بيكسل من الصورة ويعرض الباقي بعرض 141 بيكسل
نشوف النتيجة؟

طيب باقي التأثيرات؟؟؟

نضيف الكود التالي
كود HTML:

ul#navBar li#help a:hover{
background-position: 0 -53px;
}


عند تمرير الماس على مساعدة سيظهر لك هذا التأثير

نكتب كود باقي الازرار – كود الزر الثاني

كود HTML:

ul#navBar li#3need a:hover{
background: url(nav.png) no-repeat -132px -53px;
}

ليش كتبنا -53؟
شرحنا قبل
يعني ان نقول للمتصفح انه يتجاهل 53 بيكسل من ارتفاص الصورة
نكمل كود الزر الثالث

كود HTML:

ul#navBar li#index a:hover{
background: url(nav.png) no-repeat -351px -53px;
}

بذلك نكون انتهينا من هذا الدرس
تحياتي

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *