تكليفات الدروس من [ 42 ] إلى [ 45 ]
[ 3 ] تكليفات على [ Transitions, Variables ]
التكليف 01
- تأكد أنك تستعمل نفس الألوان الموجودة في الشكل
- يجب عليك كتابة ال Prefixes للخواص التي تحتاج ل Prefix
- تأكد أن العنصر الأب يذهب للأعلى في نصف ثانية عند ال Hover
- تأكد أن العنصر الأبن يذهب للأسفل بعد الإنتظار نصف ثانية
التكليف 02
<div style="
background-color: red;
color: white;
padding: 20px;
border: 1px solid blue;
font-size: 80px;">
Hello Div
</div>- إستخدم البنية السابقة بدون التعديل عليها لعمل نفس الشكل
- تأكد أنك تستعمل نفس الألوان الموجودة في الشكل
- لديك الحرية في عمل ما تريد في ال CSS
- تأكد أن جملة Hello Div تغيرت إلى Elzero
- عرض العنصر هو 400px وهو موسط بطريقة عرضية
- حجم الخط هو 20px
ملحوظة
إستخدم ما تعلمته سابقا وإبحث عن كيفية إخفاء نص داخل عنصر فهناك طرق كثيرة
التكليف 03
<div>Element</div>
<div>Element</div>
<div>Element</div>:root {
--mainColor: #009688;
--mainPadding: 10px;
}
div {
???
}- إستخدم بنية ال HTML السابقة بدون التعديل عليها لعمل الشكل التالي
- في ال CSS لا تقم بالتعديل على جزء المتغيرات أبدا وقم بالتعديل على ال div Selector فقط
- تأكد أنك تستخدم المتغيرات لأننا سنقوم بإزالتها لاحقا
- بعد الإنتهاء تماما سنقوم بعمل بعض التعديلات للتأكد أنك قمت بعمل Fall Back لقيم المتغير
- قم بعمل إلغاء للعنصر :root مع المتغيرات داخله
- تأكد أن الشكل سيكون كما في الصورة التالية
