أشكال نمط مع المغلق

تعلم لتحسين مظهر موقع الويب الخاص بك

يُعد تعلم كيفية تنسيق النماذج باستخدام CSS طريقة رائعة لتحسين مظهر موقعك على الويب. يمكن القول إن أشكال HTML هي من بين أبشع الأشياء الموجودة في معظم صفحات الويب. انهم غالبا ما تكون مملة ونفعية ولا تقدم الكثير في طريقة الاسلوب.

مع CSS ، يمكن لهذا التغيير. يمكن أن يؤدي الجمع بين CSS وعلامات النماذج الأكثر تقدمًا إلى تقديم بعض الأشكال الجميلة.

تغيير الألوان

كما هو الحال مع النص ، يمكنك تغيير ألوان المقدمة والخلفية لعناصر النموذج.

هناك طريقة سهلة لتغيير لون الخلفية لكل عنصر من عناصر النموذج تقريبًا وهي استخدام خاصية لون الخلفية على علامة الإدخال. على سبيل المثال ، يطبق هذا الرمز لون خلفية زرقاء (# 9cf) على جميع العناصر.

إدخال {
لون الخلفية: # 9cf؛
اللون: # 000؛
}

لتغيير لون خلفية بعض عناصر النماذج ، فقط قم بإضافة textarea واختر النمط. فمثلا:

إدخال ، textarea ، حدد {
لون الخلفية: # 9cf؛
اللون: # 000؛
}

تأكد من تغيير لون النص إذا جعلت لون الخلفية غامقًا. تساعد الألوان المتباينة في جعل عناصر النموذج أكثر وضوحًا. على سبيل المثال ، يكون النص الموجود على لون خلفية داكن أحمر أكثر سهولة في القراءة إذا كان لون النص أبيض. على سبيل المثال ، يضع هذا الرمز نصًا أبيض على خلفية حمراء.

إدخال ، textarea ، حدد {
لون الخلفية: # c00؛
اللون: #fff؛
}

يمكنك أيضًا وضع لون خلفية على علامة النموذج نفسها. تذكر أن علامة النموذج هي عنصر كتلة ، بحيث يملأ اللون في المستطيل بأكمله ، وليس فقط مواقع العناصر.

يمكنك إضافة خلفية صفراء لعنصر كتلة لجعل المنطقة مميزة ، مثل هذا:

شكل {
لون الخلفية: #ffc؛
}

أضف الحدود

كما هو الحال مع الألوان ، يمكنك تغيير حدود عناصر النموذج المختلفة. يمكنك إضافة حد واحد حول النموذج بأكمله. تأكد من إضافة المساحة المتروكة ، أو سيتم تشويش عناصر النموذج الخاصة بك بجوار الحد.

إليك مثال على التعليمة البرمجية لحد أسود 1 بكسل مع 5 وحدات بكسل من الحشو:

شكل {
border: 1px solid # 000؛
الحشو: 5px؛
}

يمكنك وضع حدود حول أكثر من مجرد النموذج نفسه. قم بتغيير حدود عناصر الإدخال لجعلها مميزة:

إدخال {
border: 2px dashed # c00؛
}

كن حذرًا عندما تضع حدودًا على مربعات الإدخال لأنها تبدو أقل من مربعات الإدخال ، وقد لا يدرك بعض الأشخاص أنه يمكنهم ملء النموذج.

الجمع بين ميزات النمط

من خلال تجميع عناصر النموذج الخاصة بك مع التفكير وبعض CSS ، يمكنك إعداد شكل جميل يتكامل مع تصميم وتخطيط موقعك.