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

    Error V • I • P

    الأنتساب:
    ‏3 ابريل 2012
    المشاركات:
    76
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    8
    الإقامة:
    C:\Program Files
    رد: درس بسيط عمل زر بتقنية Css روعه

    مبدع اخي


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

    آرْ بْيْ جْيْ ڪْرْڪْوْڪْ DeveloPer Plus

    الأنتساب:
    ‏24 أغسطس 2015
    المشاركات:
    147
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    16
    رد: درس بسيط عمل زر بتقنية Css روعه

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

    SerAno Developer

    الأنتساب:
    ‏19 ديسمبر 2014
    المشاركات:
    50
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    رد: درس بسيط عمل زر بتقنية Css روعه

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

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