دورة تصميم استايلات vbulletin بال css دورة خاصة للمبتدأين لتعليم تصميم استايلات بتقنية ال css [شاملة] |
LinkBack (11) | أدوات الموضوع | انواع عرض الموضوع |
![]() |
![]() |
||
VB EGY
![]() ![]() ![]() ![]() ![]() ![]() ![]() |
![]() السلام عليكم النهارده قررت انه يكون درس احترافى وكل الناس نفسها تتعلمه
الدرس هيكون مقسم لتلت طرق كل طريقه ليها وقت معين تتعمل فيه ![]() الطريقه الاولى : اننا هنعمل الازرر منفصله بمعنى ان كل زر هيكون لوحده هنصممه بالفوتوشوب لوحده بلون اى كان وهو هو الزر بالظبط او غير حسب الحركه اللى احنا عاوزين نعملها و الصورتين المصمين ![]() ![]() هنحط فى جزء ال body كود PHP:
وبعدين فى منقطه ال style كود PHP:
اول حاجه بعمل استعداء للصوره عادى من الكلاس Ahmed1 وبنحدد كل حاجه الطول والعرض ورابط الصوره وبعدين بعمل رابط عليها كما تعلمنا سابقا وبعدين بناخد جزء كود PHP:
كود PHP:
كود PHP:
وفى المرفقات الكود كامل للطريقه ودى تعتبر اسهل الطرق والمثال عليها http://vbegy.info/up/lesson/1.html ![]() الطريقه الثانيه اننا نصمم صوره فيها زرين جنب بعض بالشكل وبعدين هنعمل برضه نفس السابق فى ال body بس هنذود ما بين <a></a> اسم الحاجه اللى احنا عاوزنها وليكن الرئيسية الصوره اللى احنا مصممنها ![]() كود PHP:
هنمشى خطوه خطوه كود PHP:
وبعدين هنختار ال backbround ونختار الصوره اللى عليها الزرين وبعدين هنختار no-repeat يعنى عدم التكرار وبعدين هنختار right اى الجزء الايمين من الصوره وبعدين top يعنى يجب الصور من فوق حسب الارتفاع اللى احنا هنحدد وبعدين هنحدد العرض والارتفارع وهنكتب text-align:center علشان الكلام يكون فى المنتصف وبعدين هنكتب padding-top:5px; علشان يبعد الكلام شويه والحاجات دى بتكون حسب تقديراتنا وحسب التصميم بتاعنا وبعدين هنكتب الرابط كود PHP:
كود PHP:
وهنحدد نوع الخط وحجمه وبعدين text-decoration:none; دى علشان نشيل الخط اللى تحت الرابط وبعد كده هنعمل استدعاء لل hover كود PHP:
ونحدد الطول والعرض المناسب للزر ونفس السابق بالظبط وبعدين هنعمل تحديد لون الرابط عند ال hover كود PHP:
وفى المرفقات الكود كامل ولمثال على الطريقه من هنا http://vbegy.info/up/lesson/2.html ![]() الطريقه الثالثه والاكثر احترافيه وسهوله وهى بالخاصيه كود PHP:
اولا احنا هنصمم الصوره اللى هنعمل عليها الازرر وليكن دى ![]() وبعدين هنغير الالوان بتاعت الازرر علشان لما تتحرك ينج الشكل بتعها والشكل بعد التغير وليكن ده ![]() هنخش على الاكسبريشن ويب وبعدين هنظبط الشكل البدأئى بتاعنا كود PHP:
كود PHP:
وبعدين نعمل حفظ للصفحه بتاعتنا فى اى مكان ونفتحها بالمتفح علشان نشوف الشكل بتعنا لما الموس يجى على الزر وهنكت خصائص الكلاس الاول كود PHP:
كود PHP:
وبعدين هنا الاختلاف كود PHP:
كود PHP:
كود PHP:
وبعدين هنكتب كود PHP:
هنكتب كود PHP:
وبعدين هنكتب كود PHP:
احنا هتكون بالناقص يعنى تتحرك ناحيه الشمال كما فى خط الاعداد فى ماده الرياضيات كود PHP:
احنا هنا هنلاحظ التحديد -15px وطبعا احنا نقدر نظبطها حسب كل تصميم بتاعنا وبعدين هندوس مسافه من الكيبورد علشان نظبط المحور الصادى وبرضه اللى دارس رياضه الموجب فقط والصفر فى المنتصف والسالب تحت بيحث يكون الشكل النهائى كود PHP:
يعنى كده 15px ودلوقتى نشوف المثال بتاعنا علشان اول زر بعد تسجيل العمل هنلاقيه متحرك ونطبق نفس الحكايه على باقى الازرر الباقيه المثال من هنا http://vbegy.info/up/lesson/3.html والاكواد فى المرفقات ![]() الاكواد فى المرفقات بالترتيب 1 و 2 و3 الموضوع الاصلى منتديات فى بى ايجى http://vbegy.info/vb
|
||
![]() |
![]() |
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
متحركه, التاسع, الدرس, احترافيه, ازرر, css, بتقنيه, بطريقه, عمل, عن, كفيه |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
![]() LinkBack to this Thread: http://vbegy.info/vb/t906.html
|
||||
أرسلت بواسطة | For | Type | التاريخ | |
Untitled document | This thread | Refback | 02-09-2012 03:57 PM | |
Untitled document | Post #0 | Refback | 11-11-2011 04:37 PM | |
Untitled document | This thread | Refback | 02-10-2011 05:46 PM | |
Untitled document | This thread | Pingback | 06-27-2010 05:39 PM | |
Untitled document | This thread | Pingback | 06-25-2010 08:13 PM | |
Untitled document | This thread | Refback | 05-22-2010 06:15 PM | |
Untitled document | This thread | Refback | 02-01-2010 05:05 PM | |
Untitled document | This thread | Refback | 01-15-2010 12:04 AM | |
Untitled document | This thread | Refback | 01-13-2010 07:28 PM | |
Untitled document | This thread | Trackback | 01-12-2010 11:01 PM | |
Untitled document | This thread | Trackback | 01-12-2010 10:52 PM |
![]() فى بى ايجى التطويرية |
||||