تكليفات CSS الدروس من 05 إلى 08

[ 4 ] تكليفات خاصة ب [ Background, Margin, Padding ]

إنضم لكورسات الأكاديمية وإستفيد من الخصم الخاص في البداية من هنا
نوصي بكورس تعلم أساسيات البرمجة من أكاديمية Codezilla من هنا
لحجز إستضافة من Hostinger والحصول على الخصم عن طريقي إتبع الشرح من هنا

من جوجل

المقاطع المطلوب مشاهدتها

الدروس من رقم 05 إلى رقم 08 من الدورة التعليمية الموجودة هنا

التكليف 01

  • إستخدم البنية السابقة لعمل المطلوب
  • ال Div عرضه هو 500px
  • قم بتوسيط ال Div داخل الصفحة بطريقة عرضية
  • قم بعمل هوامش داخلية قدرها 20px
  • قم بعمل خلفية لل Div لونها blueviolet
  • قم بتكرار السطر الخاص بالألوان بكل الطرق التالية [ RGB | HSL | Hex ]
  • قم بعمل Div آخر تحته بنفس الخلفية ولكن نسبة الشفافية Alpha Channel تكون النصف
  • قم بعمل Div آخر تحته بنفس الخلفية ولكن نسبة الشفافية Alpha Channel تكون 1 من 10

الصورة الخاصة بجميع التكليفات التالية يمكنك الحصول عليها من هنا

التكليف 02

  • إستخدم البنية السابقة لعمل المطلوب
  • ال Div طوله وعرضه هو 400px
  • قم بوضع الصورة الموجودة في بداية التكليفات خلفية للعنصر
  • في Shape 1 قم بجعل الخلفية لا تتكرر نهائيا
  • في Shape 2 قم بجعل الخلفية تتكرر طوليا فقط
  • في Shape 3 قم بجعل الخلفية تتكرر عرضيا فقط
  • في Shape 4 قم بجعل الخلفية تتكرر طوليا وعرضيا

التكليف 03

  • إستخدم البنية السابقة لعمل المطلوب
  • ال Div طوله وعرضه هو 400px
  • قم بوضع الصورة الموجودة في بداية التكليفات خلفية للعنصر
  • في Shape 1 قم بجعل الخلفية لا تتكرر نهائيا
  • في Shape 2 قم بجعل الخلفية تتكرر طوليا فقط ومكانها يكون ناحية اليمين
  • في Shape 3 قم بجعل الخلفية تتكرر عرضيا فقط ومكانها يكون ناحية الأسفل
  • في Shape 4 قم بجعل الخلفية تتكرر طوليا وعرضيا

التكليف 04

  • إستخدم البنية السابقة لعمل المطلوب
  • ال Div طوله وعرضه هو 400px
  • قم بوضع الصورة الموجودة في بداية التكليفات خلفية للعنصر
  • في Shape 1 قم بجعل الخلفية تملأ 80% من الطول والعرض الخاص بالعنصر
  • في Shape 2 قم بعمل الشكل مثل الصورة
  • في Shape 3 قم بعمل الشكل مثل الصورة
  • في Shape 4 قم بجعل الخلفية تأخذ 50% من طول وعرض العنصر وقم بتغيير مكانها

تسليم ومراجعة الحلول

الحلول النموذجية هي هدية للداعمين يمكنك الإنضمام للداعمين لترى جميع الحلول من هنا

من جوجل

0 تعليقات


    اترك تعليقاً