الدرس التاسع عن كفيه عمل ازرر متحركه بطريقه احترافيه بتقنيه css

قناص جوبا · 01-12-2010

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

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

هنحط فى جزء ال body

كود PHP:


			
<div class="Ahmed1">
    <a 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

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

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

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

كود PHP:


			
<div class="Ahmed1">
    <a 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;
    font: bold 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">
<a class="rab1" href="index.php" title="الرئيسية"></a>
<a class="rab2" href="register.php" title="التسجيل"></a>
<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

أم حبيبة · 01-13-2010

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

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

ساره روز · 01-13-2010

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

قناص جوبا · 01-13-2010

المشاركة الأصلية كتبت بواسطة أم حبيبة

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

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

العفو
منوره الموضوع ،،

المشاركة الأصلية كتبت بواسطة ساره روز

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

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

waelmsood · 01-13-2010

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

هبهوبة · 01-13-2010

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

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

قناص جوبا · 01-14-2010

المشاركة الأصلية كتبت بواسطة waelmsood

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

المشاركة الأصلية كتبت بواسطة هبهوبة

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

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

الله ياجماعه
منورين بالردود الحلوه

rina · 01-15-2010

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

قناص جوبا · 01-26-2010

المشاركة الأصلية كتبت بواسطة rina

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

الله يخليكى
منور ديما ،،

m.e.d.o · 01-27-2010

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

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

LinkBacks (?) 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

فى بى ايجى التطويرية
موقع تكويد	مركز رفع صور وملفات	مدونه فى بى ايجى	منتدى المشاكل	منتدى مجانى
معرض استايلات	دليل مواقع \| اضف موقعك	استضافه مجانيه	اعمال فى بى ايجى	دوره اداره الموقع
دوره تصميم الاستايلات	تبادل اعلانى	تبادل اعلانى	تبادل اعلانى	تبادل اعلانى

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

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

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

الدرس التاسع عن كفيه عمل ازرر متحركه بطريقه احترافيه بتقنيه css

دورة تصميم استايلات vbulletin بال css

روابط vbegy

دورات vbegy

مواقع تابعه لـ vbegy

اتصل بنا

خدمات موقع تكويد