نماذج بريدية أنيقة في 5 دقائق

السبت 1 أغسطس 2009

يمكنك تصميم نماذج بريدية أنيقة (login, dashboard ..) في أقل من 5 دقائق.
مثال مباشر على الصفحة
نفس المثال ب HTML5

لديك صفحة دخول إلى لوحة تحكم في مشروعك مثلا، افتح المحرر وأنشئ صفحتين:

login.html
css/reset.css
css/login.css

استعمل ملف reset لتصفير الاعدادات الافتراضية ل Elements وأنصح باستعماله.

اختر لونا مختلفا للخلفية Body وليكن بدرجة خفيفة:

body {
	background:#f2f5ec;
}

ضع النموذج البريدي في وسط الصفحة:

#page {
	width:385px;
	margin:60px auto
}

<div id="page">
</div>

غير لون الخلفية الخاص بالنموذج الى الأبيض:

form {
	background:#fff;
}

أضف خلفية مختلفة للحقول Input سواء باستعمال لون ب CSS أو على شكل صورة:

form input {
	background:url(../images/input.png) repeat-x 0 0;
	border:1px solid #ddd;
}

وخلفية أو لون مختلف عند وضع مؤشر الفأرة Focus:

form input:focus {
	background:url(../images/input-focus.png) repeat-x 0 0;
	border:1px solid #bbddfc
}

وأخيرا، استعمل Class لتغير خصائص زر الأرسال Submit:

<input type="submit" value="login" class="login" />

form input.login:hover {
	background:#666
}

يمكنك الان البدأ بتصميم واجهة UI للوحة التحكم الخاصة بتطبيقك.

6 تعليقات

أزهار قلبي قال:

1 أغسطس 2009 الساعة 15:38

درس رائع جد

جزاك الله كل خير
toufik213 قال:

1 أغسطس 2009 الساعة 17:25

شكرا على الدروس القيمة من اخي العزيز
ali قال:

1 أغسطس 2009 الساعة 17:37

درس رائع جدا وفى انتظار المزيد
احمد عيسى قال:

1 أغسطس 2009 الساعة 19:09

درس رائع::

اريد ان اسال المثال // html 5
استخدمت //
section
// ->ما هو section ؟!
واستخدمت ترقيع لاكسبولر 8 لما هو ؟

ارجو الاجابة عن اسالتى

شكرا cssbit
jam3 قال:

1 أغسطس 2009 الساعة 19:13

والله يعجز لسان المرء حينما يكون الشكر اكثر من كلمة تقال ..!
cssbit قال:

2 أغسطس 2009 الساعة 09:47

شكرا لكم

أحمد عيسيى:
كما قال الاستاذ Yosry ف section وسم tag جديد مثل header و footer، وما دمت استعملت محتوى في الصفحة وضعت هذا الوسم.