رسالة مدير الموقع

تم افتتاح الموقع الحمدلله بحلته الجديدة وهو تحت التطوير لفترة حتى يتم الانتهاء من كل شئ بنجاح

دورة تصميم قالب ورد بريس بلوحة تحكم

دورة برمجه اضافه اتصل بنا للورد بريس


الملاحظات

دورة تصميم استايلات vbulletin بال css دورة خاصة للمبتدأين لتعليم تصميم استايلات بتقنية ال css [شاملة]


LinkBack (11) أدوات الموضوع انواع عرض الموضوع
غير مقروء 01-12-2010   11 links from elsewhere to this Post. Click to view. #1 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي الدرس التاسع عن كفيه عمل ازرر متحركه بطريقه احترافيه بتقنيه css



السلام عليكم النهارده قررت انه يكون درس احترافى وكل الناس نفسها تتعلمه
الدرس هيكون مقسم لتلت طرق
كل طريقه ليها وقت معين تتعمل فيه

الطريقه الاولى :
اننا هنعمل الازرر منفصله بمعنى ان كل زر هيكون لوحده هنصممه بالفوتوشوب لوحده بلون اى كان وهو هو الزر بالظبط او غير حسب الحركه اللى احنا عاوزين نعملها
و الصورتين المصمين

هنحط فى جزء ال body
كود PHP:
<div class="Ahmed1">
    <
