معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
النتائج 1 إلى 1 من 1

الموضوع: الازرار التأشيرية المتحركة .. [للمتقدمين]

  1. #1
    أدارى
    الصورة الرمزية HVIPS4


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 6
    الدولة: Cairo
    المشاركات: 1,979
    HVIPS4 غير متواجد حالياً

    الازرار التأشيرية المتحركة .. [للمتقدمين]


    السلام عليكم ورحمة الله وبركاته
    درس مهم لتقنية css
    و هو الازرار و اذا اشرت عليها ماذا يحصل و بعد الضغط ماذا يتغير اللون

    هذه بختصار درسنا اليوم
    قبل كل شئ يرجى تصميم زرين مثل الموجود بالمثال او باي شكل اخر


    الطريقة بسيطة جدا
    بعد تصميم الزرين ..

    نقول بعمل 3 خطوات فقط ..

    نضيف وسوم داف للزر الي بنعمله
    و نقول بكتابة اكواده

    الداف راح نكتب عليه كلاس و نسمي الكلام bot

    كود PHP:
                           <body>
    <
    div class="bot">
    </
    div>
    </
    body
    نذهب الأن كتابة اكواد css
    ب3 خطوات

    الأولى :
    استدعاء الصورة و تضبيط موقعها و مقاسها .
    طبعا انا كتبتها

    كود PHP:
                               background-image:url('bto/bot1.png');
        
    height:32pxwidth:107px;
        
    position:absolute;
        
    left:50%; top:100px
    الشرح حسب الألوان :

    هذه الكود بتقنية css اذا بتحط صورة معناها خلفية الصورة .
    مسار الصورة
    عرض الصورة
    طول الصورة
    تقنية position و الي هي التحكم بموقع الصورة او اي شئ
    مسافة البعد بين الاعلى و الصورة
    مسافة البعد بين اليسار و الصورة

    بعد الكتابة نضيف كلاس اخر
    تحته بأسم
    bot:visited : و هذه بعد الضغط عليه ( يعني عند زيارة الصفحة )
    طبعا الرصاصي bot هذه اسم الكلاس . و نضع داخل التوزيع نفس الي اضفناه داخل التوزيع bot بالضبط

    و تحته نضيف
    bot:hover : و هذه عن التأشير للزر .
    طبعا الرصاصي bot هذه اسم الكلاس . و نضع داخل التوزيع نفس الي اضفناه داخل التوزيع bot بالضبط


    الكود كامل يصبح
    هذه توزيع css

    كود PHP:
                           .bot{
        
    background-image:url('bto/bot1.png');
        
    height:32pxwidth:107px;
        
    position:absolute;
        
    left:50%; top:100px;
    }


      [
    IMG]http://cdn5.tribalfusion.com/media/37536.gif[/IMG]    
    .bot:visited{
        
    background-image:url('bto/bot2.png');
        
    height:32pxwidth:107px;
        
    position:absolute;
        
    left:50%; top:100px;

    }

    .
    bot:hover{
        
    background-image:url('bto/bot2.png');
        
    height:32pxwidth:107px;
        
    position:absolute;
        
    left:50%; top:100px;


    اما الكلاسات


    كود PHP:
                           <div class="bot">
    </
    div>
    </
    body
    مثال تطبيقي :
    هنا


    بالمرفق الملف مع الصور ..
    الملفات المرفقة
    • نوع الملف: zip css.zip‏ (21.7 كيلوبايت, 68 مشاهدات)

 

ضوابط المشاركة

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