1. Mustafa Moshkela

    Mustafa Moshkela DeveloPer Plus

    الأنتساب:
    ‏6 نوفمبر 2014
    المشاركات:
    213
    الإعجابات المتلقاة:
    10
    نقاط الجائزة:
    18
    الوظيفة:
    طالب
    [​IMG]
    كيف الصحة اخوان :yum
    اتمنى تكونوا بصحة وعافية :blush:
    .: درس اليوم :.
    :neutral:
    :scream:عمل شريط تقدم [Prgoress Bar] بأستعمال [HTML & CSS] :scream:

    مثل هذا الي بالصورة :kissing_heart:

    [​IMG]
    :no_mouth: .:: لمشاهدة العمل ::. :no_mouth:

    :skull:http://w3courses.com/Progress.html :skull:

    :grinning: .:: لمشاهدة الدرس على اليوتيوب ::. :grinning:



    :joy:.:: كود الدرس للأطلاع عليه ::. :joy:

    كود HTML:
    <html>
    <head>
    <title>ProgressBar</title>
    <style>
    *{
      padding: 0;
      margin: 0;
    }
    body{
      background: #f9f9f9;
    }
    #ProgressBar{
      background: #404040;
      width: 960px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 60px;
      color:#fff;
      text-align: center;
    }
    #ProgressBar .Progress{
      background: #D43F3F;
      padding: 10px;
      width: 77%;
      position: relative;
    }
    #ProgressBar .Progress:after{
      content: "CSS";
      position: absolute;
      right: -35px;
      top:64px;
      background: #D43F3F;
      padding: 20px;
    }
    #ProgressBar .Progress:before{
      content: "";
      width: 0;
      height: 0;
      border:20px solid transparent;
      border-bottom: 20px solid #D43F3F;
      position: absolute;
      right: -20px;
      top:25px;
    }
    
    </style>
    </head>
    <body>
    <div id="ProgressBar">
    <div class="Progress">77%</div>
    </div>
    </body>
    </html>
    
    
    :sob:الى هنا ينتهي الموضوع :sob:

    :innocent: في امان الله :innocent:
     
    أعجب بهذه المشاركة Mira
  2. جوني العراقي

    جوني العراقي V • I • P

    الأنتساب:
    ‏10 يناير 2014
    المشاركات:
    277
    الإعجابات المتلقاة:
    50
    نقاط الجائزة:
    28
    الوظيفة:
    حلاق
    الإقامة:
    NEDRLALND
    وعليـــكم سلام ورحمة الله
    بارك الله بيك ياطيب شرح ممتاز ومتعوب علية بل توفيق ياطيب
     
    أعجب بهذه المشاركة Mustafa Moshkela
  3. Mustafa Moshkela

    Mustafa Moshkela DeveloPer Plus

    الأنتساب:
    ‏6 نوفمبر 2014
    المشاركات:
    213
    الإعجابات المتلقاة:
    10
    نقاط الجائزة:
    18
    الوظيفة:
    طالب
    نورتني حبيبي :heart_eyes:
     
  4. Mira

    Mira .::|| Tale of Remorse ||::. مشرفات المنتدى

    الأنتساب:
    ‏9 يوليو 2015
    المشاركات:
    657
    الإعجابات المتلقاة:
    117
    نقاط الجائزة:
    43
    الجنس:
    أنثى
    الإقامة:
    Baghdad
    عاشت ايدك
     
    أعجب بهذه المشاركة Mustafa Moshkela
  5. مسہہٰتہہٰر بٰٰرايہٰمر

    مسہہٰتہہٰر بٰٰرايہٰمر ᎿᎻᎬ ᏞᎥᏫᏁ موقوف لمخالفة الشروط

    الأنتساب:
    ‏1 فبراير 2016
    المشاركات:
    288
    الإعجابات المتلقاة:
    67
    نقاط الجائزة:
    28
    الجنس:
    ذكر
    الوظيفة:
    طالب
    الإقامة:
    العراق
    بارك الله بيك شرح متعوب عليه
    وفقك الله
     
    أعجب بهذه المشاركة Mustafa Moshkela
  6. Mustafa Moshkela

    Mustafa Moshkela DeveloPer Plus

    الأنتساب:
    ‏6 نوفمبر 2014
    المشاركات:
    213
    الإعجابات المتلقاة:
    10
    نقاط الجائزة:
    18
    الوظيفة:
    طالب
    شكرا وردة
     
  7. Mustafa Moshkela

    Mustafa Moshkela DeveloPer Plus

    الأنتساب:
    ‏6 نوفمبر 2014
    المشاركات:
    213
    الإعجابات المتلقاة:
    10
    نقاط الجائزة:
    18
    الوظيفة:
    طالب
    حبيبي الغالي تسلم :heart_eyes:
    نورتني :sun:
     
    أعجب بهذه المشاركة مسہہٰتہہٰر بٰٰرايہٰمر

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