loulou ange
11-01-2013, بتوقيت غرينيتش 04:11 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„ط§ط²ط±ط§ط± ط§ظ„طھط£ط´ظٹط±ظٹط© ط§ظ„ظ…طھط*ط±ظƒط© .. [ظ„ظ„ظ…طھظ‚ط¯ظ…ظٹظ†] (http://www.dzbatna.com/t1253656/)
السلام عليكم ورحمة الله وبركاته
درس مفصل مهم لتقنية css
و هو الازرار و اذا اشرت عليها ماذا يحصل و بعد الضغط ماذا يتغير اللون
هذه بختصار درس مفصلنا اليوم
قبل كل شئ يرجى تصميم زرين مثل الموجود بالمثال او باي شكل اخر
http://www.traweq.com/css/bto/1.png
الطريقة بسيطة جدا
بعد تصميم الزرين ..
نقول بعمل 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>
مثال تطبيقي :
هنا (http://www.traweq.com/css/bto/bot.html)
بالمرفق الملف مع الصور ..
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif css.zip (http://www.traidnt.net/vb/attachments/388682d1246634680-css.zip) (21.7 كيلوبايت, عدد مرات المشاهدة 465 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله وبركاته
درس مفصل مهم لتقنية css
و هو الازرار و اذا اشرت عليها ماذا يحصل و بعد الضغط ماذا يتغير اللون
هذه بختصار درس مفصلنا اليوم
قبل كل شئ يرجى تصميم زرين مثل الموجود بالمثال او باي شكل اخر
http://www.traweq.com/css/bto/1.png
الطريقة بسيطة جدا
بعد تصميم الزرين ..
نقول بعمل 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>
مثال تطبيقي :
هنا (http://www.traweq.com/css/bto/bot.html)
بالمرفق الملف مع الصور ..
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif css.zip (http://www.traidnt.net/vb/attachments/388682d1246634680-css.zip) (21.7 كيلوبايت, عدد مرات المشاهدة 465 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
