×

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

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

صورة 'قناص جوبا' الرمزية
قديمة 12 - 01 - 2010, 23:04
المشاركة 1
السلام عليكم النهارده قررت انه يكون درس احترافى وكل الناس نفسها تتعلمه
الدرس هيكون مقسم لتلت طرق
كل طريقه ليها وقت معين تتعمل فيه
الدرس التاسع عن كفيه عمل ازرر متحركه بطريقه احترافيه بتقنيه css
الطريقه الاولى :
اننا هنعمل الازرر منفصله بمعنى ان كل زر هيكون لوحده هنصممه بالفوتوشوب لوحده بلون اى كان وهو هو الزر بالظبط او غير حسب الحركه اللى احنا عاوزين نعملها
و الصورتين المصمين
الدرس التاسع عن كفيه عمل ازرر متحركه بطريقه احترافيه بتقنيه css الدرس التاسع عن كفيه عمل ازرر متحركه بطريقه احترافيه بتقنيه 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 
ونحط فيها رابط الصوره ولو الصوره المقاسات بتاعتها اكبر هنكبرها لو نفس المقاس هنتركها كما هى
وفى المرفقات الكود كامل للطريقه

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

رمز 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;

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

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

رمز 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
والاكواد فى المرفقات
الدرس التاسع عن كفيه عمل ازرر متحركه بطريقه احترافيه بتقنيه css
الاكواد فى المرفقات بالترتيب 1 و 2 و3
الموضوع الاصلى
منتديات فى بى ايجى
http://vbegy.info/vb
الملفات المرفقة
نوع الملف : zip lesson.zip (1.8 كيلوبايت, عدد مرات المشاهدة 240 مرة)
المشاهدات 10929 | التعليقات 47
قديمة 12 - 01 - 2010, 23:12
المشاركة 2
صورة 'ابو شدق' الرمزية
ابو شدق
.:: عضو شرف ::.
تاريخ الإنضمام: 23 - 02 - 2005
رقم العضوية : 1857
العمر: 44
المشاركات: 3,620
3
افتراضي
بارك الله فيك
درس رائع
يقول آينشتاين : "لا يمكن حل مشكلة باستخدام العقلية نفسها التي أنتجتها"

حللونا وانتم بحل
قديمة 12 - 01 - 2010, 23:48
المشاركة 3
مليون خآطر
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 10 - 2009
رقم العضوية : 71851
المشاركات: 768
قديمة 12 - 01 - 2010, 23:53
المشاركة 4
صورة 'قناص جوبا' الرمزية
قناص جوبا
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 07 - 2009
رقم العضوية : 66088
الدولة : ام الدنيا
العمر: 29
المشاركات: 1,140
1
افتراضي
واياك يا غالى
منور ،،

طيب هو فيه تلت طرق افهم اى طريقه تكون سهله وتعجبك
الفكره كلها فى عمل ازرر متحركه على التصميم بتاعك يعنى مثلا عندك هيدر فيه ازرر وعاوز تعملها متحركه تستخدم الطريقه الاخيره وهكذا حسب كل تصميم بيكون ليه طريقه معينه
قديمة 12 - 01 - 2010, 23:58
المشاركة 5
صورة 'B.MuStaPha' الرمزية
B.MuStaPha
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 10 - 2009
رقم العضوية : 70505
الدولة : الجزائر و فلسطين
العمر: 23
المشاركات: 3,735
افتراضي
شكرا لك ابو حميد ما قصرت....,,,
قديمة 13 - 01 - 2010, 00:00
المشاركة 6
FreeStyler
:: عضـــو::
تاريخ الإنضمام: 15 - 10 - 2009
رقم العضوية : 70303
الدولة : Cairo - Egypt
المشاركات: 59
افتراضي
رائع يا غالي
ودرس منتظر من فتره
بالتوفيق
قديمة 13 - 01 - 2010, 01:58
المشاركة 7
صورة 'قناص جوبا' الرمزية
قناص جوبا
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 07 - 2009
رقم العضوية : 66088
الدولة : ام الدنيا
العمر: 29
المشاركات: 1,140
1
قديمة 15 - 01 - 2010, 01:40
المشاركة 8
صورة 'Darkahmed93' الرمزية
Darkahmed93
:: عضو نشيط ::
تاريخ الإنضمام: 22 - 08 - 2009
رقم العضوية : 69498
الدولة : Jordan - Amman
المشاركات: 2,270
افتراضي
مبدع كعادتك ابو حميد .....
الف شكر ليك
قديمة 15 - 01 - 2010, 05:02
المشاركة 9
صورة 'psd-web.net' الرمزية
psd-web.net
:: عضو جديد ::
تاريخ الإنضمام: 14 - 01 - 2010
رقم العضوية : 75550
الدولة : EGY
المشاركات: 24
افتراضي
تسلم يا اخي القناص
علي الشرح
قديمة 15 - 01 - 2010, 06:23
المشاركة 10
صورة 'darzd.com' الرمزية
darzd.com
:: عضو نشيط ::
تاريخ الإنضمام: 14 - 01 - 2010
رقم العضوية : 75040
الدولة : عالمي الخاص
العمر: 38
المشاركات: 826
افتراضي
سلمت اناملك على الشرح الرائع
اوفيت ووفيت وابدعت في اسلوبك
تقبل مروري في صفحتك اخي العزيز
شبكة التواصل الاجتماعيه
Www.altwadl.net

