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

[قناص جوبا]

السلام عليكم النهارده قررت انه يكون درس احترافى وكل الناس نفسها تتعلمه
الدرس هيكون مقسم لتلت طرق
كل طريقه ليها وقت معين تتعمل فيه
http://vbegy.info/up/fasel.gif
الطريقه الاولى :
اننا هنعمل الازرر منفصله بمعنى ان كل زر هيكون لوحده هنصممه بالفوتوشوب لوحده بلون اى كان وهو هو الزر بالظبط او غير حسب الحركه اللى احنا عاوزين نعملها
و الصورتين المصمين
http://vbegy.info/up/lesson/1.png http://vbegy.info/up/lesson/1_hover.png
هنحط فى جزء ال body
<div class="Ahmed1">
<a class="ra1" href="http://vbegy.info/vb" title="الرئيسية"></a>
</div>
طبعا مش محتاج شرح الكود
وبعدين فى منقطه ال style
.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
وبنحدد كل حاجه الطول والعرض ورابط الصوره
وبعدين بعمل رابط عليها كما تعلمنا سابقا
وبعدين بناخد جزء .Ahmed كله كوبى وبعدين نضيف بعد اسم الكلاس :hoverبحيث يكون شكلها النهائى
.Ahmed1:hoverونحط فيها رابط الصوره ولو الصوره المقاسات بتاعتها اكبر هنكبرها لو نفس المقاس هنتركها كما هى
وفى المرفقات الكود كامل للطريقه

ودى تعتبر اسهل الطرق والمثال عليها
http://vbegy.info/up/lesson/1.html
http://vbegy.info/up/fasel.gif
الطريقه الثانيه
اننا نصمم صوره فيها زرين جنب بعض بالشكل
وبعدين هنعمل برضه نفس السابق فى ال body بس هنذود ما بين <a></a> اسم الحاجه اللى احنا عاوزنها وليكن الرئيسية
الصوره اللى احنا مصممنها http://vbegy.info/up/lesson/buttons.png

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

.Ahmed1 a {
color:black;
font: bold 12pt Arial;
text-decoration:none;
}
هنستدعيه .Ahmed1 aوبعدين هنحدد اللون بتاعه color:black
وهنحدد نوع الخط وحجمه وبعدين text-decoration:none; دى علشان نشيل الخط اللى تحت الرابط

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

.Ahmed1:hover {
background:url('buttons.png') no-repeat left bottom;
height:31px;
width:94px;
text-align:center;
padding-top:5px;
}
هنحدد ال background ونختار المسار للصوره وبعدين عدم التكرار وبعدين نختار left يعنى نختار الصور من الشمال وبعدين نختار bottom
ونحدد الطول والعرض المناسب للزر ونفس السابق بالظبط
وبعدين هنعمل تحديد لون الرابط عند ال hover

.Ahmed1 a:hover {
color:#fff;
}زى ما احنا شافين اننا حددنا اللون فقط وهو هياخد من الكود السابق كل الخواص مثل الحجم ونوع الخط
وفى المرفقات الكود كامل
ولمثال على الطريقه من هنا
http://vbegy.info/up/lesson/2.html
http://vbegy.info/up/fasel.gif
الطريقه الثالثه والاكثر احترافيه وسهوله وهى بالخاصيه background-position:طبعا الطريقه دى هتستخدم لو عندنا استايل فانا هشرح على هيدر استايل وهو الاستايل الجديد بتاعى بس لسه منزلش

اولا احنا هنصمم الصوره اللى هنعمل عليها الازرر
وليكن دى
http://vbegy.info/up/lesson/sama_01.gif
وبعدين هنغير الالوان بتاعت الازرر علشان لما تتحرك ينج الشكل بتعها
والشكل بعد التغير وليكن ده
http://vbegy.info/up/lesson/sama_04.gif
هنخش على الاكسبريشن ويب وبعدين هنظبط الشكل البدأئى بتاعنا

<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>
وبعدين ما بين

<style type="text/css">

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

.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;
}
لحد هنا مفيش اى صعوبه واحنا فى الدروس السابقه شرحنا ازاى بنوزع

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

[خ ــادم الإسلام]

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

[moelgendy78]

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

[قناص جوبا]

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

الله يخليك يا غالى ديما منورنى بردودك الحلوه فى مواضيعى
منور بجد :)

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


الله يخليك يا غالى على الرد الجميل والدعوه الاجمل
منور ،،:)

[الشبح]

روعة يالغالي والله من زمن مشفتش حلاوة في شرح css زيك قبل كدة
الواحد يقلق منك بعدكدى^^

[قناص جوبا]

الله يخليك يا غالى
منور بردك الجميل

[ήsέť άήsάќ]

الله يعطيك العافية يا الغالي :9:

و في انتضار جديدك الرائع ,,

[EgYZooM]

سلمت يمناك اخى

جزيت خيرا

[MaX_10]

يسلمووووو اخوي