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

قناص جوبا · #1 31-01-2010, 07:57 PM

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

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

هنحط فى جزء ال 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

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

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

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

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

الطريقه الثالثه والاكثر احترافيه وسهوله وهى بالخاصيه

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

الاكواد فى المرفقات بالترتيب 1 و 2 و3
الموضوع الاصلى
منتديات فى بى ايجى
منتديات فى بى ايجى التطويرية

مُجَاهِد · #2 31-01-2010, 11:52 PM

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

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

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

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

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

ابو فاطمة · #3 01-02-2010, 10:03 PM

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

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

قناص جوبا · #4 01-02-2010, 11:25 PM

اقتباس:

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

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

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

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

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

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

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

اقتباس:

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

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

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

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

أبو شهد · #5 02-02-2010, 05:58 AM

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

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

قناص جوبا · #6 03-02-2010, 05:12 AM

اقتباس:

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

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

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

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

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
كود نص رائع متحرك + صورة ( يحتاجه كل منتدى )	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

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

لغات برمجة مواقع