الواتس اب
0557223327
971557223327
قديمة 15 - 01 - 2010, 10:18
المشاركة 11
صورة '3esg.com' الرمزية
3esg.com
:: عضو نشيط ::
تاريخ الإنضمام: 04 - 02 - 2008
رقم العضوية : 51899
الدولة : مكة
المشاركات: 1,644
5
افتراضي
شوف طال عمرك .. انا تعبت الين طبقت الدرس هذا والحمدلله كلو " فل الفل" .~

لكن انا من زمآن عندي استفسار في داخلي يجول يعني .~

" دائماً افكر اسوي مربع "

سواء افقي او عامودي : فيه عدد ازرار ..

ولكن انا ماريد اكتب على الصورة نفسها واضغط الرابط عليه ..

انا ابي الرابط يكون نص " داخل الصورة " نص وتتغير الخلفية بمرور الماوس ..

مثآل على الخلفية والنص ( بشكل افقي ) :
http://www.traweq.com/vb/index.php

" اعلى ازرار تراويق " ..~

بالنسبة للازرار العاموديه :
http://www.meznh.com/
القوائم الجانبيه في اليمين واليسار ..~

لو تسوي درس لـ كذا ..

نكون شاااااااكرين كل الشكر ^_^

الله يعطيك العافية شرحك ممتاز ..والله ..

وتعجبني طريقة شرحك سهله جداً

تحيتي لك ^_^
سبحآنك اللهم وبحمدك ، سبحان الله العظيم
قديمة 15 - 01 - 2010, 12:38
المشاركة 12
صورة 'عمرو عبد العزيز' الرمزية
عمرو عبد العزيز
.:: عضو متألق ::.
تاريخ الإنضمام: 23 - 08 - 2009
رقم العضوية : 69768
الدولة : -[*]_[*]- WebDesigner
العمر: 29
المشاركات: 6,966
2
افتراضي
بارك الله فيك اخوى درس وايد هام ورائع
قديمة 15 - 01 - 2010, 15:08
المشاركة 13
صورة 'قناص جوبا' الرمزية
قناص جوبا
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 07 - 2009
رقم العضوية : 66088
الدولة : ام الدنيا
العمر: 29
المشاركات: 1,140
1
افتراضي
سلمت اناملك على الشرح الرائع
اوفيت ووفيت وابدعت في اسلوبك
تقبل مروري في صفحتك اخي العزيز
الله يخليك يا غالى
منورنى بردك الجميل

شوف طال عمرك .. انا تعبت الين طبقت الدرس هذا والحمدلله كلو " فل الفل" .~

لكن انا من زمآن عندي استفسار في داخلي يجول يعني .~

" دائماً افكر اسوي مربع "

سواء افقي او عامودي : فيه عدد ازرار ..

ولكن انا ماريد اكتب على الصورة نفسها واضغط الرابط عليه ..

انا ابي الرابط يكون نص " داخل الصورة " نص وتتغير الخلفية بمرور الماوس ..

مثآل على الخلفية والنص ( بشكل افقي ) :
http://www.traweq.com/vb/index.php

" اعلى ازرار تراويق " ..~

بالنسبة للازرار العاموديه :
http://www.meznh.com/
القوائم الجانبيه في اليمين واليسار ..~

لو تسوي درس لـ كذا ..

نكون شاااااااكرين كل الشكر ^_^

الله يعطيك العافية شرحك ممتاز ..والله ..

وتعجبني طريقة شرحك سهله جداً

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

بارك الله فيك اخوى درس وايد هام ورائع
واياك يا غالى
منور ،،
قديمة 19 - 01 - 2010, 23:17
المشاركة 14
صورة 'Power4Tec.com' الرمزية
Power4Tec.com
:: عضو فعال ::
تاريخ الإنضمام: 21 - 10 - 2006
رقم العضوية : 27008
المشاركات: 187
افتراضي
درس رائع جدا
وتم التقيم
قديمة 21 - 01 - 2010, 04:13
المشاركة 15
صورة 'قناص جوبا' الرمزية
قناص جوبا
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 07 - 2009
رقم العضوية : 66088
الدولة : ام الدنيا
العمر: 29
المشاركات: 1,140
1
 
اضافة رد
 

الدرس الاول من دورة ترايدنت لتصميم الستايلات بالcss [الخطوه الثانية][ورشة] إستايل متعدد الألوان

أدوات الموضوع ابحث في الموضوع
ابحث في الموضوع:

البحث المتقدم
طرق العرض


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 00:16.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

جميع الحقوق محفوظة Traidnt 2019
  • 00966138651070
  • 00966138648289
  • 2051033691
Powered by vBulletin® Version 3.8.11 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd
SEO by vBSEO ©2011, Crawlability, Inc.