يتضمن تطوير الويب جوانب مختلفة ، أحدها تصميم عناصر واجهة المستخدم. يعد الإدخال أحد العناصر الأكثر استخداما لصفحات الويب ، مما يسمح للمستخدم بإدخال البيانات. ومع ذلك ، قد تكون أنماط حقل الإدخال القياسية بسيطة وغير جذابة.
مع كس ، يمكنك بسهولة تغيير نمط الإدخال وتحويله إلى عنصر شكل أكثر جاذبية وحديثة. للقيام بذلك ، هناك مجموعة كاملة من الميزات والخصائص التي يمكن تطبيقها على عنصر الإدخال للحصول على المظهر والسلوك المطلوبين.
على سبيل المثال ، يمكنك تغيير لون وخط وحجم وشكل حقل الإدخال. يمكنك أيضا إضافة تأثيرات مختلفة عند التمرير فوق المؤشر أو عند إدخال البيانات لجعل عنصر التفاعل أكثر ملاءمة وفهما للمستخدمين.
- كيفية أسلوب الإدخال باستخدام كس
- تغيير لون الإدخال والخلفية
- تغيير خط وحجم النص في الإدخال
- إضافة إطار وإدخال الظل
- تغيير موضع ومحاذاة النص في الإدخال
- إضافة الرسوم المتحركة عند التفاعل مع المدخلات
- سؤال وجواب
- هل من الممكن تغيير نمط الإدخال باستخدام المغلق?
- كيف يمكنني تغيير الخلفية ولون النص للإدخال باستخدام المغلق?
- كيف يمكنني تغيير الخط للإدخال باستخدام المغلق?
- هل من الممكن تعيين أنماط مختلفة لأنواع المدخلات المختلفة?
- هل من الممكن تغيير حجم المدخلات باستخدام المغلق?
كيفية أسلوب الإدخال باستخدام كس
غالبا ما يرغب مطورو الويب في تغيير المظهر القياسي لعنصر الإدخال على صفحات الويب الخاصة بهم. يمكن أن يكون هذا مفيدا لتحسين تجربة المستخدم أو لمطابقة تصميم الموقع. في هذه المقالة ، سوف ننظر في عدة طرق لأسلوب الإدخال باستخدام كس.
1. باستخدام فئة أو معرف
واحدة من الطرق الأكثر شيوعا لنمط الإدخال هو تعيين فئة أو معرف لذلك وتطبيق أنماط كس عليه. على سبيل المثال:
/ * المغلق */
. مدخلاتي {
الحدود: 1 بكسل الصلبة # سك;
الحشو: 5 بكسل;
حجم الخط: 16 بكسل;
}
2. تغيير لون الخلفية والخط
هناك طريقة أخرى لإدخال النمط وهي تغيير ألوان الخلفية والخط. يمكن القيام بذلك باستخدام خصائص لون الخلفية واللون. على سبيل المثال:
3. تغيير الحجم والشكل
يمكنك أيضا تغيير حجم وشكل الإدخال باستخدام خصائص العرض والارتفاع ونصف قطر الحدود. على سبيل المثال:
4. تغيير الموقف والمحاذاة
باستخدام خصائص الهامش ومحاذاة النص ، يمكنك تغيير موضع ومحاذاة الإدخال على الصفحة. على سبيل المثال:
5. تغيير النمط عند التركيز
طريقة فعالة لأسلوب إدخال هو تغيير مظهره عندما تكون في التركيز. يمكن القيام بذلك باستخدام فئة زائفة:التركيز. على سبيل المثال:
هذه ليست سوى بعض الطرق لأسلوب الإدخال باستخدام كس. تتضمن الميزات الأخرى تغيير الخط أو إضافة الرموز أو استخدام صور الخلفية. من المهم أن نتذكر أنه عند إدخال التصميم باستخدام كس ، تحتاج إلى ضمان إمكانية الوصول جيدة وتأخذ في الاعتبار تداخل أنماط المتصفح القياسية.
تغيير لون الإدخال والخلفية
لتغيير لون الإدخال والخلفية ، يمكننا استخدام خصائص كس.
لتغيير لون النص داخل الإدخال ، يمكننا استخدام خاصية اللون. على سبيل المثال:
المدخلات {
اللون: أحمر;
}
سيؤدي ذلك إلى جعل النص داخل الإدخال أحمر.
لتغيير خلفية الإدخال ، يمكننا استخدام خاصية لون الخلفية. على سبيل المثال:
المدخلات {
الخلفية اللون: ليتبلو;
}
سيؤدي هذا إلى تعيين خلفية زرقاء فاتحة للإدخال.
بالإضافة إلى ذلك ، يمكنك تغيير لون حد الإدخال باستخدام خاصية لون الحدود. على سبيل المثال:
المدخلات {
لون الحدود: أخضر;
}
سيؤدي هذا إلى تعيين حد الإدخال إلى اللون الأخضر.
لاحظ أنه يمكنك استخدام أي قيم اللون ، مثل أسماء الألوان (على سبيل المثال ، "الأحمر" أو "الأزرق") ، رموز عرافة (على سبيل المثال ، "#فف0000" للأحمر) أو قيم رغبا (على سبيل المثال ، " رغبا(255, 0, 0, 0.5)" للأحمر الشفاف).
هنا مثال كامل:
المدخلات {
اللون: أحمر;
الخلفية اللون: ليتبلو;
لون الحدود: أخضر;
}
سيؤدي هذا إلى تعيين لون النص الأحمر والخلفية الزرقاء الفاتحة والحدود الخضراء لجميع المدخلات على الصفحة.
تغيير خط وحجم النص في الإدخال
يمكن تغيير خط وحجم النص في حقل الإدخال باستخدام كس باستخدام خصائص عائلة الخط وحجم الخط.
مثال:
في هذا المثال ، سيتم تعيين خط النص في حقل الإدخال باسم" أريال ، بلا الرقيق " ، وحجمه سيكون 16 بكسل.
إضافة إطار وإدخال الظل
يمكنك إضافة حد وظل إلى عنصر الإدخال باستخدام خصائص كس مثل الحدود وظل الصندوق.
تسمح لك خاصية الحدود بتعيين نمط وعرض ولون الحدود. على سبيل المثال:
في هذا المثال ، يتم تثبيت إطار بسماكة 2 بكسل ونمط صلب ولون رمادي.
الخاصية مربع الظل يسمح لك لإضافة الظل إلى عنصر. على سبيل المثال:
في هذا المثال ، يتم تعيين الظل مع دائرة نصف قطرها 5 بكسل ، لون رغب(0 ، 0 ، 0) والشفافية 0.3.
يمكن دمج كل من هذه الخصائص لإنشاء عنصر إدخال أنيق ومذهل. على سبيل المثال:
في هذا المثال ، يحتوي عنصر الإدخال على إطار بسماكة 2 بكسل ولون رمادي ، بالإضافة إلى ظل بنصف قطر 5 بكسل ولون رغب(0 ، 0 ، 0) وشفافية 0.3.
تغيير موضع ومحاذاة النص في الإدخال
يمكن محاذاة النص داخل حقل الإدخال أفقيا أو رأسيا باستخدام خاصية محاذاة النص المغلق.
على سبيل المثال ، لمحاذاة النص داخل الإدخال أفقيا إلى اليسار:
المدخلات {
محاذاة النص: اليسار;
}
ومحاذاة النص أفقيا في المركز:
المدخلات {
محاذاة النص: المركز;
}
يمكنك أيضا تغيير المحاذاة الرأسية للنص داخل الإدخال باستخدام ارتفاع الخط:
خاصية الإدخال {
ارتفاع الخط: 30 بكسل;
}
هنا ، تشير القيمة 30 بكسل إلى ارتفاع سطر النص ، وسيتم محاذاة النص في منتصف حقل الإدخال.
بالإضافة إلى ذلك ، يمكنك تغيير لون النص وحجمه باستخدام خصائص اللون وحجم الخط:
المدخلات {
اللون: # فف0000;
حجم الخط: 16 بكسل;
}
هنا يشير #ف 0000 إلى اللون الأحمر للنص ، ويشير 16 بكسل إلى حجم الخط.
من المهم أن تتذكر أنه سيتم تطبيق هذه الأنماط على جميع عناصر الإدخال في الصفحة. إذا كنت ترغب في تطبيق الأنماط فقط على إدخال معين ، فأنت بحاجة إلى استخدام محددات كس.
على سبيل المثال ، لتطبيق الأنماط فقط على إدخال بفئة أو معرف معين ، يمكنك استخدام محددات الفئة أو المعرف:
المدخلات.صفي {
محاذاة النص: المركز;
}
إدخال # بلدي معرف {
ارتفاع الخط: 30 بكسل;
}
يشير صفي إلى فئة الإدخال ،ويشير # معرفي إلى معرف الإدخال.
وهكذا ، باستخدام كس ، يمكنك بسهولة تغيير موقف ومحاذاة النص داخل المدخلات ، فضلا عن لونه وحجم الخط.
إضافة الرسوم المتحركة عند التفاعل مع المدخلات
يمكن أن تؤدي إضافة الرسوم المتحركة عند التفاعل مع عنصر الإدخال إلى تحسين تجربة المستخدم بشكل كبير. يمكن أن يؤدي المظهر وتغيير الحجم واللون ، بالإضافة إلى التأثيرات المختلفة عند إدخال النص إلى جعل التفاعل مع النموذج أكثر إثارة للاهتمام وجاذبية للمستخدمين.
لتحقيق تأثير الحركة عند التفاعل مع الإدخال ، يمكنك استخدام خاصية كس: تحوم. تتيح لك هذه الخاصية تطبيق الأنماط على عنصر عند تحريك مؤشر الماوس فوقه. يمكنك أيضا استخدام الفئات الزائفة: التركيز و: نشط لوصف أنماط عنصر عند تنشيطه أو تركيزه.
مثال رمز للرسوم المتحركة عند التمرير فوق الإدخال:
الإدخال: تحوم عنصر {
لون الخلفية: أصفر;
الانتقال: لون الخلفية 0.5 ثانية;
}
في هذا المثال ، عند التمرير فوق عنصر الإدخال ، يتغير لون الخلفية إلى اللون الأصفر باستخدام خاصية لون الخلفية. يتم أيضا تعيين الرسوم المتحركة للانتقال بين الألوان باستخدام خاصية الانتقال. للوقت 0.لمدة 5 ثوان ، يتغير لون الخلفية بسلاسة إلى اللون الأصفر.
وبالمثل ، يمكنك إضافة رسوم متحركة لخصائص أخرى لعنصر الإدخال ، مثل الحجم والخط والإطار وما إلى ذلك.
من المهم ملاحظة أنه لاستخدام الرسوم المتحركة باستخدام كس ، تحتاج إلى دعم المتصفح. قد لا تدعم بعض إصدارات المتصفح القديمة بعض الخصائص والرسوم المتحركة.
سؤال وجواب
هل من الممكن تغيير نمط الإدخال باستخدام المغلق?
نعم ، يمكنك استخدام كس لتغيير نمط عنصر الإدخال. يتم ذلك باستخدام قواعد كس ، التي تحدد خصائص مختلفة لعنصر الإدخال ، مثل لون الخلفية ولون النص والخط وغيرها.
كيف يمكنني تغيير الخلفية ولون النص للإدخال باستخدام المغلق?
لتغيير لون الخلفية والنص لعنصر الإدخال باستخدام كس ، يمكنك استخدام لون الخلفية وخصائص اللون. على سبيل المثال ، لتعيين لون الخلفية أحمر ولون النص أبيض ، تحتاج إلى إضافة قاعدة كس التالية: الإدخال { لون الخلفية: أحمر ؛ اللون: أبيض؛}.
كيف يمكنني تغيير الخط للإدخال باستخدام المغلق?
لتغيير الخط لعنصر الإدخال باستخدام كس ، يمكنك استخدام خاصية عائلة الخط. على سبيل المثال ، لتعيين الخط أريال ، تحتاج إلى إضافة قاعدة كس التالية: الإدخال { الخط الأسرة: أريال؛}.
هل من الممكن تعيين أنماط مختلفة لأنواع المدخلات المختلفة?
نعم ، يمكنك تعيين أنماط مختلفة لأنواع مختلفة من عناصر الإدخال. للقيام بذلك ، استخدم سمة النوع في تركيبة مع محدد كس. على سبيل المثال ، لتعيين نمط لحقل نصي فقط ، يمكنك استخدام قاعدة كس التالية: الإدخال[النوع="نص"] { لون الخلفية: أصفر؛}.
هل من الممكن تغيير حجم المدخلات باستخدام المغلق?
نعم ، يمكنك استخدام كس لتغيير حجم عنصر الإدخال. للقيام بذلك ، يمكنك استخدام خصائص العرض والارتفاع. على سبيل المثال ، لتعيين عرض 200 بكسل وارتفاع 30 بكسل لعنصر الإدخال ، تحتاج إلى إضافة قاعدة كس التالية: الإدخال { العرض: 200 بكسل ؛ الارتفاع: 30 بكسل؛}.