Front-end_CSS3 – Telegram
Front-end_CSS3
256 subscribers
101 photos
1 video
20 files
4 links
Download Telegram
لكن طالما أن كل النصوص ستحول إلى اللون الأبيض فسأكتب الخاصية في الـ form او الـ body
كلاهما صحيح
لاحظ ان النصوص تحولت للون الأبيض ما عدا الرابط
ملاحظة:
يتطلب الرابط تغير مباشر للون (في العنصر نفسه)
الان لنجعل خلفية الفورم شفافة
تحتاج عناصر الادخال والارسال إلى بعض التنسيق:
1- مدها بالعرض width
2- عمل هوامش وحواف
نريد مد حقول الادخال لتكون بنفس عرض الفورم او اقل قليلا
يمكنك الاستمرار بتجريب قياسات مثل 200px 300px 320px ولكن بدلا من هذه الطريقة هناك الطريقة المختصرة والاسهل وهي:
width:100%
1
لكن لاحظ انها ليست بالمنتصف تماما (المسافة التي على يمين حقول الادخال اصغر من تلك التي على اليسار
السبب يعود لان ال width ياخذ معاملين:
1- padding
2- border
ولاحظ في خصائص الفورم التي كتبناها سابقا حددنا ان الـ padding من اليمين واليسار = 20 ولديك ايضا الـ border الذي اخذ 1px
لنجرب تصفير الحواف padding
1
بمقدار 1 بكسل زادت وهي للborder
فما الحل؟؟
هناك حل بدائي وحل متقدم:
الحل البدائي في هذه المرحلة هي ان تجعل العرض اقل من 100%
الحل المتقدم كتابة الخاصية box-sizing: border-box; نشرحها بالتفصيل في وقتها
ايضاً لتعديل تصميم حقول الادخال تحتاج إلى:
1- زيادة المسافات بينهما (margin) و (padding)
2- استدارة حواف الحدود (border-radius)
3- جعل خلفية حقول الادخال شفافة
4- تعديل لون الـ placeholder
5- تعديل لون النص المدخل لاحقاً من قبل المستخدم
لاحظ ان الـ color داخل حقل الادخال تخص النص الذي سيدخله المستخدم
بقي تغير لون الـ placeholder

الـ placeholder سمة موجودة داخل العنصر input وللدخول اليها وعمل تغيرات تحتاج إلى كتابة الرمز ::
input::placeholder{
color:#fff;
}