صفحة تسجيل الدخول بالhtml5 و css3

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

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

يمكنك أن تشاهد مثال حي لصفحة تسجيل الدخول من هنا: صفحة تسجيل الدخول.

المهم سنبدأ بطرح كود الCss والذي أضفنا إليه تقنيات من آخر نسخة (CSS3):

#form{
background-image:url('base.png');
width:300px;
hight:286px;
margin:200px auto;
border-radius:25px 8px 25px 8px;
}
#login{
background-image:url('user.png');
background-repeat:repeat-x;
color:#fff;
}
h1{
text-align:center;
font-family:arial;
font-size:26px;
margin:35px;
padding:6px;
}
input[type=text]{background-image:url('user1.png');border-radius:10px 10px 0px 0px;}
input[type=password]{background-image:url('user2.png');border-radius:0px 0px 10px 10px;}
input[type=text],input[type=password]{
margin:2px 0 0 10px;
padding:1em;
text-align:center;
width:250px;
color:#fff;
border:0px;
}
input[type=submit]{
margin:3em 0 2em 30px;
padding:10px;
background-image:url('buton.png');
width:240px;
border-radius:5px 5px 5px 5px;
border:0px;
}

روابط الصور: 

• base.png
• user2.png
• user1.png
• user.png
• buton.png

يجب تحميل الصور ورفعها على إستضافتك في مجلد صفحة تسجيل الدخول أو يمكنك رفعها على أي سيرفر أخر ووضع الرابط في كود الCss.

والأن كود الHTML ويظهر بشكل واضح جدا الأوامر التي أضيفت إلى الكود من أخر نسخة من ال(Html5):

<div id='form'>
<div id='login'>
<h1>تسجيل الدخول</h1>
<div>
<form>
<input type='text' name='user'placeholder='إسم المستخدم'required='required'autofocus/>
<input type='password' name='pass'placeholder='كلمة السر'required='required' />
<input type='submit' name='buton' value='دخول' />
</form>
</div>

الأوامر المسطرة كلها أوامر لم تكن في النسخة السابقة من الHtml ففي صفحة تسجيل الدخول هذه أنا أخذت بعين الإعتبار صفحة التسجيل الخاص بتويتر فإذا لاحظتم أن كود الhtml الخاص بصفحتنا  يشبه بشكل كبير الكود الخاص بصفحة تويتر.

هذا كل شئ وقد نتطرق لتصميم أشياء أفضل بالhtml5 لأنه يمنحنا الكثير من المزايا والتي يجب أن نميز بها موقعنا ;)