1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
  2. الملاحظات
    عزيزي زائر تم اطلاق الموقع الرسمي لبرنامج الاختراق Spy-Note
    إستبعاد الملاحظة
  1. منير Guest

    عضو منذ:
    بسم الله الرحمن الرحيم

    . : : السلام عليكم و رحمة الله و بركاته : : .
    ! اليوم عندي لكم شرح !
    . : : شرح عمل زر متحرك بتقنية Css : : .
    البرنامج المستخدم
    Microsoft Expression Web
    -
    [ نتيجة الدرس ]
    V
    [​IMG]

    . : : الشرح : : .
    عند فتح صفحة Html
    تكون الاكواد كذا :



    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>32كـراك للتصميم</title></head><body></body></html>

    -----------------------
    نقوم بإضافة



    كود PHP:
    <style></style>

    -----------------------
    داخل الوسم :



    كود PHP:
    <head></head>

    -----------------------
    فيصبح الكود كاملاً كذا :



    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>32 كـراك للتصميم</title><style></style></head><body></body></html>

    -----------------------
    الان
    نضيف بين



    كود PHP:
    <body></body>

    هذا الكود


    كود PHP:
    <p></p

    -----------------------
    و نعطي الكود كلاس خاص فيه
    و سمينا الكلاس krak
    فيصير :



    كود PHP:
    <class="krak"></p>

    -----------------------
    و الكلام اللي بيكون بالزر
    نكتب مثلا كـراك للتصميم
    فيكون كذا :



    كود PHP:
    <class="krak">كراك للتصميم</p>

    و الان خلصنا من اكواد الزر
    باقي اضافة الخصائص له
    من الوان و حجم و حدود . . . . . الخ

    ----------------------------------------------
    -----------------------
    --------------
    طبعا الخصائص تكون داخل الوسم :



    كود PHP:
    <style></style>

    -----------------------
    الان بنضيف له
    خواص له
    و بالترتيب

    1 - الحدود .
    2 - الطول .
    3 - العرض .
    4 - نوع الخط .
    5 - حجم الخط .
    6 - الخلفية .
    7 - لون الخط .
    8 - التباعد .
    9 - المحاذاه .
    10 - الموضع .

    ---
    نفتح كتابة الخواص بـ



    كود PHP:
    .krak{

    ثم نكتب هذي الخواص :


    كود PHP:
        border:1px #999999 dashed;    border:1px #999999 dashed;    height:15px;    width:80px;    font-family:Tahoma;    font-size:12px;    background:#F8F8F8;    color:#CC0099;    padding:0px 0px 0px 0px;    text-align:center;    position:relative;

    و نغلقها بـ


    كود PHP:
    }

    فيصير كود الصفحة كامل كذا :


    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>كـراك للتصميم</title><style>.krak{    border:1px #999999 dashed;    height:15px;    width:80px;    font-family:Tahoma;    font-size:12px;    background:#F8F8F8;    color:#CC0099;    padding:0px 0px 0px 0px;    text-align:center;    position:relative;}</style></head><body><p class="krak">كراك للتصميم</p></body></html>

    --------------------------------------------------------------------------------------------

    و الان صار عندنا زر ثابت
    لكن لا يوجد عليه رابط
    ولا يوجد عليه تاثير عند المرور
    الان
    نبدا باضافة الخواص عند مرور الماوس عليه
    +
    نضيف له ارتباط تشعبي
    ---
    نقوم باضافة هوفر للزر و اعطائه خواص له عند مرور الماوس عليه
    طبعا

    انا عطيته خاصية
    1 - تغير لون الخط .
    2 - تغير لون الخلفية .
    3 - تسطير للخط .
    و هذي هي الاكواد :



    كود PHP:
    .krak:hover{    background:#FFFFCC;    color:#009933;    text-decoration:underline;}

    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>كـراك للتصميم</title><style>.krak{    border:1px #999999 dashed;    height:15px;    width:80px;    font-family:Tahoma;    font-size:12px;    background:#F8F8F8;    color:#CC0099;    padding:0px 0px 0px 0px;    text-align:center;    position:relative;}.krak:hover{    background:#FFFFCC;    color:#009933;    text-decoration:underline;}</style></head><body><p class="krak">كراك للتصميم</p></body></html>

    -------

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



    كود PHP:
    <class="krak"><class="rab6" href="http://www.iq-team.org"></a>كراك للتصميم</p>

    rab6 : هذا الكلاس للرابط .
    --------------
    الان
    نعطي الرابط خصائص له
    و بتكون هذي
    اهم شي نعطيه نفس طول + عرض الزر
    و بتكون كذا



    كود PHP:
    a.rab6{    height:15px;    width:80px;    display:block;    position:absolute;}

    -------------
    و هذي الاكواد كامله لدرسنا



    كود PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /><title>كـراك للتصميم</title><style>.krak{    border:1px #999999 dashed;    height:15px;    width:80px;    font-family:Tahoma;    font-size:12px;    background:#F8F8F8;    color:#CC0099;    padding:0px 0px 0px 0px;    text-align:center;    position:relative;}.krak:hover{    background:#FFFFCC;    color:#009933;    text-decoration:underline;}a.rab6{    height:15px;    width:80px;    display:block;    position:absolute;}</style></head><body><p class="krak"><a class="rab6" href="http://www.iq-team.org"></a>كراك للتصميم</p></body></html>

    أخـوكم
    :


     
    جاري تحميل الصفحة...
  2. Error
    rankrank
    V • I • P

    عضو منذ:
    ‏3 ابريل 2012
    عدد المشاركات:
    71
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    30
    الإقامة:
    C:\Program Files
    نظام التشغيل:
    Linux
    رد: درس بسيط عمل زر بتقنية Css روعه

    مبدع اخي


    :{8}:​
     
  3. آرْ بْيْ جْيْ ڪْرْڪْوْڪْ
    DeveloPer Plus

    عضو منذ:
    ‏24 أغسطس 2015
    عدد المشاركات:
    140
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    40
    نظام التشغيل:
    windows 8
    اللغة البرمجية:
    Visual Basic
    رد: درس بسيط عمل زر بتقنية Css روعه

    مبدع+استمر
     
  4. SerAno
    rank
    Developer

    عضو منذ:
    ‏19 ديسمبر 2014
    عدد المشاركات:
    49
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    20
    نظام التشغيل:
    Linux
    اللغة البرمجية:
    PHP
    رد: درس بسيط عمل زر بتقنية Css روعه

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

مشاركة هذه الصفحة

جاري تحميل الصفحة...