الرئيسية | مركز المعلومات | مركز التحميل | للاعلان في مُطِّورْ | استخدم ختم مطور | قوِ موضوعك هام | وسام مطور جديد | افحص البيج رانك جديد

العودة   مطور , mtwer forum > مطور .. خطوتك الأولى من مستخدم الى مطور > لغات برمجة مواقع

لغات برمجة مواقع دورات، دروس، نقاشات، وتبادل خبرات في كلاً من php asp java scripts perl وغيرها.


عزيزي المطور ابتعد عن النقل، ولتكن مواضيعك جديدة وقيمة تعبر عن إبداعك وتميزك
إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 31-01-2010, 07:57 PM
مطور مشارك
 
تاريخ التسجيل: 11-03-2009
المشاركات: 59
قناص جوبا is on a distinguished road
افتراضي درس عمل زر متحرك بتقينه css باكثر من طريقه

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

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

هنحط فى جزء ال body
كود PHP:
<div class="Ahmed1">
    <
class="ra1" href="http://vbegy.info/vb" title="الرئيسية"></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 
ونحط فيها رابط الصوره ولو الصوره المقاسات بتاعتها اكبر هنكبرها لو نفس المقاس هنتركها كما هى
وفى المرفقات الكود كامل للطريقه

ودى تعتبر اسهل الطرق والمثال عليها
Untitled Document

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

كود PHP:
<div class="Ahmed1">
    <
class="ra1" href="http://vbegy.info/vb" title="الرئيسية">الرئيسية</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;

زى ما احنا شافين اننا حددنا اللون فقط وهو هياخد من الكود السابق كل الخواص مثل الحجم ونوع الخط
وفى المرفقات الكود كامل
ولمثال على الطريقه من هنا
Untitled 1

الطريقه الثالثه والاكثر احترافيه وسهوله وهى بالخاصيه
كود 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
ودلوقتى نشوف المثال بتاعنا علشان اول زر بعد تسجيل العمل
هنلاقيه متحرك
ونطبق نفس الحكايه على باقى الازرر الباقيه
المثال من هنا
Untitled 2
والاكواد فى المرفقات

الاكواد فى المرفقات بالترتيب 1 و 2 و3
الموضوع الاصلى
منتديات فى بى ايجى
منتديات فى بى ايجى التطويرية
الملفات المرفقة
نوع الملف: zip lesson.zip‏ (1.8 كيلوبايت, المشاهدات 37)


توقيعى
لا اله الا الله محمد رسول الله
منتديات فى بى ايجى التطويرية
http://vbegy.info/vb

رد مع اقتباس


  #2  
قديم 31-01-2010, 11:52 PM
الصورة الرمزية مُجَاهِد
مُطوِّرْ مسؤول
 
تاريخ التسجيل: 13-03-2008
المشاركات: 8,611
مُجَاهِد is on a distinguished road
افتراضي

وعليكم السلام ورحمة الله وبركاتة ..

ما شاء الله .. تبارك الله ..

درس روعه .. ويضاف الى قائمة المواضيع المميزة ..

وفي انتظار المزيد من الدروس المميزة ..

بارك الله فيك ..


توقيعى
حوار بين مطور mtwer.com وموقع التعلم الإلكتروني باللغة العربية arabic-elearn.com [هام]
موقع مررها .. mrrha.com [أين ذهب؟؟]
مجموعة كبيرة من تمبلتات وقوالب وورد بريس WordPress Themes Template
مجموعة كبيرة من قوالب تمبلتات html css
[تعديل] التحكم بخيارات صفحة نقل المواضيع .. حصرياً لمطور ..
منتج حصري لمطور [Product] منع الأعضاء من دخول لوحة التحكم إلا بعد عدد من المشاركات
دروس css بالعربية للمبتدئين ولمن يريد تعلم هذه اللغة ..
[كود] تحويل الزائر تلقائياً حسب لغة الموقع ! [حصرياً]
حصري لمطور [Product] حذف قوانين وشروط المنتدى عند التسجيل - الإصدار الثالث
شرح + تعديل : حذف رقم النسخة من الإرشيف .!
[ شرح + كود ] إظهار إعلان جوجل ادسنس كقسم في المنتدى ! ( حصرياً لمطور )
شرح + تعديل : التحكم بطول الروابط في المشاركات .!
بو مجاهد

