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

DeveloPer Plus
إنضم
6 نوفمبر 2014
المشاركات
213
الإعجابات
11
النقاط
50
الإجابات المقدمة: 0
#1

كيف الصحة اخوان :yum
اتمنى تكونوا بصحة وعافية :blush:
.: درس اليوم :.
:neutral:
:scream:عمل شريط تقدم [Prgoress Bar] بأستعمال [HTML & CSS] :scream:

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


:no_mouth: .:: لمشاهدة العمل ::. :no_mouth:

:skull:
الروابط تضهر للاعضاء فقط سجل دخولك أو قم بالتسجيل الآن.
: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:
 


غير متصل

V • I • P
إنضم
10 يناير 2014
المشاركات
271
الإعجابات
47
النقاط
75
الإقامة
NEDRLALND
الإجابات المقدمة: 0
#2
وعليـــكم سلام ورحمة الله
بارك الله بيك ياطيب شرح ممتاز ومتعوب علية بل توفيق ياطيب
 


غير متصل

DeveloPer Plus
إنضم
6 نوفمبر 2014
المشاركات
213
الإعجابات
11
النقاط
50
الإجابات المقدمة: 0
#3


غير متصل

Mira Mrmr

.::|| زهره منتدى عراق تيم ||::.

V • I • P
إنضم
9 يوليو 2015
المشاركات
655
الإعجابات
141
النقاط
465
الإقامة
Baghdad
الإجابات المقدمة: 1
#4
عاشت ايدك
 


غير متصل

موقوف لمخالفة الشروط
إنضم
1 فبراير 2016
المشاركات
246
الإعجابات
49
النقاط
75
الإقامة
العراق
الإجابات المقدمة: 0
#5
بارك الله بيك شرح متعوب عليه
وفقك الله
 


غير متصل

DeveloPer Plus
إنضم
6 نوفمبر 2014
المشاركات
213
الإعجابات
11
النقاط
50
الإجابات المقدمة: 0
#7


عمل شريط تقدم  [Prgoress Bar]  بأستعمال [HTML & CSS]