class="ra1" href="http://vbegy.info/vbtitle="الرئيسية"></a>
</
div
طبعا مش محتاج شرح الكود
وبعدين فى منقطه ال style
كود PHP:
.Ahmed1  {
    
background-image:url('1.png');
    
background-repeat:no-repeat;
    
height:107px;
    
width:40px;
    
position:relative;
}
a.ra1  {
    
position:absolute;
    
height:107px;
    
width:40px;
}
.
Ahmed1:hover  {
    
background-image:url('1_hover.png');
    
background-repeat:no-repeat;
    
height:107px;
    
width:40px;
    
position:relative;

شرح الكود
اول حاجه بعمل استعداء للصوره عادى من الكلاس Ahmed1
وبنحدد كل حاجه الطول والعرض ورابط الصوره
وبعدين بعمل رابط عليها كما تعلمنا سابقا
وبعدين بناخد جزء
كود PHP:
.Ahmed 
كله كوبى وبعدين نضيف بعد اسم الكلاس
كود PHP:
:hover 
بحيث يكون شكلها النهائى
كود PHP:
.Ahmed1:hover 
ونحط فيها رابط الصوره ولو الصوره المقاسات بتاعتها اكبر هنكبرها لو نفس المقاس هنتركها كما هى
وفى المرفقات الكود كامل للطريقه

ودى تعتبر اسهل الطرق والمثال عليها
http://vbegy.info/up/lesson/1.html

الطريقه الثانيه
اننا نصمم صوره فيها زرين جنب بعض بالشكل
وبعدين هنعمل برضه نفس السابق فى ال body بس هنذود ما بين <a></a> اسم الحاجه اللى احنا عاوزنها وليكن الرئيسية
الصوره اللى احنا مصممنها

كود PHP:
<div class="Ahmed1">
    <
class="ra1" href="http://vbegy.info/vbtitle="الرئيسية">الرئيسية</a>
</
div
وفى جزء ال style
هنمشى خطوه خطوه
كود PHP:
.Ahmed1  {
    
background:url('buttons.png'no-repeat right top;
    
height:25px;
    
width:94px;
    
text-align:center;
    
padding-top:5px;

هنكتب اسم الكلاس علشان نستدعيه .Ahmed1
وبعدين هنختار ال backbround ونختار الصوره اللى عليها الزرين وبعدين هنختار no-repeat يعنى عدم التكرار وبعدين هنختار right اى الجزء الايمين من الصوره وبعدين top يعنى يجب الصور من فوق حسب الارتفاع اللى احنا هنحدد
وبعدين هنحدد العرض والارتفارع وهنكتب text-align:center
علشان الكلام يكون فى المنتصف وبعدين هنكتب padding-top:5px; علشان يبعد الكلام شويه والحاجات دى بتكون حسب تقديراتنا وحسب التصميم بتاعنا
وبعدين هنكتب الرابط

كود PHP:
.Ahmed1 a  {
    
color:black;
    
fontbold 12pt Arial;
   
text-decoration:none;

هنستدعيه
كود PHP:
.Ahmed1 a 
وبعدين هنحدد اللون بتاعه color:black
وهنحدد نوع الخط وحجمه وبعدين text-decoration:none; دى علشان نشيل الخط اللى تحت الرابط

وبعد كده هنعمل استدعاء لل hover

كود PHP:
.Ahmed1:hover  {
    
background:url('buttons.png'no-repeat left bottom;
    
height:31px;
    
width:94px;
    
text-align:center;
    
padding-top:5px;

هنحدد ال background ونختار المسار للصوره وبعدين عدم التكرار وبعدين نختار left يعنى نختار الصور من الشمال وبعدين نختار bottom
ونحدد الطول والعرض المناسب للزر ونفس السابق بالظبط
وبعدين هنعمل تحديد لون الرابط عند ال hover

كود PHP:
.Ahmed1 a:hover  {
    
color:#fff;

زى ما احنا شافين اننا حددنا اللون فقط وهو هياخد من الكود السابق كل الخواص مثل الحجم ونوع الخط
وفى المرفقات الكود كامل
ولمثال على الطريقه من هنا
http://vbegy.info/up/lesson/2.html

الطريقه الثالثه والاكثر احترافيه وسهوله وهى بالخاصيه
كود PHP:
background-position
طبعا الطريقه دى هتستخدم لو عندنا استايل فانا هشرح على هيدر استايل وهو الاستايل الجديد بتاعى بس لسه منزلش

اولا احنا هنصمم الصوره اللى هنعمل عليها الازرر
وليكن دى

وبعدين هنغير الالوان بتاعت الازرر علشان لما تتحرك ينج الشكل بتعها
والشكل بعد التغير وليكن ده

هنخش على الاكسبريشن ويب وبعدين هنظبط الشكل البدأئى بتاعنا

كود PHP:
<div class="h">
<
class="rab1" href="index.php" title="الرئيسية"></a>
<
class="rab2" href="register.php" title="التسجيل"></a>
<
class="rab3" href="usercp.php" title="التحكم"></a>
</
div
وبعدين ما بين

كود PHP:
<style type="text/css">

</
style
هنكتب خصائص الكلاسكات
وبعدين نعمل حفظ للصفحه بتاعتنا فى اى مكان ونفتحها بالمتفح علشان نشوف الشكل بتعنا لما الموس يجى على الزر
وهنكت خصائص الكلاس الاول

كود PHP:
.h{
    
background-image:url('file:///d:/AppServ/www/vb/sama_vbegy/images/sama_01.gif');
    
height:208px;
    
background-repeat:no-repeat;
    
width:338px;
    
float:left;
    
position:relative;

لحد هنا مفيش اى صعوبه واحنا فى الدروس السابقه شرحنا ازاى بنوزع

كود PHP:
a.rab1{
    
position:absolute;
    
height:85px;
    
width:100px;
    
bottom:10px;
    
left:15px;

كما تعودنا
وبعدين هنا الاختلاف
كود PHP:
a.rab1:hover{
    
background-image:url('file:///d:/AppServ/www/vb/sama_vbegy/images/Ahmed_01.gif');
    
background-position:-15px -113px;

هنشرح الكود
كود PHP:
a.rab1:hover 
احنا بنكتب الخصائص بالشكل ده
كود PHP:
a.rab1 
وبعدين هنعمل النقطين دول :
وبعدين هنكتب
كود PHP:
hover 
وهنفتح القوسين
هنكتب
كود PHP:
background-image:url('file:///d:/AppServ/www/vb/sama_vbegy/images/Ahmed_01.gif'); 
عادى كما تعودنا
وبعدين هنكتب
كود PHP:
background-position
وبعدين هنكتب الاول المسافه فى المحور العمودى السينى
احنا هتكون بالناقص يعنى تتحرك ناحيه الشمال كما فى خط الاعداد فى ماده الرياضيات
كود PHP:
------------0+++++++++++ 
الصفر فى المنتصف والسالب ناحيه الشمال والموجب ناحيه اليمين
احنا هنا هنلاحظ التحديد
-15px
وطبعا احنا نقدر نظبطها حسب كل تصميم بتاعنا
وبعدين هندوس مسافه من الكيبورد علشان نظبط المحور الصادى
وبرضه اللى دارس رياضه
الموجب فقط والصفر فى المنتصف والسالب تحت
بيحث يكون الشكل النهائى
كود PHP:
background-position:-15px -113px
واحنا بنظبط الارقام دى حسب تصمينا ونتحكم فيها سواء بالسالب او الموجب بس طبعا الموجب من غير اى اشاره
يعنى كده
15px
ودلوقتى نشوف المثال بتاعنا علشان اول زر بعد تسجيل العمل
هنلاقيه متحرك
ونطبق نفس الحكايه على باقى الازرر الباقيه
المثال من هنا
http://vbegy.info/up/lesson/3.html
والاكواد فى المرفقات

الاكواد فى المرفقات بالترتيب 1 و 2 و3
الموضوع الاصلى
منتديات فى بى ايجى
http://vbegy.info/vb












الملفات المرفقة
نوع الملف: zip lesson.zip‏ (1.8 كيلوبايت, المشاهدات 597)
قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-13-2010   #2 (permalink)
عضو نشيط
 
الصورة الرمزية أم حبيبة

 رقم العضوية : 167
 تاريخ التسجيل : Oct 2009
 الدولة : مصر الحبيبة
 المشاركات : 95
افتراضي

الف شكر ع الشرح الرائع

دائما مميزبما تطرح من مواضيع












أم حبيبة غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-13-2010   #3 (permalink)
عضو جديد

 رقم العضوية : 271
 تاريخ التسجيل : Nov 2009
 الدولة : دار زايد
 المشاركات : 27
افتراضي

درس رائع بحاول أسويه
مشكور أخوي قناص جوبا على الشرح الحلو
ما قصرت












ساره روز غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-13-2010   #4 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي

المشاركة الأصلية كتبت بواسطة أم حبيبة مشاهدة المشاركة
الف شكر ع الشرح الرائع

دائما مميزبما تطرح من مواضيع
العفو
منوره الموضوع ،،

المشاركة الأصلية كتبت بواسطة ساره روز مشاهدة المشاركة
درس رائع بحاول أسويه
مشكور أخوي قناص جوبا على الشرح الحلو
ما قصرت
العفو وان شاء الله يكون الدرس بسيط على الجميع












قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-13-2010   #5 (permalink)
عضو جديد

 رقم العضوية : 233
 تاريخ التسجيل : Nov 2009
 الدولة :
 المشاركات : 3
افتراضي

شرح واضح ومفهوم
الف شكر












waelmsood غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-13-2010   #6 (permalink)
مؤسسه المنتدى
 
الصورة الرمزية هبهوبة

 رقم العضوية : 61
 تاريخ التسجيل : Jul 2009
 العمر : 27
 الدولة :
 المشاركات : 700
افتراضي

درس ولا اروع من شخص ولا اروع

بنا يوفقك ان شاء الله


















التوقيع


اتمنى ان اكون قد تركت بصمة بسيطة في المنتدى وان لم اترك فهذا خطئي يذكركم بي
:: مع تمنياتي بالتوفيق للجميع ان شاء الله ::
هبهوبة غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-14-2010   #7 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي

المشاركة الأصلية كتبت بواسطة waelmsood مشاهدة المشاركة
شرح واضح ومفهوم
الف شكر
المشاركة الأصلية كتبت بواسطة هبهوبة مشاهدة المشاركة
درس ولا اروع من شخص ولا اروع

بنا يوفقك ان شاء الله
الله ياجماعه
منورين بالردود الحلوه












قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-15-2010   #8 (permalink)
عضو نشيط

 رقم العضوية : 302
 تاريخ التسجيل : Dec 2009
 الدولة :
 المشاركات : 30
افتراضي

ما شاء الله عليك
شرح رائع












rina غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-26-2010   #9 (permalink)
VB EGY
 
الصورة الرمزية قناص جوبا

 رقم العضوية : 1
 تاريخ التسجيل : Jun 2009
 العمر : 27
 الدولة : ام الدنيا
 المشاركات : 4,439
إرسال رسالة عبر MSN إلى قناص جوبا
افتراضي

المشاركة الأصلية كتبت بواسطة rina مشاهدة المشاركة
ما شاء الله عليك
شرح رائع
الله يخليكى
منور ديما ،،












قناص جوبا غير متواجد حالياً   رد مع اقتباس
غير مقروء 01-27-2010   #10 (permalink)
عضو ممتاز

 رقم العضوية : 252
 تاريخ التسجيل : Nov 2009
 الدولة :
 المشاركات : 104
افتراضي

الله يخليك يا مبدع












m.e.d.o غير متواجد حالياً   رد مع اقتباس

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
متحركه, التاسع, الدرس, احترافيه, ازرر, css, بتقنيه, بطريقه, عمل, عن, كفيه

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


LinkBacks (?)
LinkBack to this Thread: http://vbegy.info/vb/t906.html
أرسلت بواسطة For Type التاريخ
Untitled document This thread Refback 02-09-2012 02:57 PM
Untitled document Post #0 Refback 11-11-2011 03:37 PM
Untitled document This thread Refback 02-10-2011 04:46 PM
Untitled document This thread Pingback 06-27-2010 04:39 PM
Untitled document This thread Pingback 06-25-2010 07:13 PM
Untitled document This thread Refback 05-22-2010 05:15 PM
Untitled document This thread Refback 02-01-2010 04:05 PM
Untitled document This thread Refback 01-14-2010 11:04 PM
Untitled document This thread Refback 01-13-2010 06:28 PM
Untitled document This thread Trackback 01-12-2010 10:01 PM
Untitled document This thread Trackback 01-12-2010 09:52 PM


فى بى ايجى التطويرية



الساعة الآن 11:00 AM.
Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37