رد مع اقتباس
  #3  
قديم 01-02-2010, 10:03 PM
الصورة الرمزية ابو فاطمة
مطور مشارك
 
تاريخ التسجيل: 01-09-2008
المشاركات: 62
ابو فاطمة is on a distinguished road
افتراضي

عليكم السلام ورحمة الله وبركاته

جزاكم الله خير


توقيعى
لاخير في كاتم علم

اخواني اعذروني على دخولي المتقطع لضروفي الخاصة وتعب خدمة الانتر نت

رد مع اقتباس
  #4  
قديم 01-02-2010, 11:25 PM
مطور مشارك
 
تاريخ التسجيل: 11-03-2009
المشاركات: 59
قناص جوبا is on a distinguished road
افتراضي

اقتباس:
المشاركة الأصلية كتبت بواسطة مُجَاهِد مشاهدة المشاركة
وعليكم السلام ورحمة الله وبركاتة ..

ما شاء الله .. تبارك الله ..

درس روعه .. ويضاف الى قائمة المواضيع المميزة ..

وفي انتظار المزيد من الدروس المميزة ..

بارك الله فيك ..
شرف ليا مرورك يا غالى على الموضوع
ووضعه فى قائمه المواضيع المميزه
منور يا غالى

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

جزاكم الله خير
وعليكم السلام
ان شاء الله يكون درس بسيط وخفيف على الجميع


توقيعى
لا اله الا الله محمد رسول الله
منتديات فى بى ايجى التطويرية
http://vbegy.info/vb

رد مع اقتباس
  #5  
قديم 02-02-2010, 05:58 AM
الصورة الرمزية أبو شهد
مطور مشارك
 
تاريخ التسجيل: 03-08-2008
الدولة: UAE
المشاركات: 25
أبو شهد is on a distinguished road
افتراضي

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

يعطيك العافيه


توقيعى
سيرف نت لخدمات المواقع
www.servnt.com

بريد الدعم الفني : support @ servnt.com
متحرك : 00971507118665

رد مع اقتباس
  #6  
قديم 03-02-2010, 05:12 AM
مطور مشارك
 
تاريخ التسجيل: 11-03-2009
المشاركات: 59
قناص جوبا is on a distinguished road
افتراضي

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

يعطيك العافيه
لا يا غالى تفرق كتير جدا من حيث الجوده كمان ده نقطه
وكمان لو تقارن باول طريقه وتانى طريقه هتلاقى انك مش هتعرف تعملها بالفوتوشوب نهائى ده فى حاله استخدام اكتر من زر ويكون الاضافه دينيميكى
كما فى المدونه مثلا او فى دليل مواقع كما هنا مثلا
http://vbegy.info/dir


توقيعى
لا اله الا الله محمد رسول الله
منتديات فى بى ايجى التطويرية
http://vbegy.info/vb

رد مع اقتباس
إضافة رد

العلامات المرجعية



مواضيع جديدة في قسم لغات برمجة مواقع

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

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

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

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
كود نص رائع متحرك + صورة ( يحتاجه كل منتدى ) mr.king of iraq تطوير منتديات الجيل الثالث 3.6 3.7 3.8 6 16-11-2009 03:00 AM
مطلوب هاك شريط نص متحرك عيوني حزينة صيانة و دعم فني مجاني للمنتديات و تطوير المواقع 5 01-11-2009 06:12 PM
اضف موقعك باكثر من رابط والتفعيل فوري azaziy مطور التبادل الاعلاني والتجاري 3 11-08-2008 09:50 AM
تموج متحرك على الكلمة : درس ايمج ريدي s y s t e m دروس تصميم و شروحات مصورة 5 11-08-2008 12:03 AM


مساحة إعلانية


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
جميع الأوقات بتوقيت GMT +3. الساعة الآن 05:48 AM.