ط§ظ„ط§ط²ط±ط§ط± ط§ظ„طھط£ط´ظٹط±ظٹط© ط§ظ„ظ…طھط*ط±ظƒط© .. [ظ„ظ„ظ…طھظ‚ط¯ظ…ظٹظ†]


السلام عليكم ورحمة الله وبركاته
درس مفصل مهم لتقنية css
و هو الازرار و اذا اشرت عليها ماذا يحصل و بعد الضغط ماذا يتغير اللون

هذه بختصار درس مفصلنا اليوم
قبل كل شئ يرجى تصميم زرين مثل الموجود بالمثال او باي شكل اخر




الطريقة بسيطة جدا
بعد تصميم الزرين ..

نقول بعمل 3 خطوات فقط ..

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

الداف راح نكتب عليه كلاس و نسمي الكلام bot
رمز PHP:
<code style="white-space:nowrap"> <code> <body>
<div class="bot">
</div>
</body>
</code> </code>

نذهب الأن كتابة اكواد css
ب3 خطوات

الأولى :
استدعاء الصورة و تضبيط موقعها و مقاسها .
طبعا انا كتبتها
رمز PHP:
<code style="white-space:nowrap"> <code> background-image:url('bto/bot1.png');
height:32px; width:107px;
position:absolute;
left:50%; top:100px;
</code> </code>

الشرح طريقة حسب الألوان :

هذه الكود code بتقنية css اذا بتحط صورة معناها خلفية الصورة .
مسار الصورة
عرض الصورة
طول الصورة
تقنية position و الي هي التحكم بموقع الصورة او اي شئ
مسافة البعد بين الاعلى و الصورة
مسافة البعد بين اليسار و الصورة

بعد الكتابة نضيف كلاس اخر
تحته بأسم
bot:visited : و هذه بعد الضغط عليه ( يعني عند زيارة الصفحة )
طبعا الرصاصي bot هذه اسم الكلاس . و نضع داخل التوزيع نفس الي اضفناه داخل التوزيع bot بالضبط

و تحته نضيف
bot:hover : و هذه عن التأشير للزر .
طبعا الرصاصي bot هذه اسم الكلاس . و نضع داخل التوزيع نفس الي اضفناه داخل التوزيع bot بالضبط


الكود code كامل يصبح
هذه توزيع css
رمز PHP:
<code style="white-space:nowrap"> <code> .bot{
background-image:url('bto/bot1.png');
height:32px; width:107px;
position:absolute;
left:50%; top:100px;
}

.bot:visited{
background-image:url('bto/bot2.png');
height:32px; width:107px;
position:absolute;
left:50%; top:100px;

}

.bot:hover{
background-image:url('bto/bot2.png');
height:32px; width:107px;
position:absolute;
left:50%; top:100px;

}
</code> </code>

اما الكلاسات

رمز PHP:
<code style="white-space:nowrap"> <code> <div class="bot">
</div>
</body>
</code> </code>

مثال تطبيقي :
هنا





بالمرفق الملف مع الصور ..







الملفات المرفقة [TR]
css.zip (21.7 كيلوبايت, عدد مرات المشاهدة 465 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©