نقية CSS3 تصميم الشكل أصبحت أكثر شعبية. له عيوبه ، ولكن يضيع وقت التحميل المتزايد من تراكب JS التقليدي أعشر الثواني عند الحديث عن التحسين لتحقيق أقصى قدر من جمهورك بأكمله. معظم أشكال مستقيمة إلى حد ما والاستفادة فقط المدخلات والنصوص المناطق بدلا من أجهزة الراديو و خانات الاختيار التي تخلق التحدي الخاصة بهم.
المثال أدناه هو مجرد عينة صغيرة من ما يمكن القيام به. لا تخف من إضافة تدرجات أو لون الخلفية إلى النموذج. أركز على مظهر رمادي قياسي لمعظم العناصر لأنه يرضي جمهورًا أوسع من كونه لونًا محددًا. يمكنك اللعب مع الظل ولون الخلفية لإضافة نظرة مختلفة تماما إلى موقع الويب الخاص بك. إذا كان لديك موقع على شبكة الانترنت المظلمة ، أقترح مبادلة رمز النموذج المغلق لمزج والبوب على خلفية مظلمة. فقط أضف هذا CSS إلى ورقة النمط الخاص بك على الفور نمط أي شكل.
الإدخال {
الحشو: 10px؛
-webkit- الحدود-نصف القطر: 4px؛
-khtml-الحدود-نصف القطر: 4px؛
-moz-الحدود-نصف القطر: 4px;
الحدود- نصف القطر: 4px؛
-webkit-box-shadow: 0 0 5px #444؛
-moz-مربع-الظل: 0 0 5px #444؛
مربع الظل: 0 0 3px #444؛
الحدود: 1px #fff الصلبة؛
}
منطقة النص {
الحشو: 15px؛
الحدود: 1px #fff الصلبة؛
-webkit- الحدود-نصف القطر: 4px؛
-khtml-الحدود-نصف القطر: 4px؛
-moz-الحدود-نصف القطر: 4px;
الحدود- نصف القطر: 4px؛
-webkit-box-shadow: 0 0 5px #444؛
-moz-مربع-الظل: 0 0 5px #444؛
مربع الظل: 0 0 10px #444؛
}
الإدخال[type="text"]:hover، منطقة النص:hover {
الحدود: 1px #233567 الصلبة؛
}
النموذج الافتراضي بدون CSS. يبدو وكأنه شكل ممل جدا بالنسبة لي!
الآن إذا أضفنا CSS، يمكننا حقا تعزيز المظهر العام للنموذج. هذا النموذج هو أكثر إثارة بكثير! وهو يعطي شعورا أكثر تحديثا وحداثة مع زوايا مدورة، والتظليل لطيف، والحشو الذي يعطي انطباعا أكبر. هذا النمط من النموذج يناسب الكثير من المواقع ، لكنه بالتأكيد لا يصلح لكل موقع. وآمل أن تستمتع تخصيص هذا النموذج لذوقك.
CSS على النموذج يجعل تأثير كبير على مظهر الويب الخاص بك. إذا كنت ترغب في تعزيز النموذج الخاص بك أكثر، يمكنك تخصيص مع الخصائص الأخرى التي تجد في الدروس هنا: لون الخلفية، التدرج، الحشو، أو حتى صورة، ولكن أعتقد أنك سوف تكون راضية فقط عن طريق إضافة القليل من CSS إلى stylesheet الخاص بك.